它在CSS的语法基础上增加了变量（variable）、嵌套（nested rules）、混合（mixins)、导入（inline imports）等高级功能，这些拓展令CSS更加强大与优雅。
使用Sass以及Sass的样式库（如compass）可以更好地组织管理样式文件、以及更高效的开发项目。
VScode三个关于sass的插件
.vscode-Sass------sass/scss文件语法提示。（sublime text也有）
.vscode-Easy Sass------scss编译成css，min.css。(不错的一个sass编译工具)
.vscode-Sass Formatter---------scss自动格式 缩进
第一步，再vscode中安装easy sass 下图是已经安装成功的状态 第二步，修改vscode的配置 点击设置按钮 然后将这段复制到json文件里面 expanded：没有缩进的、扩展的css代码。 compact：简洁格式的 css 代码。 compressed：压缩后的 css 代码
"easysass.compileAfterSave": true, "easysass.formats": [ //nested：嵌套缩进的 css 代码。 //expanded：没有缩进的、扩展的css代码。 //compact：简洁格式的 css 代码。 //compressed：压缩后的 css 代码 { "format": "expanded", "extension": ".css" }, { "format": "compressed", "extension": ".min.css" } ], "easysass.targetDir": "css/" //路径第三步创建一个后缀为.sass 它会自动生成2个css，一个是压缩后的css（上线后使用），一个是代码格式化的css（测试使用）
less与css都是在{}当中写属性，而在sass当中可以不写{}，直接写属性，如果写了{}就会报错。
// less写法 .content{ width: 200px; height: 200px; border: 1px solid; } // sass写法 .content width: 200px; height: 200px; border: 1px solid; .div1 width: 100px; height: 100px; border: 1px solid;Sass 采用 $ 符号来声明变量。而less是用@符号来声明变量
$width : 500px; .content width : $width; height: $width; background-color: red;在声明变量的过程中，可以给变量添加默认值(!default)标志。如果在其变量值没有单独设定，那么就用添加默认值的变量值。如果设定了，那么就用重新设定的变量值。如下
$width : 500px !default; .content width : $width; height: $width; background-color: red; $width : 200px .demo2 width: $width; height: $width; background-color: green; 编译后 .content { width: 500px; height: 500px; background-color: red; } .demo2 { width: 200px; height: 200px; background-color: green; }变量可以一个一个的声明，也可以多个一起声明。多个一起声明，用起来是比较方便的，特别是声明相似功能的变量。
$size : 30px 15px !default; .content font-size: nth($size,1); .demo2 font-size: nth($size,2);a.全局变量就是定义在元素外面的变量 b.局部变量只会在局部范围内覆盖全局变量
$color: green !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .content width: 200px; height: 200px; background-color: red; $color: pink;//定义局部变量 .div1 width: 100px; height: 100px; background-color: $color;//调用局部变量 .demo2 width: 200px; height: 200px; background-color: $color;//调用全局变量变量不仅可以用在属性值，还可以用在选择器或者是属性上面。下面是变量使用在选择器上的小实例
$class : content; .#{$class} width : 20px;在嵌套的代码块内，可以使用&符号引用父元素。比如content：hover伪类，可以写成
.content &:hover background-color: red;SASS共有两种注释风格。 标准的CSS注释 / * */ ，会保留到编译后的文件。 单行注释 // ，只保留在sass源文件中，编译后被省略。 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。 3.6 继承 SASS允许一个选择器，继承另一个选择器。需要用到 @extend命令
.content border: 1px solid red; .demo2 @extend .content;当你的样式变得越来越复杂，需要重复使用大段的样式时， Sass 中的混合宏就会有重大意义。 .不带参数声明： 其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。
@mixin border-radius -webkit-border-radius: 5px; border-radius: 5px;带参数的混合宏：
@mixin border-radius($radius:5px) -webkit-border-radius: $radius; border-radius: $radius;通过 @mixin 关键词声明了一个混合宏，那么在实际调用中，其匹配了一个关键词“@include”来调用声明好的混合宏。
@mixin border-radius -webkit-border-radius: 3px; border-radius: 3px; button @include border-radius;传一个不带值的参数：
@mixin border-radius($radius) -webkit-border-radius: $radius; border-radius: $radius; //在调用的时候可以给这个混合宏传一个参数值： .box @include border-radius(3px);传一个带值的参数：
@mixin border-radius($radius:10px) -webkit-border-radius: $radius; border-radius: $radius; //在调用的时候可以给这个混合宏传一个参数值： .box @include border-radius;传多个参数： 多个参数。在实际调用和其调用其他混合宏是一样的：
@mixin center($width,$height) width: $width; height: $height; //调用 .box-center @include center(500px,300px);通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。
%mt5 margin-top: 5px; %pt5 padding-top: 5px; .btn @extend %mt5; @extend %pt5;