CSS预处理器（less与sass）

CSS预处理器

• CSS预处理器是基于CSS的另一种语言
• 通过工具编译成CSS
• 添加了很多CSS不具备的特性
• 能提升CSS文件的组织方式
• 作用：
  • 嵌套：反映层级，约束选择器范围
  • 变量和计算：减少重复代码，方便维护
  • Extend和Mixin：复用代码片段（公共样式的class/清除浮动，将以前在html中的工作放到预处理器中完成）
  • 循环：适用于复杂有规律的样式（比如表格、动画）
  • import：CSS文件模块化（可以按照模块的方式组织css文件，不再受限于http加载的问题）

less与sass 对比

安装

• less： less是基于node的
  • 非全局安装（安装到项目下）：npm i less则调用时使用./node_module/.bin/lessc 其他参数
    • 其他参数：xxx.less>yyy.css即将less文件编译后放入css文件
  • 全局安装：npm i less -g则调用时使用lessc 其他参数
• sass：
  • 非全局安装（安装到项目下）：npm i node-sass则调用时使用./node_module/.bin/node-sass 其他参数
    • 其他参数：xxx.scss>yyy.css即将sass文件（后缀为scss）编译后放入css文件
  • 全局安装：npm i node-sass -g则调用时使用node-sass 其他参数

---

编译

• 写好的less/sass文件需要编译为css文件才能使用
• less：
  • vscode自动编译less
  • 开发环境下避免每次修改都要手动重新编译（但在页面上解析代码，效率太低，受机器，网络影响较大）：
    • 引入less代码<link rel="stylesheet/less" href="example.less" />
    • 然后引入解析代码：<script src="lesscss-1.4.0.min.js"></script>
  • 其他环境预编译less文件，提高页面加载速度：
    • 非全局安装（安装到项目下）：npm i less则调用时使用./node_module/.bin/lessc xxx.less>yyy.css
    • xxx.less>yyy.css即将less文件编译后放入css文件
  • 全局安装：npm i less -g则调用时使用lessc xxx.less>yyy.css
• sass：
  • vscode插件easy sass实现自动编译
  • 非全局安装（安装到项目下）：npm i node-sass则调用时使用./node_module/.bin/node-sass xxx.scss>yyy.css
    • xxx.scss>yyy.css即将sass文件（后缀为scss）编译后放入css文件
  • 全局安装：npm i node-sass -g则调用时使用node-sass xxx.scss>yyy.css

---

嵌套

• less嵌套：
• sass嵌套：sass语法和less类似。除了换行，其他和less编译的css没有区别

---

变量和计算

• less中变量语法：@变量名:变量值(带单位);
• sass中变量语法：$变量名:变量值(带单位);
• 语法不同的原因：
  • less是尽量接近CSS语法
  • sass是觉得自己和CSS既然不兼容，就要避免产生混淆，因为@在CSS中是有意义的
• less的例子：
• sass：语法不同，例子和结果除了空行上的区别，其他是没有区别的（background的函数也是相同的）

---

mixin 复用CSS代码

• mixin：实现一大段CSS代码的复用（以前只能在HTML中实现），相当于将一段CSS代码复制到调用mixin的地方。
• less：
  • 语法：
    • 定义mixin：选择器(可传参){CSS规则}和普通class的语法基本没区别
    • 调用mixin：选择器(可传参)和普通调用class一样
  • 注意：
    • 有括号的mixin 不会被编译到CSS文件中
    • mixin 可以不加括号，但是不加括号的mixin 会被编译到CSS文件中
  • 例子：
• sass：
  • 语法：
    • 定义mixin：@mixin 名称(可传参){CSS规则}
    • 调用mixin：@include 名称(可传参)
  • 注意：
    • 定义时不是选择器名称！是自定义的mixin名称
  • 例子：

---

extend 复用CSS代码

• 当我们频繁使用mixin时，就会导致编译产生的CSS文件中出现大量选择器中有一部分都是相同的代码。此时若是手写的CSS，我们会将同样的代码提出来写在公共class中，以此减小CSS文件体积。extend也可以做到这样的效果
• 作用：
  • 将mixin代码提取出来作为公共样式（如果直接使用mixin则是疯狂复制），比起直接使用mixin 产生的css代码量会更少，但是十分复杂的情况下直接使用mixin会更好。
  • 使用extend增加了代码的可维护性。
• less：
  • 语法：
    • 方法1：当前选择器:extend(mixin的选择器名){当前选择器匹配的CSS规则}
    • 方法2：当前选择器{CSS规则;&:extend(mixin的选择器名);其他CSS规则}
  • 例子：
• sass：
  • 语法：当前选择器{CSS规则;@extend mixin的选择器名;当前选择器匹配的CSS规则}
  • 例子：

---

loop 循环

• less：
  • less中没有循环，但是mixin可以自己调用自己，所以可以通过mixin递归实现循环的效果。
  • 例子：](https://i0.wp.com/ww1.sinaimg.cn/large/005H7IVsgy1ggswfwbuxwj30q70hmtj2.jpg)
• sass：
  • sass的循环实现更加简单，因为sass支持for循环。但也可以像less那样实现，只是要注意less是外部使用when，而sass是内部使用if
  • 例子：
    • sass支持的for来实现循环：生成的css文件和less例子生成的一样（只是多了空格）
    • 【不推荐】像less的实现方式：

---

import CSS模块化

• 在CSS中是可以使用import语句的，但是引入的css样式表并不会进行合并，加载的时候也不会复用，他只会在加载的时候去链接一个个的css样式表，即发出的http请求数并不会因为import而减少。而预处理器的import会在编译时将css样式表编译到一起，最后产生的是一整个css样式表，可减少发出的http请求数，提高加载性能。
• 预处理器中的变量可以跨文件使用， 有了import以后css文件就可以按照结构划分，而不用为了性能而将所有css写到一个文件中，这样有利于维护。
• 语法：@import "相对路径的less或者sass文件名"（可忽略文件名后缀）
• less：
  • 在实际项目中module1和module2不会那么一致，这里只是演示
  • 在实际项目中就可以把不同的区域样式独立在不同less文件中再最后import在一起编译出一个整体：
• sass：
  sass的import语法和less是一样的，唯独需要注意sass的变量定义方法和less不同：编译结果和使用less是一样的

---

预处理器stylus

• stylus有自定义函数功能（less和sass没有）
• vscode没有插件实现自动编译，但可参考这篇文章

---

预处理器框架

• 使用预处理器框架可按需使用别人的css代码
• 目前流行的预处理器框架：
  • SASS中有Compass(例子)
  • Less中有Lesshat/EST
• 作用：
  • 提供现成的mixin
  • 类似JS类库，封装常用功能

EST

• EST是由百度工程师写的
• 基本特性：
  • variables是规定好的全局变量，比如使用@support-html5来添加支持 HTML5 新元素相关的代码（默认不支持，需要额外添加的css代码）
  • normalize用来归一化不同浏览器下的页面样式，相当于之前讲过的CSS Reset重置样式，使用EST时只需.global-normalize();就相当于一大段CSS代码了
  • reset功能同上，也是相当于之前讲过的CSS Reset重置样式
  • compatibility提供基础的兼容性封装。
  • grid帮助生成自定义的栅格布局（网格布局），实际编译后是采用浮动来实现的。
    • .make-row()让元素变为行（栅格外部容器）
    • .make-column()让元素变为列（栅格单列容器）
    • 例子：
      • less文件：
      • html文件：引用编译后的less文件
      • 效果：
  • shapes绘制基本形状的功能（比如：三角形），例子在上面grid例子最底部

---

面试题

常见的CSS预处理器

• Less：原生使用Node.js编写
• Sass：原生使Ruby编写，官方有提供Node版本，但该版本是由c++编写，安装可能比较麻烦

预处理器的作用

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

预处理器的能力

• 嵌套：反映层级，约束选择器范围
• 变量和计算：减少重复代码，方便维护
• Extend和Mixin：复用代码片段（公共样式的class/清除浮动，将以前在html中的工作放到预处理器中完成）
• 循环：适用于复杂有规律的样式（比如表格、动画）
• import：CSS文件模块化（可以按照模块的方式组织css文件，不再受限于http加载的问题）

预处理器的优缺点

• 优点：提高代码复用率和可维护性
• 缺点：
  • （开发/发布都）需要引入编译过程
  • 有学习成本（虽然看起来像css语法，但是less和sass都有自己独立的语法）

推荐使用预处理器吗

不一定，随着前端工程化的发展，对于css方面的提升有了更多的手段，预处理器不再是唯一的手段，所以还可能有别的方式来处理css所面临的问题。