六、CSS预处理器

css预处理器

• 什么是css预处理器
  • 基于css的另一种语言
  • 通过工具编译成css
  • 添加了很多css不具备的特性
  • 能提升css文件的组织方式
• 常见css预处理器
  • less(基于node)-编译速度快，不需要预先编译，复杂特性繁琐
  • sass(基于ruby)
• 预处理器提供的功能
  • 嵌套 反映层级和约束
  • 变量和计算 减少重复代码
  • Extend和Mixin 代码片段（类似JS中的函数）
  • 循环 适用于复杂有规律的样式
  • import css文件模块化

less嵌套

npm install less // 安装less
//创建t1.less文件
.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}
//如果npm install less -g 将less安装到全局则可以直接lessc来运行.less文件
//否则通过./node_modules/.bin/lessc t1.less>t1.css来运行编译，并把结果输出到t1.css文件
//t1.css文件
.wrapper {
  background: white;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sass嵌套

npm install node-sass// 安装sass
// 创建s1.scss文件（和t1.less文件一样）
//如果npm install node-sass -g 将less安装到全局则可以直接node-sass来运行.scss文件
//否则通过./node_modules/.bin/node-sass s1.scss>s1.css来运行编译，并把结果输出到s1.css文件
//输出和less的一致
node-sass --output-style expanded s1.scss>s1.css 输出的css空格保持一致，不会根据嵌套结构空格不同

less变量

//s2.less文件
@fontSize: 12px;
@bgColor: red;
.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        font-size: @fontSize;
    }
    .content{
        font-size: @fontSize + 2px;
        &:hover{
            background:@bgColor;
        }
    }
}
//lessc s2.less>s2.css
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

sass变量

在less中变量使用@，在sass中使用$

less mixin

//t3.less
@fontSize: 12px;
@bgColor: red;
.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        .block(@fontSize);
    }
    .content{
        .block(@fontSize + 2px);
        &:hover{
            background:red;
        }
    }
}
// 用于解决两个地方用到相同的类，实现样式复用
// 传统写法

    

    


// 现在通过把block写成一个函数，复制到需要的地方，即nav类和content类都包含，就不需要把block抽离出来了

    

    


// 编译结果，block不见了，但会嵌入在nav和content两个类中
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content {
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper .content:hover {
  background: red;
}

sass mixin

less中可以直接.block声明和调用
sass中需要@mixin block来声明,调用时加@include

$fontSize: 12px;
$bgColor: red;

@mixin block($fontSize){
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @include block($fontSize);
    }
    .content{
        @include block($fontSize + 2px);
        &:hover{
            background:red;
        }
    }
}

less extend

// extend用于把公共样式的选择器放在一起，解决了mixin的代码重复问题
@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;
        }
    }
}
// 编译为css文件
.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  color: #333;
}
.wrapper .content:hover {
  background: red;
}

sass extend

// 通过@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;
        }
    }
}

less loop

//按照规则生成一系列css文件
.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);
// 编译结果
.col-1 {
  width: 83.33333333px;
}
.col-2 {
  width: 166.66666667px;
}
.col-3 {
  width: 250px;
}
.col-4 {
  width: 333.33333333px;
}
.col-5 {
  width: 416.66666667px;
}
.col-6 {
  width: 500px;
}
.col-7 {
  width: 583.33333333px;
}
.col-8 {
  width: 666.66666667px;
}
.col-9 {
  width: 750px;
}
.col-10 {
  width: 833.33333333px;
}
.col-11 {
  width: 916.66666667px;
}
.col-12 {
  width: 1000px;
}

sass loop

//less用when,通过mixin来递归,sass用if来递归
@mixin gen-col($n){
 @if $n > 0 {
     @include gen-col($n - 1);
     .col-#{$n}{
         width: 1000px/12*$n;
     }
 }
}

@include gen-col(12);
 
// 上述方法用的较少，而是用for循环较多（less不支持for循环）
@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1000px/12*$i;
    }
} 

less import

// 引入不同文件，编译时会编译成一个文件
// main.less
@import "./import-variable";
@import "./import-module1";
@import "./import-module2";
// import-variable.less
@themeColor: blue;
@fontSize: 14px;
// import-module1.less
.module1{
    .box{
        font-size:@fontSize + 2px;
        color:@themeColor;
    }
    .tips{
        font-size:@fontSize;
        color:lighten(@themeColor, 40%);
    }
}
// import-module2.less
.module2{
    .box{
        font-size:@fontSize + 4px;
        color:@themeColor;
    }
    .tips{
        font-size:@fontSize + 2px;
        color:lighten(@themeColor, 20%);
    }
}

// 编译后的css文件
.module1 .box {
  font-size: 16px;
  color: blue;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: blue;
}
.module2 .tips {
  font-size: 16px;
  color: #6666ff;
}
可以按照结构编写不同的less文件，不用担心多个css文件耗费性能

sass import

和less一致

预处理器框架

• sass - Compass
• less - Lesshat/EST
• 提供现成的mixin
• 类似JS类库 封装常用功能