css预处理器--Sass,Less,Stylus

前言:

• 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;
}
复制代码