SCSS

scss

• &: 父选择器

• $: 声明变量 $themo_color: #ff0000;

• 数据类型： 数字、字符串、颜色、布尔值、空值、数组(用空格或逗号做分隔符)、maps (key1: value1, key2: value2)

• 运算类型： 数字运算（+ - * / %） 关系运算（> < >= <=）布尔运算（and or not）

• 函数：color: hsl(saturation: 100%, $lightness: 50%); 可传参

• #{}：插值语句，在选择器或属性名中使用变量， 例 #{$attr}-color: blue;

• @import 注意：scss文件包含媒体查询时仅作css语句引入

  @import "rounded-corners", "text-shadow"; 导入多个文件

• 文件名前添加下划线时不编译这些文件，但导入语句中却不须要添加下划线。

• @media: 媒体查询

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
编译为：
.sidebar {
    width: 300px; 
}
 @media screen and (orientation: landscape) {
    .sidebar {
       width: 500px; 
    }
 }
复制代码

• @extend: 样式继承

继承样式类： @extend .error;

• @extend-Only（%选择器）：当它们单独使用时，不会被编译到 CSS 文件中。

使用
#context %extreme {
  color: blue;
}
.notice {
  @extend %extreme;
}
编译
#context .notice {
  color: blue;
}
复制代码

！特别提醒: 在制做 Sass 样式库的时候使用，Sass 可以忽略用不到的样式。

• @mixin: 混合指令

//定义
@mixin large-text($size,$color: #333){ //参数能够设置默认值
  font: {
    family: Arial;
    size: $size;
    weight: bold;
  }
  color: $color;
}
//引用
@include large-text(20px, #fba);
@include large-text($size: 20px, $color: #fba); //关键词参数，相似js对象
复制代码

• @function: 函数指令

$grid-width: 40px;
$gutter-width: 10px;
//定义
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
//引用
#sidebar { width: grid-width(5); }
复制代码