sass变量、嵌套、混合（mixin）、继承拓展、@import、comment(4/6)

本篇文章主要介绍了" sass变量、嵌套、混合（mixin）、继承拓展、@import、comment"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 变量、嵌套、混合（mixin）、继承拓展、@import、comment变量的意义在sass里我们可以定义多个变量来存放颜色、边框等等的样式，这样就可以在下面想...

body {
  font-family: Helvitica;
  font-size: 15px;
  font-weight: bold;}.nav{border: 1px solid red;
  border-left: none;
  border-right: none;}.page-next {
  transition-property: all;
  transition-delay: 2s;}

mixin 混合

你可以把它想象成一个有名字的定义好的样式

每一个mixin都有自己的名字，类似于js里的函数定义方法如下

@mixin 名字(参数1，参数2...){
    ...
}

使用方法是在其他选择器css样式里通过@include引入，其实就相当于将mixin里的代码写入到这个选择器的css里，如下：

@mixin alert {color:#f60;
    background-color:#f60;
    a{color:pink;}&-a{color:red;}}.alert-warning{
    @include alert;}

-----》

.alert-warning {color: #f60;
  background-color: #f60;}
.alert-warning a {color: pink;}
.alert-warning-a {color: red;}

刚才是没有参数的mixin，mixin也可以拥有参数，需要注意的是：

• 形参的名字前要加$
• 传参的时候只写值的话要按顺序传
• 传参的时候不想按顺序的话需要加上形参名字

例如：