SASS实用技巧mixin、include、function、%

如果觉得还有点用，请您给我一个赞！您的赞是我坚持下去的动力！

• 占位符选择器 % - 适用于一个样式多个选择器共用

    /******sass******/
    %big{font-size:100px} 
    %small{font-size:50px}
    .style1{
      @extend %big;
    }
    .style2{
      @extend %big;
    }
    /******编译为css后******/
    .style1,.style2{
      font-size:100px
    }
    **注意:%small没有被使用到，所以编译后不会出现多余代码**
  

• @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内容嵌入 - 批量生成各种规格的样式

    /******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 函数 - 适合用来计算动态的数值

    /******sass******/
    @function big(){@return 100+px;}
    .style1{font-size:big();}
    /******编译为css后******/
    .style1{font-size:100px;} 
  

• percentage函数 - 计算的值为%值时用

    /******sass******/
    span {  
      width:percentage(2/3);  
    } 
    /******编译为css后******/
    span {  
        width:66.66667%;  
    }
  

• 父选择器

    /******sass******/
   a{ &:hover{color:red} } 
    /******编译为css后******/
    a{ a:hover{color:red} } 
  

这里附上2个常用的css选择器，我发现很多初级甚至中级的前端开发都经常说不清他们

• 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>