什么是CSS预处理器？

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，并且解决了传统CSS编写时遇到的难以解决的问题，如：

  • 语法不够强大，无法嵌套书写导致复写很多内容
  • 没有变量，逻辑上相关的属性需要重复书写，导致难以维护

现阶段主流CSS预处理器 Less、Sass、Stylus 都提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性，但其之中也略有不同，下面将通过几个方面来浅谈各预处理器之前的差异及优缺点。

历史

  • SASS，2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
  • LESS，2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
  • Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。

基本语法方面

Less 的基本语法属于「CSS 风格」，而 Sass、Stylus 相比之下激进一些，利用缩进、空格和换行来减少需要输入的字符。不过区别在于 Sass、Stylus 同时也兼容「CSS 风格」代码。多一种选择在更灵活的同时，在团队开发中也免不了增加更多约定来保持风格统一。而对个人而言，语法风格按自己口味选择即可。

Less & SCSS：

1
2
3
.box {
  display: block;
}

Sass：

1
2
.box
  display: block

Stylus：

1
2
.box
  display: block

嵌套语法

三者的嵌套语法都是一致的，甚至连引用父级选择器的标记 & 也相同。区别只是 Sass 和 Stylus 可以用没有大括号的方式书写。

& 引用上层选择器

&对伪类的使用 — hover或 focus
&对连接的使用— &_nav

以 Less 为例：

1
2
3
4
5
.a {
  &.b {
    color: red;
  }
}

生成的 CSS 为：

1
2
3
.a.b {
  color: red;
}

变量

变量无疑为 CSS 增加了一种有效的复用方式，减少了原来在 CSS 中无法避免的重复「硬编码」。

Less：

1
2
3
4
5
@red: #c00;

strong {
  color: @red;
}

Sass：

1
2
3
4
5
$red: #c00;

strong {
  color: $red;
}

Stylus：

1
2
3
4
red = #c00

strong
  color: red

变量作用域

三种预处理器的变量作用域都是按嵌套的规则集划分，并且在当前规则集下找不到对应变量时会逐级向上查找，注意这个和原生 CSS 的逻辑是完全不同的。

如果我们在代码中重写某个已经定义的变量的值，Less 的处理逻辑和其他两者有非常关键的区别。在 Less 中，这个行为被称为「懒加载（Lazy Loading）」。所有 Less 变量的计算，都是以这个变量最后一次被定义的值为准。（所以还是老老实实的用闭包的思想限定其作用域吧 -_- |||）

@arguments

@arguments包含了所有传递进来的参数。
如果你不想单独处理每一个参数的话就可以像这样写
原来的办法传参

1
2
3
.border_arg(@w:30px,@c:red,@xx:solid){
  border: @w @c @xx;
}

现在的利用arguments

1
2
3
4
5
6
7
8
9
.border_arg(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.test_arguments{
  .border_arg();
}
.test_arguments_2{
  .border_arg(40px);
}

避免编译

有的时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法
要输出这样的值我们可以在字符串前加上一个 ~

例如：

1
2
3
4
5
6
7
width:~’calc(100% - 30px)’;
.test_03{
  width: calc(300px - 20px);
}
.test_04{
  width: ~'calc(300px - 20px)'; //想不让less算，让浏览器算  用在calc 或者滤镜
}

引入外部的文件(一些库或公共的)

.less文件引入
@import "base"; 默认后缀名是.less所以不用写
.css文件引入`@import(less) “a.css”;` //注意(less)有空格，貌似我没用出来有待研究

三种预处理器，个人更加倾向于 Stylus，其相较 其他两者 来说，变量更易保持 ‘清洁’，且更加灵活的支持 「CSS 风格」，可选择性的使用何种方式编写样式，更有效的提高代码的可读性、可维护性，也有利于团队合作。

最后更新： 2018年09月09日 17:13

赏
× 感谢支持
打赏二维码