SASS号称是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
与LESS不同，SASS无法在浏览器JS下直接编译，只能在服务端编译为CSS后提供给客户端。
SCSS 是 Sass 3 引入新的语法，是一个 CSS3 语法的扩充版本，完全兼容 CSS3语法 ，即将一个.css文件改为.scss后缀亦可直接使用。
本文以下内容均以SCSS为例，其中

使用

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

注释

支持行注释和块注释

• 块注释 /* hello */ 会生成在CSS中的相应位置
  • 
• 行注释 //hello 总会被舍弃

导入（Importing）

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

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

• 

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

• 

功能

变量

通过$声明或使用变量

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

混合（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);
}

继承

//通过选择器继承继承样式
.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)

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

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

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

四则运算

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

插值（Interpolation）

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

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

函数和指令

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