day33-Sass

Sass

SASS是一个成熟、稳定、强大的CSS扩展语言解析器，提供变量、嵌套、混合、继承等特性，大大节省了设计者的时间，使得CSS开发变得简单和可维护

语法

• 注释：sass有两种注释方式（与js相同）
  • 多行注释 /* */
  • 单行注释 / /

body{
   color:#333;  //这种注释内容不会出现在生成的css文件中
   padding:0;  /*这种注释内容会出现在生成的css文件中*/  
}

• 变量

sass 的变量必须是$开头，后面紧跟着变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像css属性设置语言）

• 全局变量与局部变量

  定义在任何选择器之外的变量被认为是全局变量，定义在选择器内的变量称之为局部变量

  要在局部修改 全局变量，需要添加!global（sass 3.4版本后可用）

  $color:#333;  //全局变量
  .box{
      $color:#fff !global  //局部修改全局变量
  }
  

• 默认变量：在值后面加上!default

  覆盖方式也很简单，只需要在默认变量之前重新声明下变量即可（一般用于文件引用）：

      $fontSize:16;  //覆盖
      $fontSize:12 !default;  //此行代码是另一个文件中的代码（查看@import）
  

• 变量特殊用法

  一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下则必须要以#{$variables}形式使用

          $borderDirection:top;
           border-#{$borderDirection}{
           border-#{$borderDirection}:1px solid #ccc;
      }
  

• 多值变量

  多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象

     //list类型
     $pd:5px 10px 20px 30px;
     //使用
     .content{padding:$pd;}
     .btop{border-top:nth($pd,1);}
     ==>.content{padding:5px 10px 20px 30px};
     ==>.btop{border-top:5px}
     
     //map类型
     $headings:(h1:2em,h2:1.5em,h3:1.2em);
     //使用
     h1{font-size:map-get($headings,h3)}
     ==>h1{font-size:1.2em}
  

• 嵌套

  • css中重复写选择器是非常烦的。如果要写一大串指向页面同一块的样式时，往往需要一遍又一遍的写同一个ID

  • css写法：

    #content article h1{color:#333;}
    #content article p{margin-bottom:1.4em}
    #content aside{background-color:#EEE}
    

  • sass写法：

    #content{
         article{
             h1{color:#333}
             p{margin-bottom:1.4em}
         }
         aside{background-color:#EEE}
    }
    //在嵌套中用`&`表示父元素选择器
    

    // #content article h1 { color: #333 }
    // #content article p { margin-bottom: 1.4em }
    // #content article p::before{content:'￥'}
    // #content aside { background-color: #EEE }
    
    #content {
        article {
            h1 { color: #333 }
            p { 
                margin-bottom: 1.4em;
                &::before{content:'￥'}
              }
        }
        aside { background-color: #EEE }
    }
    

• mixin混合器（了解）

  变量可以实现简单样式的重用（如color,width等），但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，可以通过sass的混合器实现重用

  sass中使用@mixin声明混合，通过@include来调用

  • 无参数mixin
  • 有参数mixin：参数名以$符号开始
  • 多个参数mixin：多个参数以逗号分开
  • @content：多用于媒体查询的封装

      @mixin important-text {
          color: red;
          font-size: 25px;
          font-weight: bold;
          border: 1px solid blue;
      }
  
      @mixin bordered($width,$color) {
          border: $width solid $color;
      }
  
      @mixin max-screen($res){
        @media only screen and ( max-width: $res )
        {
          @content;
        }
      }
  
      // 使用
      h4{ @include important-text; }
      .myArticle {
          @include bordered(1px,blue);
      }
      @include max-screen(480px) {
        body { color: red }
      }
  

  PS：@mixin通过@include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用@mixin，而非传递参数类的使用下面的继承%。

• 继承

  使用选择器的继承，要使用关键词@extend

  • 继承一般样式

        h1{font-size:20px}
        @extend h1;
    

  • 占位选择器%

        //占位符编译后不存在css样式中
        %ir{
            color: transparent;
            text-shadow: none;
            background-color: transparent;
            border: 0;
        }
        @extend %ir;
    

• 函数

  Sass中的数字函数提要针对数字方面提供一系列的函数功能：

  • 常用函数：
    • percentage($value)：将一个不带单位的数转换成百分比值；
    • round($value)：将数值四舍五入，转换成一个最接近的整数；
    • ceil($value)：将大于自己的小数转换成下一位整数；
    • floor($value)：将一个数去除他的小数部分；
    • abs($value)：返回一个数的绝对值；
    • min($numbers…)：找出几个数值之间的最小值；
    • max($numbers…)：找出几个数值之间的最大值。
    • lighten($color,$percent) 通过改变颜$color色的亮度值（0% - 100%），让颜色变亮
    • darken($color,$percent) 通过改变颜$color色的亮度值（0% - 100%），让颜色变暗
  • 自定义函数

    格式：@fuction 函数名

        $oneWidth: 10px;  
        $twoWidth: 40px;  
        
        @function widthFn($n) {  
            @return $n * $twoWidth + ($n - 1) * $oneWidth;  
        }  
        
        .leng {   
            width: widthFn($n : 5);  
        } 
    

• for 循环

@for $var from <start> through <end>  //包含end值
@for $var from <start> to <end> //不包含end值

• 导入

  sass中导入其他sass文件，最后编译为一个css文件，优于纯css的@import

  @import 'reset';
  

编译

• gulp-sass
  • 参数outputStyle
    • nested（默认）
    • expanded：展开
    • compact：单行
    • compressed：压缩

   gulp.task('buildSass',(done)=>{
       //匹配文件
       gulp.src('./src/sass/*.scss')
       .pipe(sass({outputStyle:'expanded'})
       .on('error',sass.logError))
       .pipe(gulp.dest('./src/css'))
       // 表示任务处理完成
       done();
       
       // 文件监听（文件有修改自动编译）
   })

文件名以 _ 开头的sass文件不会被编译成css文件