css预处理器

常用CSS预处理器：Less、Sass 和 Stylus

1、基本语法

//sass&less
.container {
    font-size: .24rem;
}

//stylus
.container
    font-size: .24rem;

less和scss没有区别，stylus则是没有大括号{}和分号;

2、嵌套语法

父选择器的标识符&

//sass&less
.box {
  &.item {
    color: #000;
  }
}
//stylus
.box 
  &.item
    color: #000;

3、变量

sass使用$符号来标识变量

$blue : #1875e7;　
.div{
 color : $blue;
}

less使用@符号来标识变量

@pink: #FFB6C1;
.div {
  color: @pink;
}

Stylus：

pink = #FFB6C1;
.div 
  color: pink;

4、函数

sass：

@mixin yh_bg($bg) {
  background: url($bg_cdn + $bg) no-repeat;
  background-size: 100% 100%;
}
.container{
  @include yh_bg("bg.png")
}

Less：

.border-radius(@radius: 5px) {
  border-radius: @radius;
}
.box{
    .border-radius(10px)
}

Stylus：

computedHeight(n)
  n * 2

.box
  width: 200px
  height: computedHeight(@width)

5、引用import

@import  filename;