CSS预处理器

1. 什么是CSS预处理器

1. 是基于CSS的另一种语言，通过工具编译成CSS，添加了很多CSS不具备的特性，能提升CSS文件的组织性
2. 主要有
   • less 基于node 用js写的 编译速度快 有可以在浏览器可以直接使用的版本，不需要预先编译
   • sass 基于ruby
3. 功能
   • 嵌套 反映层级与约束
   • 变量和计算 减少重复代码
   • extend和mixin 代码片段
   • 循环 适用于复杂的有规律的样式
   • import CSS文件模块化

2. less

1. 安装lessnpm install less
2. less文件编译成css文件lessc demo.less>demo.css

3. less变量

• less文件

  @fontSize:12px;
  @bgColor:red;
  .wrapper{
      background:lighten(@bgColor, 40%);
  
      .nav{
          font-size: @fontSize;
      }
      .content{
          font-size: @fontSize + 2px;
          &:hover{
              background:@bgColor;
          }
  	}
  }
  

• 编译的css文件

  .wrapper {
    background: #4dff4d;
  }
  .wrapper .nav {
    font-size: 16px;
  }
  .wrapper .content {
    font-size: 18px;
  }
  .wrapper .content:hover {
    background: green;
  }
  

    - 背景颜色变浅40%会编译成具体的颜色
    - 字体大小增加了2px
  

4. mixin

• @fontSize: 12px;
  @bgColor: red;
  .box(){	//加了()不会被编译
      color:green;
  }
  
  .box1{
      .box();	//复用box中的样式
      line-height: 2em;
  }
  .box2{
      .box();
      line-height: 3em;
  }
  
  .block(@ft){
      font-size: @ft;
      border: 1px solid #ccc;
      border-radius: 4px;
  }
  .wrapper{
      background:lighten(@bgColor, 40%);
  
      .nav{
          .block(@fontSize);
      }
      .content{
          .block(@fontSize + 2px);
          &:hover{//如果内层有伪类 伪元素选择器，前面需要加&
              background:red;
          }
      }
  }
  

5. extend 解决复用和重复问题

• @fontSize: 12px;
  @bgColor: red;
  
  .block{
      font-size: @fontSize;
      border: 1px solid #ccc;
      border-radius: 4px;
  }
  .wrapper{
      background:lighten(@bgColor, 40%);
  
      .nav:extend(.block){
          color: #333;
      }
      .content:extend(.block){
         	// 或 &:extend(.block);
          &:hover{
              background:red;
          }
      }
  }
  

    - extend 表示由block复用过来
  

6. loop循环（递归，因为less不支持for循环）

• .gen-col(@n) when (@n > 0){
      .gen-col(@n - 1);
      .col-@{n}{
          width: 1000px/12*@n;
      }
  }
  
  .gen-col(12);
  

7. @import “./demo”

3. sass

1. 安装sassnpm install node-sass这个安装的比较慢可以把镜像切换成淘宝
2. scss文件编译成css文件node-sass demo.scss>demo.css
3. sass输出可以有多种格式
   1. 默认保留嵌套格式
   2. 去掉嵌套格式node-sass --output-style expanded demo.scss>demo.css

4. sass与less写法的差别：将@变成$

5. mixin

• $fontSize: 12px;
  $bgColor: red;
  @mixin block($ft){
      font-size: $ft;
      border: 1px solid #ccc;
      border-radius: 4px;
  }
  .wrapper{
      background:lighten($bgColor, 40%);
  
      .nav{
          @include block($fontSize);
      }
      .content{
          @include block($fontSize + 2px);
          &:hover{
              background:red;
          }
      }
  }
  

6. extend

• $fontSize: 12px;
  $bgColor: red;
  
  .block{
      font-size: $fontSize;
      border: 1px solid #ccc;
      border-radius: 4px;
  }
  .wrapper{
      background:lighten($bgColor, 40%);
  
      .nav{
          @extend .block;
          color: #333;
      }
      .content{
          @extend .block;
          &:hover{
              background:red;
          }
      }
  }
  

7. loop

• @for $i from 1 through 12 {
      .col-#{$i} {
          width: 1000px/12*$i;
      }
  }
  

8. import “./demo”

4. 预处理器框架

1. sass compss
2. less lesshat EST