最近有项目，顺手学一下scss

设置变量

1.scss可以设置变量。下面再引用
比如 :
$fs:20px .a{width:$fs}
那么a的宽度就会跟着fs改变而改变。
默认变量 -- 用!default为变量指定默认值。
此之前变量已经赋值，那就不使用默认值，如果没有赋值，则使用默认值。
比如$fs:20px --default

样式继承

大部分和css一致
#main{p{font-size:10px}>} = css #main p{font-size:10px}
//双层嵌套
#main{p{font-size:10px}>a{span{font-size:20px}}}
父类选择符 ：&

  .main {
    font-size: 20px;
    p {
      font-size: 40px
    }
    > a {
      color: red;
      &:hover {
        font-size: 300px;
      }
      //>a = css .main>a  如果没有 > 则把 p下面的a也换了
    }
  }

占位符：% -减少无用css样式
如果调用，生效，如果不调用则不生效。

%mr5{
   margin-right:5px;
}
body{
    @extend %mr5;       
}

声明宏

宏 其实有点类似于函数 都是为了达到复用的目的

不带参数的混合宏

  //声明宏
  @mixin border-radius {
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  //使用宏
  .btn {
    @include border-radius
  }

宏可带参数

   $width:50px;
   $display:inline-block;
   @mixin li-unstyle($width,$display){
        list-style:none;
        width:$width;
        display:$display;
  } 
   li{  
    @include li-unstyle;
  }

也可以自己设置参数

     $width:50px;
     $display:inline-block;
     @mixin li-unstyle($width,$display){
          list-style:none;
          width:$width;
          display:$display;
    } 
//会使用自己设置的参数
    ul{
      @include li-unstyle(500px,block);
    }

当混合宏传的参数过多之时，可以使用 ... 来替代

$shadow:0 0 3px rgba(#000,.5);
@mixin sw($shadow...){
  text-shadow:$shadow;
}
p{
  @include sw($shadow);
}

#{}插值

//类似于模板渲染

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
// 应用于 class 和属性
.border-#{$borderDirection} {
    border-#{$borderDirection}: 1px solid #ccc;
}
// 应用于复杂的属性值
body {
    font:#{$baseFontSize}/#{$baseLineHeight};
}
//编译后css
.border-top {
    border-top:1px solid #ccc;
}
body {
    font: 12px/1.5;
}

@each指令

語法:@each $var in <list or map>
$var :代表了变量的名称 @each规则将$var 项目列表中使用$var值输出样式

@each $color in red, green {
  .p_#{$color} {
    background-color: #{$color};
  }
}
//输出
.p_red {
  background-color: red; }

.p_green {
  background-color: green; }

//列表
@each $color, $border in (aqua, dotted),
                        (red, solid){
  .#{$color} {
    background-color : $color;
    border: $border;
  }
}
//渲染
.aqua {
  background-color: aqua;
  border: dotted; }

.red {
  background-color: red;
  border: solid; }

//多重分配与映射
@each $header, $color in (h1: red, h2: green, h3: blue) {
  #{$header} {
    color: $color;
  }
}