scss笔记

1、可以使用 & 表示父元素选择器

  a{
    padding: 0 10px;
    color: #fff;
    &:hover{
      color:#ddd;
    }

2、嵌套-属性嵌套
嵌套值有些属性拥有同一个开始单词，如border、font

.box2 {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

3、混合声明和调用
@mixin 声明
@include 调用

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
button {
    @include border-radius;
}

得到：

button {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

有参数mixin

@mixin border($w:10){
   -webkit-border-radius: $w+px; 
    border-radius:$w+px; 
}
.btn{
    @include border(3)
}

多个参数mixin

 @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
调用：
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

多组值参数mixin

 @mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
调用：
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

4、继承类 @extend

$width: 360px; 
.box1{
    width: $width;
    border:1px solid red;
    background-color: #fdd;
}
.box2 {
  @extend .box1;
  border-width: 3px;
}

5、选择器占位符 %placeholder
%mar 若不调用 @extend %mar，则相当于没写这个样式
6、运算

p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}

如果你希望在纯 CSS 中使用变量和 /， 你可以用 #{} 包住变量：

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

7、@if判断

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}
//if else
p{
    @if 1+1==2{
       width:30px;
    }@else{
       width:100px;
    }
}

三目运算符的语法为：
@if($condition,$condition_true, $condition_false)，
三个参数分别表示：条件，条件为真的值，条件为假的值。

$fontBold: true;
p {
    font-weight: if($fontBold, bold, normal);
}
//编译生成
p {
    font-weight: bold;}

8、for循环

• @for $i from through（包括end）
• @for $i from to（不包括end）

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

9、each循环

• @each 循环就是去遍历一个列表，然后从列表中取出对应的值。
• @each 循环指令的形式： @each $var in < list >

@each $animal in puma, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/course/565c0c2abc27d77730c072b3/img/#{$animal}.png');
  }
}

被编译为：

.puma-icon {
  background-image: url('/course/565c0c2abc27d77730c072b3/img/puma.png'); }
.egret-icon {
  background-image: url('/course/565c0c2abc27d77730c072b3/img/egret.png'); }
.salamander-icon {
  background-image: url('/course/565c0c2abc27d77730c072b3/img/salamander.png'); }

10、while循环

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