- 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类库,封装常用功能。