SCSS 是 SASS3 引入的新语法，其语法完全兼容 CSS3，同时继承了 SASS 的强大功能。

变量

变量的声明和使用都以 $ 开头，可以简单理解为一个模板引擎，编译过程就是用变量的值替换变量所占据的位置，有如下特点：

支持全局和局部变量，后者只能在声明范围内使用。
变量名不区分中划线 - 和下划线 _，例如 border-color 和 border_color 相同。
后定义的变量声明会被忽略，但是赋值会被执行，这和 ES5 中 var 声明变量一样。

例如，如下示例。

$border-color: #aaa;  // 全局变量
$border_color: #ccc;  // 赋值会覆盖之前变量
.container {
    $border-width: 1px;
    border: $border-width solid $border-color;
}

最终编译后结果为。

.container {
    border: 1px solid #ccc;
}

混合器 (函数)

通过 @mixin 指令声明一个函数，有重复代码的都可以使用，可以设置参数，包括了默认值。

@mixin get-border-radius($border-radius:5px,$color:red){
    -moz-border-radius: $border-radius;
    -webkit-border-radius: $border-radius;
    border-radius: $border-radius;
    color:$color;
}

在后续代码中可以通过 @include 调用函数。

.container {
    border:1px solid #aaa;
    @include get-border-radius;            // 使用默认值
    @include get-border-radius(10px,blue); // 按照顺序传参
    @include get-border-radius($color:blue,$border-radius:10px);  // 或者指定参数名
}

例如 BootStrap 中根据 Breakpoint 设置属性的实现，用于页面的响应式编程。

.custom-class {
    display: none;
}
@include media-breakpoint-up(sm) {
    .custom-class {
        display: block;
    }
}

参考

SASS Offical

SCSS 基本语法介绍

变量 #

混合器 (函数) #

参考 #

变量

混合器 (函数)

参考