sass

1、写法

.a{
  width: 1px;
  .b{
    width: 2px;
  }
}

编译为

.a {
  width: 1px;
}
.a .b{
  width: 2px;
}

2、&: 获取父选择器

a{
 color: red;
 &:hover {
   color: blue;
 }
}

编译为

a{
color: red;
}
a:hover{
  color: blue;
}

3、属性嵌套

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译为

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

4、#{ } 插值

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

编译为

p.foo {
  border-color: blue;
 }

5、@extend 复用样式

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

6、变量

//定义
$selfWidth: 200px;
//使用
.app{
  width: $selfWidth;
}

7、混合

普通样式混合

//定义
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}
//使用
.app-wrapper {
    @include clearfix;
    position: relative;
  }

带参数混合

//定义
@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
//使用
p { @include sexy-border(blue, 1in); }