sass的一些常见用法

sass可以定义变量

$width:100px;  //以$开头

可以用#{} 进行scss的插入，类似于es6的${}

sass导入功能

@import 'aa.scss' //导入一个
@import 'aa.scss' ,'bb.scss' //导入两个或多个

在同一个sass中使用复用样式extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

控制指令 （if 循环）

• if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

• for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

• each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

• while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

混合指令

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

类似函数一样，但是用的是样式
@mixin定义
@include 引用

函数指令

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }