scss

BEM规范建议

.block { /* 块*/ } 
.block__element { /* 元素 */ } 
.block--modifier { /* 修饰符 */ }

<!--块 -->
<div class="content"> 

 <!-- content__button 元素 -->
  <button   
    class="content__button
    
    content__button--red ">
  </button>
    <!-- content__button--red 修饰 -->
</div>

 /*scss*/

//块
.content {
    
  //元素    
  &__button {
      width: 40px;
      height:  40px;
      padding: 5px;
  }

  //修饰
   &__button--red {
     color: red 
   }
}

/*css*/

content__button {
     width: 40px;
     height:  40px;
     padding: 5px;
 }
 
 content__button--red {
     color: red 
 }
 

变量

 /*scss*/ 
//声明变量
$primary-color:#1269b5;

//使用变量
div.box{
    background-color: $primary-color;    
}

 /*css*/ 
div.box{
    background-color:#1269b5;    
}

嵌套

&嵌套

 /*scss*/ 
 .nav {
   & &-text {
      font-size: 15px;
        &:hover{
          color: blue;
       }
    } 
 }
 
  /*css*/ 
 //父子层级的
 .nav .nav-text{
    font-size: 15px; 
 }
 
 .nav .nav-text:hover{
    color: blue;
 }

属性嵌套

 /*scss*/ 
 .nav {
   border: 1px solid #000 {
     left:0;
     right:0;
    }
  }
 
 /*css*/ 
 .nav {
     border: 1px solid #000;
     border-left: 0;
     border-right: 0;
  }

混合

/*scss*/ 
 // 声明一个setColor的混合
 @mixin setColor ($text-color,$background) {
     color:$text-color;
     background-color:$background;
     .text {
         color: darken($text-color,10%); //在原来颜色的基础上加深10%
     } 
  }  
 .content{
     //使用这个混合
    @include setColor(#fefefe,#969696)
  }
 
 /*css*/
 .content {
    color: #fefefe;
    background-color: #969696;
  }

 .content .text{
    color: #e5e5e5;
 }

继承

/*scss*/ 

 .content {
     padding: 15px;
 }
 
 .content a {
     font-weight: bold;
 }

 .content-info {
     @extend .padding;
     color: #969696;
 }
 
 /*css*/ 
 
 .content , .content-info{
      padding: 15px;
    }

 .content a ,  .content-info a{
      font-weight: bold;
   }
   
 .content-info {
      color: #969696;
   }

@import

以下划线开头，不会被编译，_base.scss

  /*scss*/ 
 @import "base";
  .a {
    color: #969696;
  }
 
  /*css*/
   body {
     margin: 0;
     padding: 0;
   }
  
  .a{
    color: #969696;
   }
   

插值

 /*scss*/
 $name: "info";
 $attr: "border";
 .content-#{$name} {
   #{$attr}-color: #ccc;
 } 
 
 /*css*/
  .content-info {
     border-color: #ccc;
  }   

条件控制

  /*scss*/
  $flag= true;
  $theme: "light";
  .body {
   @if  $theme == dark {
     backgroud-color: black;
   } @else if $theme == light {
     backgroud-color: white;
   } @else {
     backgroud-color: grey; 
   }
 }

  .content {
    @if  $flag {
      color: red; 
     }  @else {
      color: yellow;   
     }
   }
   
 /*css*/
  .body {
    backgroud-color: white;  
  }
  
  .content {
    color: red;  
  }
  

@for

/*scss*/
$columns: 3;
@for $i from 1 through $columns {
 .col-#{$i} {
   width: 100% / $columns * $i  
   }     
}

@for $i from 1 to $columns {
 .row-#{$i} {
   width: 100% / $columns * $i  
   }     
}

/*css*/
.col-1 {
     width: 25%
}

.col-2 {
     width: 50%
}

.col-3 {
     width: 75%
}


.row-1 {
     width: 25%
}

.row-2 {
     width: 50%
}
// tips: `through`循环的次数，包含结束值 , `to`循环次数 不包含结束值

@each

 /*scss*/
 $icons：success error warning;
 @each $icon in $icons {
  .icon-#{$icon} {
     background-image: url(../images/icons/#{$icon}.png) 
  }
 }

 /*css*/
 
 .icon-success {
    background-image: url(../images/icons/success.png)   
 } 
 
 .icon-error {
    background-image: url(../images/icons/error.png)   
 }
 
 .icon-warning {
    background-image: url(../images/icons/warning.png)   
 } 

@while

/*scss*/
 $i: 6;
 @while $i > 0 {
   .item-#{$i} {
       width: 5px * $i; 
    }
   $i: $i-2;    
 }
 
/*css*/
.item-6 {
     width: 30px;
 }
 
.item-4 {
     width: 20px;
 }
 
.item-2 {
    width: 10px;
 }