如果时间退到2年前,那么CSS预处理是非常火的.
CSS预处理器: 基于CSS的另一种语言.
通过工具译成CSS
添加了很多CSS不具备的特性
能提升CSS文件的组织
常见的预处理器: less(基于Node.js) sass(新版本是scss)
less优势是: 用js写的,编译比较快.并且有浏览器中可以直接使用的一个版本.不需要预先编译.
sass是用ruby写得,编译起来比较慢.
CSS预处理器到底提供哪些功能?
嵌套 - 反应层级和约束.
变量和计算 - 减少重复代码
Extend和Mixin - 代码片段 (如果一段代码需要不断用的时候就可以提取成一个代码片段,就像js的函数一样)
循环 - 适用于复杂有规律的样式(比如表格)
import -CSS文件模块化
less实例
安装完成以后,文件下会多出: node_modules目录 和 package-lock.json 文件.
解读嵌套代码
.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和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
}
}
less的Extend的使用, mixin与extend区别是,mixin直接复制过来,而extend是提取公共,特殊再写.
它的主要优点是用于简单的,并且声称的css文件要小.
但是我感觉css文件再大也是非常小的.可以忽略,我更倾向于mixin,因为更直观.
less的loop
less本身是没有循环的,我们可以用递归方法模仿循环.
when 后面是一个出口,当 (@n > 0) 的时候不再执行
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方式模拟循环
CSS预处理器框架
在SASS中有--- Compass
在Less中有--- Lesshat(国外)/EST(国内)
它们提供现成的mixin
类似于JS类库 封装常用的功能
可以自行去学习一下CSS预处理框架.EST地址
http://ecomfe.github.io/est/#top
面试题:
因为CSS预处理器并不是CSS基本要求的,因此在面试的时候并不会以重点来考察.
- 常见的CSS预处理器: Less(node.js写的) / Sass(ruby写的,有Node版本)
- 预处理器的作用:帮助更好的组织代码,提高代码效率,提升可维护性.
- 预处理器的能力:
嵌套 - 反应层级
变量 计算 - 减少重复代码
Extend/Mixin - 代码块
循环 - 适用于复杂有规律的代码
import - CSS文件模块化 - 预处理器的优缺点
优点:提高代码复用率和可维护性
缺点:需要引入编译过程,有学习成本.
