SASS号称是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
SASS支持样式的变量、混合（复用）、继承、嵌套、四则运算、函数等。
与LESS不同，SASS无法在浏览器JS下直接编译，只能在服务端编译为CSS后提供给客户端。
SCSS 是 Sass 3 引入新的语法，是一个 CSS3 语法的扩充版本，完全兼容 CSS3语法，即将一个.css文件改为.scss后缀亦可直接使用。
本文以下内容均以SCSS为例，其中 $\color{brown}{棕色内容是与LESS有显著不同之处}$

使用

sass基于Ruby语言开发而成，通常需要安装Ruby进行编译。
vue-cli中集成了基于node的sass-loader和node-sass，可以在node环境下进行编译。
VSCode中可以通过插件Live Sass Compiler进行编译

注释

支持行注释和块注释

块注释 /* hello */ 会生成在CSS中的相应位置
- $\color{brown}{在选择器/属性中的块注释也会被舍弃}$
行注释 //hello 总会被舍弃

导入（Importing）

多个SASS文件单独编译，因此variables/mixins/namespaces不能互相调用
通过@import可以在一个sass中导入外部sass(无需后缀)

@import "library"; // library.scss
@import "typo.css";

$\color{brown}{可以在选择器内进行导入，此时导入的内容仅在该选择器内生效}$

.blue-theme {@import "blue-theme"}

$\color{brown}{导入.css结尾的文件时会使用CSS自身的import功能}$

功能

变量

通过$声明或使用变量
$\color{brown}{声明时带有 !default 的变量不会覆盖原有的同名变量}$ （这意味着该变量如果已经赋值，那么它不会被重新赋值，但是，如果它尚未赋值，那么它会被赋予新的给定值）

$width: 20px;
$width: 10px !default;
$height: $width + 10px;
.header {
  width: $width;
  height: $height;//30px
}

$\color{brown}{LESS直接将选择器充当混合器，同时实现混合与继承，而SCSS进行了区分:}$
$\color{brown}{混合:通过@mixin定义，通过@include调用混合器}$
$\color{brown}{继承:通过@extend调用选择器}$

混合（Mixins）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
混合器可以具有参数，也可以用:为参数指定默认值

@mixin red($color,$font:14px) {
  color:$color;
  li {
    font-size:$font;
  }
}
@mixin blue(){
  color:blue;
}
body {
  opacity: 0.5;
  @include blue;
}
div {
  @include red(pink);
}

继承

$\color{brown}{不同于LESS，SCSS在继承时不仅继承自身样式(不包括浏览器默认样式)，还继承有关的组合选择器}$
$\color{brown}{继承与混合器相比生成的css更少，因其仅在原位重复生成选择器而非属性。因此也可以认为LESS不存在继承}$

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

占位符选择器
使用%开头进行定义，本身不会被编译进CSS，专为被继承用

#context a%extreme {// This ruleset won't be rendered on its own.
  color: blue;
}
.notice {
  @extend %extreme;
}

#context a.notice {
  color: blue;
}

Sass 不可以将 @media 层外的 CSS 规则继承给层内的 CSS。

嵌套（Nesting）和命名空间 (Namespaces)

嵌套被展开时顺序不变
&指向其自身
@ 规则也可以嵌套在选择器内部或相互嵌套
$\color{brown}{嵌套属性}$
在sass中，除了CSS选择器，属性也可以进行嵌套，甚至可以在嵌套中单独指定额外规则。

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

变量会优先从当前命名空间(作用域)中查找，如果不存在则从“父”级作用域继承。

四则运算

计算时如果单位换算无效或失去意义，则以 $\color{brown}{右}$ 侧单位为准。
通常仅对SASS变量做运算并配合calc使用。

插值（Interpolation）

$\color{brown}{ 通过\#\{ \}引用的字符串可用于拼接(有引号字符串会先被编译为无引号字符串)，便于选择器或属性名中使用变量}$

@mixin firefox-message($selector, $before, $height) {
  body.firefox #{$selector}#{before} {
    height: $height;
  }
}

@include firefox-message(".header", ":before", 30px);

函数和指令

主要用于判断、数组、颜色处理

CSS预处理器 SASS(SCSS)