scss、less

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树

区别：

1. 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文件中所有样式添加到当前样式表中。