SASS

Posted 2020-08-09

一、      Sass （安装时从C盘开始不可有中文）

1、文件后缀名有两种，sass中不包含{}和；， scss中包含{}和；，建议使用scss的后缀名。

2、用@import导入文件，可引入scss或者css文件，区别在于scss文件会被译， css文件则不会。

3、变量

$变量名（自取）：值，如果在值后面接!default表示默认变量值,如果不想用默认值，在其上面写新的申明即可，默认值不常用。

$变量名：值；

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

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

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

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

主要分为三种情况：

1、无参数
@mixin all{
  width: 200px;
  height: 300px;
  background: gold;
}
div{
  @include all;
}
2、有参数（固定值）
@mixin one($width:200px,$height:500px,$background:green){
  width: $width;
  height: $height;
  background: $background;
}
div{
  @include one;
}
3、有参数（无固定值）
@mixin two($width,$height,$background){
  width: $width;
  height: $height;
  background: $background;
}
div{
  @include two(200px,50px,blue);
}