SCSS 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。可以简单理解为scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号。
区别：1、Sass是以“.sass”后缀为扩展名，而SCSS是以“.scss”后缀为扩展名；2、Sass是以严格的缩进式语法规则来书写，不带大括号“{}”和分号“;”，而SCSS的语法书写和CSS语法书写方式非常类似，带大括号分号。
Less和Sass的实现原理和优点以及区别：
Less是一种动态的样式语言,使CSS变成一种动态的语言特性，如变量、继承、运算、函数。SaSS也是一种动态样式语言，Less和Scss语法更容易阅读。
实现原理： Less和SaSS都属于CSS预编译处理工具，CSS的扩展语言，所以会在编译前处理成css。
预处理器/工具是指在真正的编译开始之前由编译器调用的独立程序。预处理器可以删除注释、包含其他文件以及执行宏替代。
首先sass/less 会转换为ast(抽象语法树）语法
然后遍历转换后所有的节点
最后再形成css树
区别：
- Sass是在服务端上面处理的，之前是Ruby,现在是Dart-Sass或者是Node-Sass，但是Less在编译时，需要引入less.js来处理Less代码输出CSS到浏览器上，也可以在服务器上将Less语法编译成css文件，输出CSS文件到生产包目录，也有在线编译地址。（Less既可以在客户端上面运行，也可以在服务端运行，而Sass只能在服务端运行）
2.变量符，Less是@，而Sass是$
//Less-变量定义
@color: #008c8c;
.footer {
border: 1px solid @color;
}
//scss-变量定义
$color: #008c8c;
.footer {
border: 1px solid $color;
}
优点：
1.减少CSS冗余代码
2.提高样式代码的可维护性
3. 结构清晰，便于扩展，可以方便的屏蔽浏览器私有的语法差异
4. 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。
具体说下SCSS的用法和特性：如下
1.变量声明：$变量名:值;
$a:'red';//变量声明
div{
background-color: $a;
font-size: 16px;
color: $a;
}
//生成的内容
div {
background-color: "red";
font-size: 16px;
color: "red";
}
2.嵌套（无限嵌套）
div{
color:red;
a{
font-size:16px
}
}
//生成内容
div {
color: red;
}
div a {
font-size: 16px;
}
3.标识符&
//&
div{
color:red;
&:hover{ //用在伪类前面
color: blue;
}
}
//生成的内容
div {
color: red;
}
div:hover {
color: blue;
}
4.变量支持运算
$count:50;
div{
font: $count%2+'px';
}
//生成的内容
div {
font: "0px";
}
5.支持条件判断
$type: matador ;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else {
color: green;
}
}
//生成的css
p {color: red; }
6.混入器 @mixin @includ
@mixin border($width,$color) {
border: $width solid $color;
}
p{
@include border(1px,red)
}
div{
@include border(1px,blue)
}
//生成的内容
p {
border: 1px solid red;
}
div {
border: 1px solid blue;
}
指定默认参数时：
//指定默认参数值
@mixin border($width:1px,$color:red,$line:solid) {
border: $width $line $color;
}
p{
@include border(1px,red,"double")
}
div{
@include border(1px,blue)
}
h1{
@include border(1px,blue)
}
img{
@include border()
}
//生成内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
border: 1px "double" red;
}
div {
border: 1px solid blue;
}
h1 {
border: 1px solid blue;
}
img {
border: 1px solid red;
}
7.继承 @extend
//指定默认参数值
@mixin border($width:1px,$color:red,$line:solid) {
border: $width $line $color;
}
p{
@include border(1px,red,"double")
}
div{
//继承了p标签
@extend p
}
//生成的内容
p, div {
border: 1px "double" red;
}
8.导入对应的scss或者sass文件
//使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文
//件后缀。这样，在不修改样式表的前提下，你完全可以随意修改你或别人写的被导入的
//sass样式文件语法，在sass和scss语法之间随意切换
@import"sidebar";
//这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。
