慕课网CSS工作应用+面试（6）预处理器

1.介绍

基于CSS的另一种语言
通过工具编译成CSS
添加了很多CSS不具备的特性
能提升CSS文件的组织

CSS预处理器：Less（基于Node写的）、Sass（基于Ruby写的）

CSS预处理器功能：
1.嵌套 反映层级和约束
2.变量和计算 减少重复代码
3.Extend和Mixin 代码片段复用
4.循环 适用于复杂有规律的样式
5.import CSS文件模块化

编译Less和Sass可以用koala，比较方便。

2.less 嵌套

//less
.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}

//css
.wrapper {
  background: white;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: red;
}

3.sass 嵌套

//sass
body{
    padding:0;
    margin:0;
}

.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}

4.less 变量

// less
@fontSize: 12px;
@bgColor: red;

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

    .nav{
        font-size: @fontSize;
    }
    .content{
        font-size: @fontSize + 2px;
        &:hover{
            background:@bgColor;
        }
    }
}

//css
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .content {
  font-size: 14px;
}
.wrapper .content:hover {
  background: #ff0000;
}

5.sass 变量

//sass
$fontSize: 12px;
$bgColor: red;

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        font-size: $fontSize;
    }
    .content{
        font-size: $fontSize + 2px;
        &:hover{
            background:red;
        }
    }
}

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

6.less mixin

mixin:一段代码要复用,可以理解为类似类和参数

原来css中处理要复用一段代码样式：

//添加一个class
.block{

}

<div class="block nav"></div>
<div class="block content"></div>

mixin：

//less
@fontSize: 12px;
@bgColor: red;

.box{
    color:green;
}

.box1{
    .box();
    line-height: 2em;
}
.box2{
    .box();
    line-height: 3em;
}

.block(@fontSize){
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}


body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

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

//css
.box {
  color: green;
}
.box1 {
  color: green;
  line-height: 2em;
}
.box2 {
  color: green;
  line-height: 3em;
}
body {
  padding: 0;
  margin: 0;
}
.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;
}

如果没有参数，可以省略()直接写成：

.box{

}

//再引用
.box1{
	.box();
}
.box2{
	.box();
}

7.sass mixin

//sass
$fontSize: 12px;
$bgColor: red;

@mixin block($fontSize){
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten($bgColor, 40%);

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

mixin中sass比less多了@mixin和include。

8.less extend

mixin编译成css后，有时候同一类样式还是写了很多次，我们可以将这些样式统一提出来。类似下面：

//前
.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 .nav,
.wrapper .content{
	border: 1px solid #ccc;
	border-radius:4px;
}

减少了CSS代码，这样CSS文件体积就可以减小了。

为了解决上面问题，extend就应运而生了。

//less
@fontSize: 12px;
@bgColor: red;

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

    .nav:extend(.block){   //.nav扩展.block
        color: #333;
    }
    .content{
        &:extend(.block);   //.content扩展.block
        &:hover{
            background:red;
        }
    }
}

//css
.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  color: #333;
}
.wrapper .content:hover {
  background: red;
}

.block、.wrapper .nav、.wrapper .content公共样式都提取出来了。

9.sass extend

//sass
$fontSize: 12px;
$bgColor: red;

.block{
    font-size: $fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten($bgColor, 40%);

    .nav{
        @extend .block;
        color: #333;
    }
    .content{
        @extend .block;
        &:hover{
            background:red;
        }
    }
}

less和sass比较：

//less
.nav:extend(.block){   //.nav扩展.block
        color: #333;
}

//sass
.nav{
        @extend .block;
        color: #333;
}

10.less loop

loop：循环

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

.gen-col(12);

//css
.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;
}

11.sass loop

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

12.less import

import主要解决模块化的问题。

@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

//6-import-module1
.module1{
    .box{
        font-size:@fontSize + 2px;
        color:@themeColor;
    }
    .tips{
        font-size:@fontSize;
        color:lighten(@themeColor, 40%);
    }
}

//6-import-module2
.module2{
    .box{
        font-size:@fontSize + 4px;
        color:@themeColor;
    }
    .tips{
        font-size:@fontSize + 2px;
        color:lighten(@themeColor, 20%);
    }
}

//6-import-variable
@themeColor: blue;
@fontSize: 14px;

编译后CSS：

.module1 .box {
  font-size: 16px;
  color: #0000ff;
}
.module1 .tips {
  font-size: 14px;
  color: #ccccff;
}
.module2 .box {
  font-size: 18px;
  color: #0000ff;
}
.module2 .tips {
  font-size: 16px;
  color: #6666ff;
}

13.sass import

@import "./6-import-variable";
@import "./6-import-module1";
@import "./6-import-module2";

.module1{
    .box{
        font-size:$fontSize + 2px;
        color:$themeColor;
    }
    .tips{
        font-size:$fontSize;
        color:lighten($themeColor, 40%);
    }
}

.module2{
    .box{
        font-size:$fontSize + 4px;
        color:$themeColor;
    }
    .tips{
        font-size:$fontSize + 2px;
        color:lighten($themeColor, 20%);
    }
}

$themeColor: blue;
$fontSize: 14px;

14.预处理器框架

SASS对应Compass
Less对应Lesshat/EST

预处理器框架：
提供现成的mixin
类似JS类库，封装常用功能

15.CSS面试真题

1.常见的CSS预处理器

Less（Node.js）
Sass (Ruby，有Node版本)

2.预处理器的作用

帮助更好地组织CSS代码
提高代码复用性
提升可维护性

3.预处理器的能力

1.嵌套 反映层级和约束
2.变量和计算 减少重复代码
3.Extend和Mixin 代码片段复用
4.循环 适用于复杂有规律的样式
5.import CSS文件模块化

4.预处理器的优缺点

优点:提高代码复用率和可维护性
缺点：需要引入编译过程，有学习成本