介绍

　　less sass stylus 都是 css 预处理器，语法上稍有差异，作用一样

　　都是让 css，增强能力，具备变量，函数.. 的能力

• sass的语法两种语法 .sass 和 .scss

  • .sass 和 .stylus 语法很像 (了解)
  • 要求省略 {} 和 分号， 缩进表示嵌套
  • 使用 $变量名: 变量值   定义变量，  示例：  $base: red    (后面不要分号)

1 <style lang="sass">
2 // sass 和 stylus 的语法基本一样（要求去掉花括号和分号）
3 .outer
4   background-color: pink
5   padding: 10px
6   .inner
7     background-color: red
8 </style>

• .scss 和 .less 语法很像， 都支持嵌套, 变量......

  • scss 声明变量：$变量名    (不省略{}和分号)
  • less 声明变量:  @变量名

 1 <style lang="scss">
 2 // scss和less特别像，稍有差异
 3 $color: red;
 4 
 5 .outer {
 6   background-color: $color;
 7   padding: 20px;
 8   .inner {
 9     background-color: blue;
10   }
11 }
12 </style>