Less 标签

12月
20
更新于
12月20
2018

发表于 | 热度 ℃
| 字数统计： 2,232 (字) | 阅读时长： 10 (分钟)

在前端界，有三大 CSS 预处理器，分别是 SASS(SCSS), Less, Stylus。 本文便总结下 Sass、Less CSS、Stylus这三个预处理器的区别和各自的基本语法。

我永远喜欢Stylus :>

什么是CSS预处理器

CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。

基本语法比较

Sass和Less

首先 Sass 和 Less 都使用的是标准的 CSS 语法，因此如果可以很方便的将已有的 CSS 代码转为预处理器代码，默认 Sass 使用 .scss 扩展名，而 Less 使用 .Less 扩展名。 

1
2
3
4
/* style.scss or style.Less */
h1 {
  color: #0982C1;
}
另一种也是最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 通常简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式。 
1
2
3
/* style.Sass */
h1
  color: #0982c1

而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名。可以随意地书写。 

1
2
3
4
5
6
7
8
9
10
/* style.styl */
h1 {
  color: #0982C1;
}
/* 省略花括号 */
h1
  color: #0982C1;
/* 省略花括号和分号 */
h1
  color #0982C1

阅读全文 »