【CSS】CCS预处理器

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

 

 特性：

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

css变量引用差异性：

less: @

scss:$

造成上述差异性，是因为less和sass的理念不同，less想尽量去接近css语法，sass和css是不兼容的，为了不混淆，用了$去声明变量。

应用场景：css变量解决了一处定义，多处使用，方便后期维护。

mixin 函数

应用场景：在css 内部就完成了样式的复用。

使用差异：

1. less mixin 可以直接用class 去做的，也可以加个参数，另外不带“（）”，样式会被编译
2. sass 强制必须有“@mixin”,后面追加名字，注意名字前面没有“.”
3. 使用mixin,sass 强制必须要用“@include” 追加名字（跟less不一样，没有.）

extend 函数

使用方法：

// sass extend使用
.base {
    font-size: 16px;
}

.demo {
    @extend .base;
}

// less extend使用
.base {
    font-size: 16px;
}

.demo {
    &:extend(.base);
}

mixin 和 extend 区别

mixin:直接把代码复制过来

extend:把选择器提取出来，将公共的样式写在一起，减少css的体积。

css 循环

less loop:由于less中没有循环，需要借助递归完成样式循环操作。

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

.fans-col(12)

sass loop 

@mixin fans-col($n) {
    @if $n > 0 {
        @include fans-col($n - 1);
        .col-#{$n} {
            width: 1200px/12*$n;
        }
    }
};

@include fans-col(12);


// 另外sass支持另外一种写法
@for $i from 1 through 12 {
    .col-#{$i} {
        width: 1200px/12*$i;
    }
};

CSS 模块化

less 和 sass 使用方法一致

@import "head";
@import "main";
@import "footer";

CSS预处理器框架

1. SASS - Compass
2. Less - Lesshat/EST
3. 提供现成的mixin
4. 类似于JS类库，封装常用功能

预处理器的作用

1. 帮助更好的组织CSS代码
2. 提高代码复用率
3. 提高可维护性

预处理器的优缺点

优点：提高代码复用率和可维护性

缺点：需要引入编译过程