如果覺得還有點用，請您給我一個贊擅威！您的贊是我堅持下去的動力壕探！

• 占位符選擇器 % - 適用于一個樣式多個選擇器共用

    /******sass******/
    %big{font-size:100px} 
    %small{font-size:50px}
    .style1{
      @extend %big;
    }
    .style2{
      @extend %big;
    }
    /******編譯為css后******/
    .style1,.style2{
      font-size:100px
    }
    **注意:%small沒有被使用到，所以編譯后不會出現(xiàn)多余代碼**
  

• @mixin和@include - 適用于需要替換目標點的代碼片段

    /******sass******/
    @mixin big{ font-size:100px}
    .style1{@include big;}
    .style2{@include big;}
  
     /******編譯為css后******/
    .style1{font-size:100px}  //mixin代碼段將替換到@include處
    .style2{font-size:100px}
  

• @mixin + #{} 字符替換 + @content內容嵌入 - 批量生成各種規(guī)格的樣式

    /******sass******/
    @mixin create-color($colorName) {
      span[#{$colorName}],
      p[#{$colorName}]{
        @content;
      }
    }
  
    @include create-color(corWhite){
      color:#fff;
    }
  
    /******編譯為css后******/
    span[corWhite],
    p[corWhite]{
      color:#fff;
    }
  

  @mixin搭配上@if @for @each 等控制指令更靈活

• @function 函數(shù) - 適合用來計算動態(tài)的數(shù)值

    /******sass******/
    @function big(){@return 100+px;}
    .style1{font-size:big();}
    /******編譯為css后******/
    .style1{font-size:100px;} 
  

• percentage函數(shù) - 計算的值為%值時用

    /******sass******/
    span {  
      width:percentage(2/3);  
    } 
    /******編譯為css后******/
    span {  
        width:66.66667%;  
    }
  

• 父選擇器

    /******sass******/
   a{ &:hover{color:red} } 
    /******編譯為css后******/
    a{ a:hover{color:red} } 
  

這里附上2個常用的css選擇器郊丛，我發(fā)現(xiàn)很多初級甚至中級的前端開發(fā)都經常說不清他們

• div + p: 代表 div 同級下相鄰的第一個 p 元素

    <div>
      <p>不滿足</p>
    </div>
    <p>滿足</p>
    <p>不滿足</p>
  

• div > p : 代表在div內部所有p標簽的子元素

    <div>
      <p>滿足</p>
      <hgroup>
        <p>不滿足</p>
      </hgroup>
      <p>滿足</p>
    </div>
    <p>不滿足</p>