是什么

css预编语言：是css的超集， 增加了变量、混合、函数等功能，让css维护更方便

常用

• sass
• less
• stylus

/* less scss */
.box {
  display: block;
}
/* sass */
.box
  display: block
/* stylus */
.box
  display: block

区别

• 变量
• 作用域
• 代码混合
• 嵌套
• 代码模块化

变量

• less @开头
• sass $开头

/* less */
@red: #c00;

strong {
  color: @red;
}
/* sass */
$red: #c00;

strong {
  color: $red;
}
/* stylus */
red = #c00

strong
  color: red

作用域

• sass 不存在作用域
• less/stylue 会一级一级往上查找

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 
/* 编译后 */
.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色（无全局变量概念）*/
} 

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 
/* 编译后 */
.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
} 

代码混合

• less

.alert {
  font-weight: 700;
}

.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}

.heads-up {
  .alert;
  .highlight(red);
}

• sass

/* sass */
@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

• stylue

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins，并将参数$borderWidth的值指定为5px */
} 

嵌套

通用

.a {
  &.b {
    color: red;
  }
}

代码模块化

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';