scss

&: 父选择器
$: 声明变量 $themo_color: #ff0000;
数据类型：数字、字符串、颜色、布尔值、空值、数组(用空格或逗号作分隔符)、maps (key1: value1, key2: value2)
运算类型：数字运算（+ - * / %）关系运算（> < >= <=）布尔运算（and or not）
函数：color: hsl( $hue: 0,$ 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); }

SCSS

scss