scss初体验

1.变量

  $border_box: #ccc;
  .box{
    height: 50px;
    width: 100px;
    border: 1px solid $border_box;
  }

2.嵌套规则

ul{
margin:0;
   li{
    margin:0
    a{
       display: inline-block
    }
  }
}

还可以嵌套属性

.box {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

3.标识符&

如下&等价于 .box .innerbox

hover简写

 .box .innerbox{
    .......
    &:hover{
     ......
    }
  }

4.继承使用

如下，box会继承所有的common样式

  .common{
    padding: 5px;
   }
 
 .box{
   @extend .common
 }

5.默认变量 表示方法 !default
如果不修改$color变量，字体就是红色，修改之后就是蓝色

  $color: red !default;
.info{
  $color: blue;
  color: $color
}

6.全局变量和局部变量
局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

  $color: red; //全局变量
  .info{
   $height: 80px; //局部变量
  }

  $color: red; //全局变量
  .info{
   $height: 80px  !global; //全局变量
  }

  .meta{
    background-color: $color;  //red
    height: $height;  // 80px
  }

7.即字符串插值，需要使用 #{} 来进行包裹

 $left: left;
  .meta{
    border-#{$left}: 10px solid pink;
    height: 80px;
  }

8.变量计算

 $height:80px;
  $left: left;
  .meta{
    border-#{$left}: 10px solid pink;
    height: $height+80px; // + - * /计算都可以
    background: #ccc;
  }

9.占位符 %
使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。

 %xiaozi{
   color: red
  }
  .meta{
    @extend %xiaozi;
  }

10.重复代码使用混合宏，用@include 引入，混合宏可以有参数

  @mixin commonStyle{
    width: 1000px;
    height: 200px;
    background: yellowgreen;
  }
  .meta{
    @include commonStyle
  }

带参数的混合宏

 @mixin commonStyle($width,$height,$color){
    width: $width;
    height: $height;
    background: $color;
  }
  .meta{
    @include commonStyle(600px,500px,red)
  }

11.条件语句 @if @else

$height: 100px;
$minheight:50px;
  .meta{
    @if $height+$minheight > 100px {
      height: 500px;
    } @else {
      height: 200px;
    }
    background: #ccc;
  }

12.@import 引入外部样式

@import '../../assets/scss/test';

13.for循环

@for $var from <start> through <end> 包括start和end
@for $var from <start> to <end> 包括start不包括end

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

解析出来

.item-1{
 width: 2em*1
}
.item-2{
width: 2em*2
}
.item-3{
width: 2em*3
}

14.while循环

只要@while后面的条件为true就会执行，直到表达式值为false时停止循环；

//while 循环
$m:8;
@while $m > 0 {
   .items-#{$m} {
      width:2em*$m;
   }
   $m:$m - 2 ;
}

15.each语法

@each $item in class01,class02 { //$item就是遍历了in关键词后面的类名列
   .#{$item} {
      background-color:purple;
   }
}
//会编译成 .class01 , .class02 {background-color:purple;}

16.@function

@function double($sn){ //SCSS允许自定义函数
   @return $sn*2;
}
.myText {
   border:1px solid red;
   width:double(200px); //使用在SCSS中自定义的函数
}

17.scss内置颜色函数

.myText {
   color:black;
   &:hover{
      //以下的lighten()、darken()等是SCSS内置的颜色函数
      color:lighten(#cc3, 10%); // #d6d65c颜色变浅
      color:darken(#cc3, 10%); // #a3a329颜色加深
      color:grayscale(#cc3); // #d6d65c
      color:complement(#cc3); // #a3a329
   }
}