- Less快速入门中文文档：https://less.bootcss.com/
- Sass快速入门中文文档：https://www.sasscss.com/getting-started/
- SCSS 与 Sass 异同：http://sass.bootcss.com/docs/scss-for-sass-users/
一.介绍
Less/Sass这样的基于CSS的另一种语言，通过工具编译成CSS，添加了很多CSS不具备的特性。
二.安装和使用
-
Less：
-
Node.js环境中使用：
-
npm install less -
lessc xxx.less
-
-
浏览器环境中使用
-
<link rel="stylesheet/less" type="text/css" href="styles.less" /> -
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.10.0-beta/less.min.js" ></script>
-
-
-
Sass：
-
npm install node-sass -
node-sass xxx.scss
-
三.嵌套和变量
-
Less：
1 @bgColor: red; 2 .container{ 3 background: lighten(@bgColor,20%); 4 .nav{ 5 ... 6 } 7 }
-
Sass(Sass嵌套没有花括号，SCSS是其升级版本，嵌套有花括号)：
1 $bgColor: red; 2 .container{ 3 background: lighten($bgColor,20%); 4 .nav{ 5 ... 6 } 7 }
四.mixin代码复用
-
Less：
1 .box1{...}//可以传参数.box1{@xxx} 2 .box2{ 3 .box1();//.box1(@xxx); 4 ... 5 }
-
Sass：
1 @mixin box1($xxx){...} 2 .box1{ 3 @include box($xxx); 4 ... 5 }
五.extend
mixin直接复制代码（用于复杂场景），extend提取选择器，把公共样式写在一起。
-
Less：
1 .block{...} 2 .container{ 3 .nav:extend(.block){ 4 ... 5 } 6 .content{ 7 &:extend(.block); 8 ... 9 } 10 }
-
Sass：
1 .block{...} 2 .container{ 3 .nav{ 4 @extend .block; 5 ... 6 } 7 .content{ 8 @extend .block; 9 ... 10 } 11 }
六.import
1 //多个import写在一起编译后会在一起 2 @import "./xxx"; 3 @import "./yyy";
七.预处理框架
提供现成mixin，类似JS类库，封装常用功能。