一文了解CSS预处理器

卷帘依旧
3,497 阅读7分钟

前言

对于前端开发人员来说，CSS(Cascading Style Sheet)并不陌生，它主要是用来进行网页风格设计的，通过CSS可以对HTML网页元素中各标签的显示属性进行控制。

CSS最初是为了弥补HTML原生样式的不足，简单的Web网站需要少量的CSS代码，对CSS要求不高，但在如今web应用程序追求极致用户体验的潮流下，对CSS的要求也不断增强。

然而CSS并不是一种编程语言，可以用它来开发网页样式和外观，但没办法使用它进行编程。CSS不像其它编程语言能够定义变量、常量、条件语句等，只是单纯地进行属性描述，写起来很费事，而且代码难以组织和维护。

针对以上问题，CSS预处理器应运而生，专门用于实现让CSS能像一门编程语言一样可以做一些程序上的处理。

什么是CSS预处理器

CSS预处理器定义了一种新的语言，基本思想是，用一种专门的编程语言，为CSS增加一些编程特性，将CSS作为目标生成文件，开发者用这种语言进行CSS编码工作。换句话说，CSS预处理器用一种专门的编程语言进行网页页面样式设计，然后再编译成正常的CSS文件，供项目使用。

CSS与编译器现如今几乎成为开发CSS的标配，从以下几个方面提升了CSS开发的效率：

  • 增强编程能力
  • 增强可复用性
  • 增强可维护性
  • 更便于解决浏览器兼容性

不同的预编译器特性虽然有差异，但核心功能围绕的目标是相同的，比如：

  • 嵌套
  • 变量
  • mixin/继承
  • 运算
  • 模块化

嵌套是所有预编译器都支持的语法特性；mixin/继承是为了解决hack和代码复用；变量和运算增强源码的可编程能力；模块化的支持不仅更利于代码复用，也提高了源码的可维护性

CSS预处理器有哪些

CSS预处理器技术已经相当成熟，现在也涌现了多种不同的CSS预处理器语言，包括Sass(Scss), Less, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS 等。

Sass: 诞生于2007年，最早也是最成熟的一款CSS预处理器语言。可以使用常量、变量、函数、混入、函数等功能，最后会编译成合法的CSS让浏览器使用。

现在的Sass已经有了两套语法规则：

  • 使用缩紧作为分隔符来区分代码块
  • 和CSS一样采用大括号({})作为分隔符

后一种语法规则称为SCSS, 在Sass3之后的版本都支持这种语法规则。

Less: 2009年开源，受Sass影响较大，但使用CSS语法。

Stylus: 2010年诞生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区内有一定人气，广泛意义上支持率不如Sass和Less。

Stylus同时支持缩进和CSS常规样式书写规则

CSS预处理器语法规则

每种编程语言都有自己的语法规则，CSS预处理器语言也同样如此。使用CSS预处理器语言之前要对其语法有一定的理解。而Sass, Scss, Stylus这三种CSS预处理器语言的语法都和CSS语法差不多。

  1. Sass语法 Sass3.0版本开始使用的是标准的CSS语法，基本与SCSS一样。默认Sass使用.scss扩展名。
// sass新版语法规则
.container {
    background: #f6f6f6;
    min-height: 100%;
}

同时，Sass也支持老的语法，这种跟常规的CSS略有不同，更为严格，任何的缩进和字符的错误都会造成样式的编译错误，Sass可以省略{}和;，而且文件使用.sass扩展名，语法如下：

.container
    background: #f6f6f6
    min-height: 100%
  1. Less语法

Less是CSS的一种扩展形式，在CSS语法基础上添加了很多额外功能。从语法规则来讲，Less和Sass一样，都是用CSS的标准语法，只是Less的源文件扩展名是.less，举个栗子🌰:

.block {
    height: 30px;
    padding-bottom: 10px;
    color: #666;
    font-weight: normal;
}
  1. Stylus Stylus语法多变一些，文件扩展名是.styl，Stylus也接受标准的CSS语法，但是跟Sass老的语法规则一样，使用缩进控制，同时Stylus也接受不带{}和;的语法，如下所示：
// 类似于CSS标准语法
.head {
    color: #ebebeb;
    background-color: #666;
}

// 省略大括号
.head 
    color: #ebebeb;
    background-color: #666;

// 省略大括号和分号
.head 
    color: #ebebeb
    background-color: #666

以上语法规则可以在同一个样式文件中同时使用，编译器也不会报错。

PostCSS

项目中除了会使用以上提到的预处理器之外，还会用到PostCSS。PostCSS并不是CSS预处理器，与Sass, Scss等预编译器也不冲突。很多人将其称为CSS后处理器，一定程度上说明行内对PostCSS的普遍使用方案：

image.png

PostCSS提供了一种方式可以用JavaScript代码来处理CSS，负责把CSS代码解析成抽象语法树(Abstract Syntax Tree, AST)，再由插件对AST进行处理，插件所能进行到的操作多种多样，比如：

  • 可以支持变量和混入
  • 增加浏览器相关的声明前缀
  • 把使用将来的CSS规范的样式规则转译成当前的CSS规范支持的格式

PostCSS的强大之处在于不断发展的插件体系，目前PostCSS已经有200多个功能各异的插件，开发人员也可根据需要开发自己的PostCSS插件

基于以上理解，PostCSS的主要功能有两个：

  1. 将CSS解析为JavaScript可以操作的AST
  2. 调用插件处理AST并得到结果

PostCSS能够执行的任务非常多，同时涵盖传统意义上的预处理和后处理，因此不能将其简单地归类成CSS预处理或后处理工具。

PostCSS一般与已有的构建工具进行继承，比如webpack，完成集成之后，选择满足功能需求的插件并进行配置即可。常用的插件有:

  • AutoPrefixer

作用：为CSS中的属性添加浏览器特定的前缀，可以根据需要制定支持的浏览器类型和版本，自动添加所需的带前缀的属性声明。另外，Autoprefixer还可以移除CSS代码中冗余的属性名称前缀，遗留CSS代码中可能包含开发人员手动添加的旧版本浏览器所支持的带前缀的属性名称，Autoprefixer默认情况下会移除这些冗余前缀。

Autoprefixer使用Can I Use上提供的浏览器数据，保持最新规则，可以点击此处查看Autoprefixer的工作原理。

  • CSSnext

CSSnext允许开发人员使用未来的CSS语法，W3C有许多新的CSS规则，这些规则目前没有被浏览器实现，但可以使开发人员更高效地编写更复杂的CSS，CSSnext就是做这个事情的。

CSSnext github

  • PreCSS

PreCSS可以允许开发人员使用类似Sass的标记语言

$blue: #056ef0;
$column: 200px;

.menu {
  width: calc(4 * $column);
}

.menu_link {
  background: $blue;
  width: $column;
}

/* becomes */

.menu {
  width: calc(4 * 200px);
}

.menu_link {
  background: #056ef0;
  width: 200px;
}

总结

对Web项目的高要求促使CSS预处理和后处理器的涌现，传统CSS的复杂问题一部分来源于CSS本身的不灵活，一部分来源于浏览器的不同实现带来的兼容性问题。CSS预处理器的出现为CSS的编写、管理和维护提供了新思路，Sass, Scss, Stylus等预处理器实现了可以用编程的方式编写css样式，PostCSS则通过强大的插件体系对CSS进行不同的转换和处理，从而把繁琐的工作交由程序处理。本文对CSS预处理器和PostCSS进行介绍，希望可以帮助大家对CSS有一个更为全面的认知。

参考链接

详说css与预处理器(以及less、sass、stylus的区别)

CSS预处理器-MDN

简书-使用postCSS进行CSS处理

CSS预编译与PostCSS以及Webpack构建CSS综合方案

6个很棒的CSS插件

avatar
文章
阅读
粉丝