Sass进阶教程-优快云博客

Sass
- 语法
- 编译

Sass

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

语法

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

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

变量
sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）。
- 全局变量与局部变量
  定义在任何选择器之外的变量被认为是全局变量，定义在选择器内的变量称之为局部变量。
  
  但启用了global后，即使写在局部也能覆盖全局变量（sass 3.4版本后可用）
```
$color:#fff !global;
```
- 默认变量：sass的默认变量仅需要在值后面加上!default即可。
```
    $fontSize:12 !default;
```
覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可（一般用于文件引用）:
```
    $fontSize:16;
    $fontSize:12 !default;//此行代码是另一个文件中的代码（查看@import）
```
- 变量特殊用法，一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用
```
    $borderDirection:top !default;
    //应用于class和属性
    .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);}


//map类型
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);

//使用
h1{map-get($headings,h1)}
```
嵌套(Nesting)
css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要一遍又一遍地写同一个ID

    #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 }
    }

- 在嵌套中用&表示父元素选择器

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

sass中使用@mixin声明混合，通过@include来调用
- 无参数mixin
- 有参数mixin：参数名以$符号开始
- 多个参数mixin：多个参数以逗号分开
- @content：多用于媒体查询的封装
```
    @mixin max-screen($res){
      @media only screen and ( max-width: $res )
      {
        @content;
      }
    }
    @include max-screen(480px) {
      body { color: red }
    }
```

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

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

继承一般样式
@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)
  - darken( $color,$ percent)， $color颜色值，$ percent百分比
- 自定义函数
  格式：@fuction 函数名
```
    $oneWidth: 10px;  
    $twoWidth: 40px;  

    @function widthFn($n) {  
      @return $n * $twoWidth + ($n - 1) * $oneWidth;  
    }  

    .leng {   
        width: widthFn($n : 5);  
    } 
```
运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

条件判断及循环

@if判断
@if可一个条件单独使用，也可以和@else结合多条件使用

@if $type == ocean {
    color: blue;
} @else if $type == matador {
    color: red;
} @else {
    color: black;
}

for循环

    @for $var from <start> through <end>（包含end值）
    @for $var from <start> to <end>（不包含en值）

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

编译

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

    gulp.task('sass', function () {
        return gulp.src('./sass/**/*.scss')
        .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
        .pipe(gulp.dest('./css'));
    });

    //文件监听（文件有修改自动编译）
    gulp.task('sassWatch',function(){
        gulp.watch('./src/sass/*.scss',['sass']);
    });