7.1 CSS预处理器

如果时间退到2年前,那么CSS预处理是非常火的.

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

常见的预处理器: less(基于Node.js) sass(新版本是scss)
less优势是: 用js写的,编译比较快.并且有浏览器中可以直接使用的一个版本.不需要预先编译.
sass是用ruby写得,编译起来比较慢.

CSS预处理器到底提供哪些功能?
嵌套 - 反应层级和约束.
变量和计算 - 减少重复代码
Extend和Mixin - 代码片段 (如果一段代码需要不断用的时候就可以提取成一个代码片段,就像js的函数一样)
循环 - 适用于复杂有规律的样式(比如表格)
import -CSS文件模块化

less实例

安装less

安装完成以后,文件下会多出: node_modules目录 和 package-lock.json 文件.

image.png
解读嵌套代码

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

使用less
z.less

.wrapper {
    background : red;
    .content {
    font-size : 560px;
        height : 50px;
    }
    .main {
        font-size : 50px;
    &:hover {
        background : yellow;
    }
    }
}

彬@TB MINGW64 /z/全面系统讲解CSS 工作应用+面试一步搞定
$ ls
 i29u8p/                   '第11章 课程总结'/     '第6章 CSS动画'/
 node_modules/             '第1章 课程介绍'/      '第7章 预处理器'/
 package-lock.json         '第2章 HTML基础强化'/  '第8章 Bootstrap'/
 project.zip               '第3章 CSS基础'/       '第9章 CSS工程化方案'/
 z.less                    '第4章 CSS布局'/
'第10章 三大框架中的CSS'/  '第5章 CSS效果'/

彬@TB MINGW64 /z/全面系统讲解CSS 工作应用+面试一步搞定
$ ./node_modules/.bin/lessc z.less           // **重要命令**
.wrapper {
  background: red;
}
.wrapper .content {
  font-size: 560px;
  height: 50px;
}
.wrapper .main {
  font-size: 50px;
}
.wrapper .main:hover {
  background: yellow;
}

彬@TB MINGW64 /z/全面系统讲解CSS 工作应用+面试一步搞定

在git命令里面执行#: ./node_modules/.bin/lessc z.less
编译成css文件并输出为z.css于当前目录 ./node_modules/.bin/lessc z.less>z.css

less给我们提供了很多的运算函数.变量

@fontSize :12px;
@bgColor : red;

background:lighten(@bgColor,40%); //变浅40%;
font-size : @fontSize + 20px;  //字体大小增加20px;

示例

less变量

变量不能乱用,要有规划. 变量是less和sass提供我们非常好的一个特性.

less的Mixin的使用

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

.wrapper {
    background : red;
    .content {
    font-size : 560px;
        height : 50px;
        .block(@fontSize); //引用Mixin
    }
    .main {
        font-size : 50px;
        .block(@fontSize);  //引用Mixin
    }
}

image.png

less的Extend的使用, mixin与extend区别是,mixin直接复制过来,而extend是提取公共,特殊再写.
它的主要优点是用于简单的,并且声称的css文件要小.
但是我感觉css文件再大也是非常小的.可以忽略,我更倾向于mixin,因为更直观.

less的loop
less本身是没有循环的,我们可以用递归方法模仿循环.
when 后面是一个出口,当 (@n > 0) 的时候不再执行

image.png

sass安装(局部安装)

#: npm install node-sass
#: npm install node-sass -g  //全局安装

sass的文件后缀是scss
z.scss
编译

./node_modules/.bin/node-sass   z.scss
./node_modules/.bin/node-sass   z.scss>z.css  //这个输出的css是嵌套结构.
./node_modules/.bin/node-sass   --output-style expanded z.scss>z.css  //这个输出的css文件被打平. 

sass变量 计算 与less区别,less的变量符号是@,sass的变量符号是$

$fontSize :12px;
$bgColor : red;

background:lighten($bgColor,40%); //变浅40%;
font-size : $fontSize + 20px;  //字体大小增加20px;

为什么它们2个的变量不好不一样?
因为less的理念是尽量的接近css的语法.
sass理念是,既然我和css是不兼容的,尽量的避免产生混淆.

scss的Mixin
scss的Mixin和less的区别就是scss前面必须加 @mixin 并且不用加点

@mixin block($fontSize) {
    font-size : $fontSize;
    border : 1px solid #ccc;
    border-radius : 4px;
}
//调用
.wrapper {
    background : red;
    .content {
    font-size : 560px;
        height : 50px;
        @include block($fontSize); //引用Mixin
    }
    .main {
        font-size : 50px;
        @include block($fontSize);  //引用Mixin
    }
}

scss的extend可以参考less的extend

scss的loop方式模拟循环

image.png

CSS预处理器框架
在SASS中有--- Compass
在Less中有--- Lesshat(国外)/EST(国内)

它们提供现成的mixin
类似于JS类库 封装常用的功能

可以自行去学习一下CSS预处理框架.EST地址
http://ecomfe.github.io/est/#top

面试题:
因为CSS预处理器并不是CSS基本要求的,因此在面试的时候并不会以重点来考察.

1. 常见的CSS预处理器: Less(node.js写的) / Sass(ruby写的,有Node版本)
2. 预处理器的作用:帮助更好的组织代码,提高代码效率,提升可维护性.
3. 预处理器的能力:
   嵌套 - 反应层级
   变量 计算 - 减少重复代码
   Extend/Mixin - 代码块
   循环 - 适用于复杂有规律的代码
   import - CSS文件模块化
4. 预处理器的优缺点
   优点:提高代码复用率和可维护性
   缺点:需要引入编译过程,有学习成本.