CSS预处理器入门介绍：Sass、Less 和 Stylus

css 预处理器：Sass、Less 和 Stylus

【Sass】

扩展名：「 *.sass 」和「 *.scss 」

/*style.sass*/
h1
  color: #666
  background-color: #666    

• 变量: 必须是『$』开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号：分隔开。

.wrapper {
    overflow-y: hidden;
    line-height: 1.5;
    max-height: 4.5em;  /* = 1.5 x 3 */
}
-----------------------------------
.wrapper
    $max-lines = 3
    $line-height = 1.5

    overflow-y: hidden
    line-height: $line-height
    max-height: unit($line-height * $max-lines, 'em')

• 作用域：不存在全局变量的概念
• 嵌套：采用『&』替代父级选择器；「奇葩的属性嵌套」

/*style.sass*/
.footer {
  font: {
    family:  微软雅黑;
    size: 5rem;
    weight: bolder;
  }
}

• 继承:『@extend』

.shit {
  margin: 10px 5px;
  padding: 2px;
}
p {
  @extend .shit;/*继承.block*/
  border: 1px solid #aaa;
}
ul,li {
  @extend .shit; /*继承.block*/
  color: #aaa;
}

【Less】

扩展名：「 *.less 」

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { 
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

• 变量: 用『@』开头，其余等同 Sass。
• 作用域：逐级查找，向上冒泡
• 继承: 不是在选择器上继承，而是将Mixins中的样式嵌套到每个选择器里面

【Stylus】

扩展名：「 *.styl 」

• 同时支持缩进的和通俗的两种风格的 CSS 语法风格
• 变量: 没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。不要使用『@』声明变量，Stylus会进行编译，但不会赋值给变量
• 作用域：完全等同 Less。Stylus 和 Sass 则更倾向于指令式
• 继承:『@extend』,等同 Sass