CSS 预处理器

一、CSS 预处理器是什么

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

1. 预处理器的作用

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

2. 预处理的能力

• 嵌套 反应层级和约束
• 变量和计算 减少重复代码
• Extend 和 Mixin 代码片段
• 循环适用于负载有规律的样式
• import CSS 文件模块化
  • css 中也存在，但 css 不会进行代码合并，而是浏览器会进行动态引用，每个文件间浏览器会单独发一个请求

提高代码复用率和可维护性吧

二、Less

1. 安装

npm i less -D

// 编译
npx lessc test.less
// 编译输出文件名和路径
npx lessc test.less>test.css

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

2. less 变量

& 代表同级

@fontSize: 12px;
@bgColor: red;

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    background: lighten(@bgColor, 40%);
    
    .nav {
        font-size: @fontSize;
    }
    .content {
        // 乘法不用带单位
        font-size: @fontSize + 2px;
    }
}

3. less mixin

@fontSize: 12px;
@bgColor: red;

body {
    padding: 0;
    margin: 0;
}

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

.wrapper {
    background: lighten(@bgColor, 40%);
    
    .nav {
     	.block(@fontSize)   
    }
    .content {
        // 乘法不用带单位
        .block(@fontSize)
    }
}

4. less extend

@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) {
    }
	
    .content{
        &:extend(.block);
        &:hover {
            background: red;
        }
    }
}

5. less loop

.gen-col(@n) when (@n > 0) {// 终止条件
    // 递归
    .gen-col(@n - 1);
    .col-@{n} {
        width: 1000px / 12 * @n;
    }
}

.gen-col(12);

6. less import

@import 'test.less'

三、Sass

1. 安装

npm i node-sass

// 编译
npx node-sass test.scss
// 编译输出
npx node-sass test.scss>test.css
// 打平嵌套结构
npx node-sass --out-style expanded test.scss>test.css

2. Sass 变量

$fontSize: 12px;
$bgColor: red;

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    background: lighten($bgColor, 40%);
    
    .nav {
        font-size: $fontSize;
    }
    .content {
        // 乘法不用带单位
        font-size: $fontSize + 2px;
    }
}

3. Sass mixin

$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);
    }
}

4. Sass extend

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

.wrapper {
    background: lighten($bgColor, 40%);
    
    .nav {
        @extend .block;
    }
    .content {
        // 乘法不用带单位
        @extend .block;
    }
}

5. Sass loop

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

@include gen-col(12);

// sass 支持 for 循环 less 不支持
@for $i from 1 through 12 {
    .col-#{$i} {
        width:  1000px / 12 * $i;
    }
}

6. sass import

@import 'test.scss'

四、CSS 预处理器框架

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

@import "est/all"

// 清空默认样式
.global-reset();

.box {
    // 行内块元素
	.inline-block();
    // 透明度
    .opacity(60);
}