css预处理器--Sass,Less,Stylus-CSDN博客

前言:

Css本身不是一种编程语言,可以用它开发网页样式,但不能编程,只是一行行单纯的属性描述,写起来费事并且难组织和维护
很自然的,有人就开始在想,能不能给CSS像其他程序语言一样,加入一些编程元素,让CSS能像其他程序语言一样可以做一些预定的处理,这样一来,就有了“CSS预处器（CSS Preprocessor）”
Scss是sass3引入的新语法,其语法完全兼容css3,并且继承sass的强大功能
Scss和sass是同一种东西,可以理解为它的一个升级,版本,有一些新功能,平时都称为sass

不同点:
- 文件扩展名不同,sass扩展名是.sass, scss扩展名是.scss
- 语法书写不同,sass以严格缩进式规则写的 ,不带大括号和分号,Scss的书写和css书写语法类似

从语法、变量、嵌套、混入(Mixin)、继承、导入、函数和操作符等方面分别对这三个框架进行比较介绍

1, 语法

默认 Scss 使用 .scss 扩展名,Less 使用 .less 扩展名

/* style.scss or style.less */
  h1 {
    color: #ffc 
  }

复制代码

Sass以严格缩进式规则书写(不包含花括号和分号)

/* style.sass */
  h1
    color: #ffc
复制代码

Stylus 支持的语法更多样性,默认使用 .styl 扩展名

/* style.styl */
  h1 {
    color: #ffc;
  }
/* 省略花括号 */
  h2
    color: #ffc;
/* 省略冒号和分号 */
  h3
    color #ffc
复制代码

2, 变量

Sass/Scss的变量必须是 $ 开始,变量名和值使用冒号隔开

$redColor: red;
$borderWidth: 1px;
 
a {
  color: $redColor;
  border: $borderWidth $redColor solid;
}
复制代码

Less 的变量名使用 @ 符号开始

@redColor: red;
@borderWidth: 1px;
 
a {
  color: @redColor;
  border: @borderWidth @redColor solid;
}
复制代码

Stylus样式中声明变量无任何限定

可以使用“$”符号开始,变量值之间可以用冒号、空格隔开,结尾的分号(;)可有可无,但变量名和变量值之间的等号(=)是需要的

如果我们使用“@”符号开头来声明（0.22.4）变量,Stylus会进行编译,但其对应的值并不会赋值给变量,也就是说,在Stylus中不要使用“@”符号开头声明变量

redColor = red;
borderWidth = 1px;
a {
  color: redColor;
  border borderWidth @redColor solid
}
复制代码

上面的三种不同的 CSS 预处理器的写法,最终都将产生相同的结

a {
  color: red;
  border: 1px red solid;
}
复制代码

3, 嵌套

在css中我们写有层级关系的样式

header {
  margin: 10px;
}
header nav {
  height: 30px;
}
header nav a {
  color: #ccc;
}
header nav a:hover {
  color: red;
}
复制代码

用css预处理器,会方便很多,三个都支持嵌套的写法

header {
  margin: 10px;
  nav {
    height: 30px;
    a {
      color: #ccc;
      &:hover {
        color: red;
      }
    }
  }
}
复制代码

4, 混入(Mixins)

Scss混入

@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  @ include error(); /* Scss混入 */
}
.login-error {
  @ include error(5px); /* Scss混入 5px*/
}
复制代码

Less混入

@mixin error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  .error(); /* Less混入 */
}
.login-error {
  .error(); /* Less混入 5px*/
}
复制代码

Stylus 的混入

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  error();
}
.login-error {
  error(5px);
}
复制代码

最终它们都将编译成如下的 CSS 样式：

.generic-error {
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  border: 5px solid #f00;
  color: #f00;
}
复制代码