CSS 预处理的区别的深度比较 - Stylus/Sass/Le

2020-11-04  本文已影响0人  一只鱼_d589

转载至https://www.jianshu.com/p/b2174b800e40

<meta charset="utf-8">

CSS Preprocess Different

在前端界，有三大 CSS 预处理器，分别是 SASS(SCSS), Less, Stylus。

或许有的人在问，那么 PostCSS 算什么呢？其实他只能算是 CSS 解析器。不能算作预处理器。

由于这三大预处理出现的时间不同，而他们之间也会有一些不同的地方，所以在这里我们整理一下他们那些地方不同，方便学习记忆以及选择。当然，我们这里比较的时候会深入比较，而不是泛泛而谈。

但是前提最好是你有对其中一种预处理的使用经验，可以通过我这篇文章可以快速了解其他的预处理的语法格式等等内容。如果你没有相关的语言语法，那么请你学习其中的一个之后再来阅读此文章。

如果你问我现在用什么，当然是 stylus 了，:>

语法 Syntax

Sass(Scss)

Sass 有两种语法格式。首先是 SCSS (Sassy CSS)， 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 "Sass"，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式。

Less

Less 其实在某种程度上很像 Scss，它和 CSS 也是完全兼容的。要有分号，要有冒号，还有大括号。

Stylus

他的语法和 Sass 有一点点类似，但是最大的特点便是没有分号，没有冒号，没有大括号，通过缩进和换行。一切的定义方式都是按照编程的风格定义的，像编程一样的函数调用，像编程一样的变量定义，像编程一样的书写方式。
除此之外，他还有一个最大的优点便是他随意的格式，官方推荐的是无分号，无冒号，无大括号，但是他可以有分号，可以有冒号，也可以有大括号，也就是说你愿意的话，你完全可以当做普通的 CSS 文件来写，甚至是 Less,Sass 等其他预处理器的风格。所以这也就是我为什么用这个的原因。

注释

Playground

具体内容请查看官方文档。

变量 Variables

开头标识

赋值方式

Sass

Sass 的变量以 $ 开头，赋值方法与 CSS 属性的写法一致：

$var-name: var-value;

直接使用就可以获取变量的值，非常简单。同样支持块级作用域，也分为全局变量（所有 Rule 外面定义的变量）和局部变量（在规则内部定义的变量）。同时支持将局部变量声明为全局变量，通过 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}


// output
#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

Sass 支持 6 种主要的数据类型

Less

Less 的变量是以 @ 开头，语法格式类似于 CSS 的 Property 的书写格式，与 Sass/Scss 有一些类似：

@var-name: var-value;

使用的时候也是带着 @，他支持变量插值，类似于 PHP 那样的。比如说

@red: 1;
@var1: red;
@var2: @{@var1}; // 1
// or
@var2: @@var1;

同时变量的执行都是懒加载，也就是说变量的值得计算都是在你用到的时候计算的，例如

@a: 1;
@b: @a;

.a {
  content: @b; // 1
}

.b {
  @a: 2;
  content: @b; // 2
}

当然他也有作用域，有根级的作用域，也有块级的作用域。所以我们只需要在当前作用于修改变量，并不会影响上级作用域的变量的内容。

但是文档中并没有提及类型的问题，所以不得而知。

Stylus

变量通过 = 进行定义，就像是普通的编程的变量一般，不需要什么特殊的前缀：

var-name = var-value

不过我还是推荐使用 $ 作为开头，因为当 stylus 写大的时候，你会发现经常你会把变量和属性值弄混，所以建议用 $ 开头，这样我们可以很清晰的看出来，那个是变量，那个是属性值。

运算 Operations

算数运算

所有的算数运算都支持单位的运算，也支持自动转化，比如说 20mm + 4in = 121.6mm。如果发现单位无法转换，那么一般是忽略单位只有单独运算，运算结束之后再加上左操作数的单位，例如 5s - 3px = 2s。
有一点例外的就是，对于乘法除法来说，单位相乘是没有什么意义的，所以在乘除当中和单位无法转换的情况相同。
如果操作的类型是颜色类型的话，那么运算都是相对于 R/G/B 单独计算的，也就是说 #0000ff + #000001 = #0000ff 而不是 #000100，不存在进位的情况。

数组运算

函数 Function

函数定义

嵌套 Nest rules

所有的预处理中都有嵌套的功能，而且语法都是类似的，将 Rule 写在某个 Rule 里面，便可以实现嵌套的功能。
不需要每次都输入父选择器了，方便快捷高效。
同理，也都有 & 父选择引用，可以方便的在 Rule 内部定义父级的 Rule，一般用来定义 hover 或者相连的选择器 &.other-class。

Less 中还支持嵌套 Directive，比如 media, keyframe 等等。这些 Directives 及时再非常深的地方，也会一起冒泡到顶级。

混合 Mixins

定义

使用

参数、关键词参数、 Rest 参数(...)

这三者都支持，定义方式也是大同小异，没什么可以说的。也都支持类似于 JS 中 arguments 的变量。

不过 Less 有一点比较特殊，因为他没有函数，也就是说他很难做到根据不同的输入有不同的输出（属性上的不同），所以它支持模式匹配，也就是说根据某些参数来运行不同的 Mixin，其实就是 Mixin 重载。

向 Mixin 传入自定义 Rules

Mixin 定义嵌套

目前在文档中都没有相关内容的介绍，发现部分是可以的。

总体来说，Sass 和 Less 在混入方面我还是喜欢 Less，简单直接。

控制语句 Controls

if

Loop

导入 Imports

无一例外，三大框架都使用了 @import 作为导入的关键字。这里就会有一个问题，因为 @import 在 CSS 中也有，于是就存在到底是将文件导入进来还是仅仅作为一个 CSS 的关键字输出呢？
总体来说有如下的规则：

特殊情况

同时这三大框架都支持 嵌套导入。部分支持 引用导入 和 内联导入，同时 Less 的 @import 默认是只导入一次的。

扩展 Extends

简单说一些 Extend 和 Mixin 的区别的吧，Mixin 就像是 copy/paste，每次执行 Mixin ，都会在不同的 Rule 下面有相同的内容，他们不会进行复用。但是 Extend 会进行复用，将相同的内容提取出来，复用成一个 Rule。

不过有一点很特殊的是， Less 竟然没有 Extned。而且 Stylus 的 Extend 还是由 Sass 扩展过来的，所以他们两个基本相同，都使用 @extend 关键字。
而且 Sass 的 Extend 没有什么太多的概念，我就一起来讲了。

首先两者有一个最大的区别就是 Stylus 支持 nested selector，而 Sass 是不支持的。

其次两者都有 placeholder ，也就是仅仅用于 extend 的类，但是两者的定义方式不一样。

也支持 optional 功能，其实就是如果找不到 Extend 类但是不报错的样子。通过在类后面添加 !optional。
DEMO: @extend .a !optional, .b !optional

其他指令 Other Directives

@css

其他功能 Others

Error Handle

Introspection

生态 Community

Stylus

总结

不过总的来说，这种预处理器估计是因为太简单了吧，所以文档写的都很直接但是不深入，也没有类似于编程语言的 Spec，只是给你简单介绍了一下例子以及如何使用。
很蛋疼。。。

作者：XGHeaven
链接：https://www.jianshu.com/p/b2174b800e40
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

上一篇 下一篇

猜你喜欢

热点阅读