Less和Sass

• 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：

@bgColor: red;
.container{
  background: lighten(@bgColor,20%);
  .nav{
    ...
  }
}

• Sass(Sass嵌套没有花括号，SCSS是其升级版本，嵌套有花括号)：

$bgColor: red;
.container{
  background: lighten($bgColor,20%);
  .nav{
    ...
  }
}

四.mixin代码复用

• Less：

.box1{...}//可以传参数.box1{@xxx}
.box2{
  .box1();//.box1(@xxx);
  ...  
}

• Sass：

@mixin box1($xxx){...}
.box1{
  @include box($xxx);
  ...
}

五.extend

mixin直接复制代码（用于复杂场景），extend提取选择器，把公共样式写在一起。

• Less：

.block{...}
.container{
  .nav:extend(.block){
    ...
  }
  .content{
    &:extend(.block);
    ...
  }
}

• Sass：

.block{...}
.container{
  .nav{
    @extend .block;
    ...
  }
  .content{
    @extend .block;
    ...
  }
}

六.import

//多个import写在一起编译后会在一起
@import "./xxx";
@import "./yyy";

七.预处理框架

提供现成mixin，类似JS类库，封装常用功能。

• Less：Lesshat/EST

• Sass：Compass