（一）SCSS基础用法

1.当变量使用

/* 当变量使用*/
$blue: #1875e7;
div {
  color: $blue;
}
$side: left;
.rounded {
  padding-#{$side}: 5px;
}

2.计算功能、嵌套

/*计算功能*/
$var: 4;
body {
  margin: (14px/2);
  top: 50px+100px;
  right: $var * 10%;
}
/*嵌套*/
div {
  hi {
    color: $blue;
  }
}

3.属性嵌套

/*属性嵌套、继承*/
p {
  border: {
    color: $blue;
    width: $var;
  }
}

/*继承*/
.class1 {
  border: 1px solid gainsboro;
}

.class2 {
  @extend .class1;
  font-size: 18px;
}

/* mixin 可应用于写兼容*/
@mixin rounded-corners($argus) {
  -moz-border-radius: 1px * $argus !important;
  -webkit-border-radius: 1px * $argus !important;
  border-radius: 1px * $argus !important;
}

.no-rounded {
  @include rounded-corners(0)
}

/* if 条件语句*/
p {
  @if 1+1==2 {
    background-color: #00BCD4
  } @else {
    background-color: rebeccapurple;
  }
}

/* 遍历的用法*/
@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid hotpink;
  }
}

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

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/img/img#{$member}.jpg");
  }
}

$m-white: white;
$m-black: black;
$m-green: green;
$m-red: red;

@each $c-name, $color in (c-white, $m-white),
        (c-black, $m-black),
        (c-red, $m-red),
        (c-green, $m-green), {
  .#{$c-name} {
    color: $color;
  }
}
//使用：class=".c-black"

/* 自定义函数*/
@function double($n){
  @return $n*2
}
#sidebar{
  width: double(5px);
}