sass

文件后缀名有两种，.sass中不包含{}和； .scss中包含{}和； 与css原生代码很类似， 所以建议使用.scss的后缀名

导入文件，可引入.scss或者.css文件，后缀名都可以去掉，区别在于，.scss文件会被考拉编译，.css文件不会

@import "";

变量,$变量名称（自取）：值，如果在值后面接!default表示默认值,如果不想用默认值，重新声明一个即可

语法结构：$变量名：值；其中变量名自取

div {属性名：$变量名；}

$border:1px solid red!default;

div{

border: $border;

}

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值

声明的@mixin通过@include来调用。

混合mixin，@mixin 名称{声明}，调用时使用@include 名称

无参数mixin

举例：@mixin widthHeight{

width: 200px;

height: 200px;

}

div{

@include widthHeight;

}

有参数mixin

@mixin background($color:green){

background: $color;

}

div{

@include background;

}

多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，

后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@mixin marginPadding($margin:50px,$padding:100px){

margin: $margin;

padding: $padding;

}

div{

@include marginPadding;

}