SASS

Sass 是一个CSS 的扩展，在语法CSS语法的基础上，增加变量，嵌套规则, 混合,导入，函数等功能
对CSS进行预处理的“中间语言”

文件格式

.sass ，.scss
scss是对css的一种拓展，跟css很像，是开发中最常用的模式。
Sass从第三代开始，放弃了缩进风格，并且完全向下兼容普通的CSS代码。被称为scss

编译Sass

Node环境

sass app.sass app.css

sass --watch app.sass:app.css  // 自动编译更新CSS
// 用来Sass命令来监视某个Sass文件的改动
sass --style expanded app.scss app.css // 编译的CSS格式更像是手写的CSS样式 

工程化工具

Gulp插件：gulp-sass

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    perfixer = require('gulp-autoprefixer'),
    minifyCss = require('gulp-minify-css'); 
    
    
    
// 编译Sass 并添加CSS前缀    ，压缩
gulp.task('sass', function () {
    
    gulp.src('*.sass')
        .pipe(sass())  // 编译
        .pipe(perfixer()) // 自动改名
        .pipe(minifyCss()) // 压缩
        .pipe(gulp.dest('dist')); 
    
});    

gulp.task('default', ['sass']);

Sass编译后乱码，在Sass文件第一行添加 @charset "UTF-8"。再进行编译。

变量

在SASS中是一个块级作用域，在块内部定义的变量，在外部访问不到，只能在内部访问。
定义：
$w: 100px;

使用：
width: $w;

父类选择器

在SASS中，可以通过&符号，在父选择器内部访问父选择器。
经常使用在伪类元素或伪样式中

div {
    width: $w;
    height: $h;
    background: cyan;
    &:hover {
        background: khaki;
    }
}

属性嵌套

Sass允许CSS属性嵌套，通常这种特性应用于复合属性。对属性嵌套，编译的时候，这些属性会根据嵌套层级来编译结果。

$w: 100px;

div {
    width: $w;
    height: $w;
    background {
        color: pink;
    } 
    border: {
        style: solid;
        top: {
            width: 5px;
            color: tan;
        }
        left: {
            width: 2px;
            color: khaki;
        }
    }
}

编译之后结果：

div {
  width: 100px;
  height: 100px;
  border-style: solid;
  border-top-width: 5px;
  border-top-color: tan;
  border-left-width: 2px;
  border-left-color: khaki; }
  div background {
    color: pink; }

混合

作用：继承复用

定义：@mixin names {}
使用: @include names

$w: 200px;
$h: 100px;
$color: cyan; 

@mixin sayBor {
    width: $w;
    height: $h;
    background: $color;
}

.head {
    @include sayBor;
}

传参

可以对混合进行传递参数，和设置默认值。

@mixin sayBor($w: 300) {
    width: $w;
    height: $h;
    background: $color;
}

.head {
    @include sayBor(500);
}

多参数的使用

通过...语法实现

@mixin sayBor( $shadow...) {
    width: $w;
    height: $h;
    background: $color;
    box-shadow: $shadow;
}

.head {
    @include sayBor(2px 2px 10px red);
}

继承

实现对 class， 元素， id 或者自定义元素名称样式继承。

div {
    width: 100px;
}

myDiv {
    border: 1px solid tan;
}

#demo {
    height: 200px;
}

.app {
    background: tan;
}

p {
    @extend div;
    @extend myDiv;
    @extend #demo;
    @extend .app;
}

mixin与作用域

在sass中，定义在作用域内部的混合，在外部是无法访问的，只能在作用域内部访问
在sass中，定义在作用域内部的继承，在作用域外部是可以访问的，并且会继承整个文件中所有的选择器的样式，不论该选择器写在文件任何位置。编译之后会带有继承的层级选择器。

span {
    .app {
        background: tan;
    }
}

p {
    @extend .app; // 以继承的为父级
}

编译之后

span .app,
span p {
    background: tan;
}

比较Less 的Mixin 和 SASS的继承：
Less中定义在作用域内部的混合，在作用域外部是不能直接访问。
SASS中定义在文件任何位置的继承，都可以直接访问。

比较Less的方法 和 SASS的Mixin
Less中定义在作用域内部的方法，在作用域外部不能直接访问，必须通过命名空间访问。
SASS定义在作用域内部的混合，只能在作用域内部访问，外部无法访问。

占位符

编译之后，样式会删除。占用SASS中的位置，使用其样式内容。

占位符，应用于元素选择器和自定义元素选择器。

%div {
    width: 100px;
}

%myDiv {
    border: 1px solid tan;
}

#demo {
    height: 200px;
}

.app {
    background: tan;
}

p {
    @extend %div;
    @extend %myDiv;
    @extend #demo;
    @extend .app;
}

编译结果：

p {
  width: 100px; }

p {
  border: 1px solid tan; }

#demo, p {
  height: 200px; }

.app, p {
  background: tan; }

运算

在sass中我们的运算是可以包含单位，此时我们的运算会对不同的单位做换算，通常默认单位是px。
当运算时，哪个单位在前面，得到结果就一哪个单位为最终单位。

在SASS中可以对CSS属性值进行运算。
除法元算特殊，因为CSS样式中有 font 属性样式。

• 必须加上()

• 是变量或者函数返回的结果

• 除法是其它运算表达式中的一部分。

$w: 100px;

.box {
    width: $w;
    height: (100/2)px;  // 尽量不要使用数字相除，编译之后单位与数字之间会有空格
    height: 100px+2px;
    font-size: round(5.5px)/2;
    padding: ($w/20)px; // 加上括号之后，不需要加单位，会补默认单位，加上去变成  `px px` 
} 

色彩运算

在16进制的色彩模式中，进行运算时，是对每一个通道色彩单独运算，每个通道大于255或者小于0时候不会影响其它的通道颜色值。
在rgba模式下，进行色彩运算时，要求通明度必须保持一致，否则无法进行运算。

background: #948204 + #325;
color: rgb(10, 20, 20) - rgb(22, 2, 8);
border: 1px solid rgba(20, 2, 10, .4) * rgba(10, 34, 2, .4);  

编译之后：

    
background: #c7a459;
color: #00120c;
border: 1px solid rgba(200, 68, 20, 0.4);    

字符运算

+:字符串拼接。
注意：没有''来表示字符串

$cur: -drop;
div {
    cursor: no + $cur;
}

插值

作用：动态创建一些值
语法：border-#{$key}

@mixin arrow ( $dir: top, $w: 1px, $c: #fff, $pos: absolute ) {
    position: $pos;
    border: $w solid transparent;
    border-#{$dir}: $w solid $c;
    font-size: 0;
}

if语句

语法：
通过@if定义if语句
通过@else if 定义else if 语句
通过@else 定义 else 语句

使用关键字： or， and ：表示 || 和 &&

@mixin arrow ( $dir: top, $w: 1px, $c: #fff, $h: $w, $pos: absolute ) {
    border: $w solid transparent;
    
    @if $dir == top or $dir == bottom {
        border-left-width: $h;
        border-right-width: $h;
    } @else {
        border-top-width: $h;
        border-right-width: $h;
    }
    
    position: $pos;
    border-#{$dir}: $w solid $c;
    font-size: 0;
}

for循环

语法： @for $i form strat through end {}
$i：循环变量
start： 起始值，包括自身
end：终止值，包括自身

.box {
    height: 30px;
    margin-bottom: 10px;
}

@for $i from 1 through 16 {
    .item-#{$i} {
       background: #101 * ($i-1);     
    }
}

while循环

语法：@while 循环条件 {}

当循环条件满足时，会执行该循环

$i: 1;
@while $i < 2 {
    .item-#{$i} {
        background: #111 * $i;
    }
    $i: $i + 2;
}

---

$j: 1;
@while $j < 21 {
    .col-lg-#{$i} {
        width: 100%/2 * $j;
    }
    $j: $j+1;
}

三元运算符

语法：通过if关键字实现。if(条件, true结果, false结果)

$isColor: true;
body {
    background: if( $isColor, green, blue );
}