什么是 Sass

世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言！

Sass 能帮助我们解决什么问题

嵌套规则

通过花括号的方式解决复杂的 CSS 父子样式嵌套问题
变量规则

通过变量将公共样式抽离，减少冗余 CSS 代码
条件逻辑

先高级语言一样编写逻辑性的 CSS 代码

Sass基础知识

Sass 变量和引用

变量格式
变量类型
变量作用域
import 规则等

sass 变量中是有作用域的，基于{}

变量格式

    $width: 300px;

    .div1 {
        width: $width;
    }

    <!-- default语句 -->
    <!-- 添加了default语句的值都是默认值，在后面执行的语句都会被覆盖掉 -->
    $width: 300px !default;
    $width: 200px;

    .div {
        width: $width; // 最后显示300px
    }

插值语句`#{}`

通过 #{} 插值语句可以在选择器或属性名中使用变量：

    $name: foo;
    $attr: border;
    p.#{$name} {
        #{$attr}-color: blue;
    }

    <!-- 编译为 -->
    p.foo {
        border-color: blue; 
    }

import 规则

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用

如果直接使用 @import 'foo.css'的话，它会直接在原生 css 文件中编译为 @import 'foo.css'，而不能起到直接将 foo.css 文件的 css 代码书写到原生 css 文件中，并不能起到 sass 用@import的根本性作用

分音 (Partials)

为了解决这个问题（需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS），只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线

例如，将文件命名为 _colors.scss，便不会编译 _colors.css 文件

    @import "colors";

上面的例子，导入的其实是 _colors.scss 文件

Sass 数据类型，变量运算，mixin

数字类型，颜色类型，字符串类型，数组类型，map 类型
变量的加减乘除运算等
Mixin（混合宏）用法

数据类型

数组类型

示例：定义数组的方式

    $list: (100px, 200px, 'string');

    <!-- 取值 -->
    <!-- nth方法 -->
    .div {
        width: nth($list: $list, $n: 1); // 100px
    }

    <!-- index方法 -->
    .div {
        zoom: index($list: $list, $value: 'string'); // 3
    }

map 类型

定义：

    $map: (top:1px, left:2px, bottom:3px, right:4px);

    .div {
        zoom: index($list: $list, $value: 'string'); // 3
    }

遍历 map 类型

    <!-- 定义map类型 -->
    $map: (top:1px, left:2px, bottom:3px, right:4px);

    @each $key, $value in $map {
        #{$key}: $value;
    }

    <!-- 编译后 -->
    top: 1px;
    left: 2px;
    bottom: 3px;
    right: 4px;

布尔运算 (Boolean Operations)

SassScript 支持布尔型的 and or 以及 not 运算。

除法运算

以下三种情况 / 将被视为除法运算符号：

如果值，或值的一部分，是变量或者函数的返回值
如果值被圆括号包裹
如果值是算数表达式的一部分

Mixin（混合宏）

为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示

    <!-- 定义Mixin -->
    @mixin helloMixin {
        display: inline-block;

        font: {
            size: 20px;
            weight: bold;
        }
    }

    <!-- 使用Mixin，用 @include -->
    p {
        color: #fff;
        @include helloMixin();
    }

参数

    @mixin sexy-border($color, $width){
        border: {
            color: $color;
            width: $width;
            style: dashed;
        }
    }

Sass 继承和嵌套

选择器嵌套，属性嵌套，伪类嵌套
简单继承，多继承，链式继承等

简单继承

    .div1 {
        border: 1px;
        background-color: red;
    }

    .divext {
        @extend .div;
        border-width: 3px;
    }

关联属性继承

    .div1 {
        border: 1px;
        background-color: red;
    }

    .div1.other {
        background-image: url('hello.jepg');
    }

    <!-- 如果.divext也有.other这个类，则.div1.other的属性也会被继承 -->
    .divext {
        @extend .div1;
    }

链式继承

    .div1 {
        border: 1px solid #000;
    }

    .div2 {
        @extend .div1;
        color: red;
    }

    .div3 {
        @extend .div2;
        color: #000;
    }

伪类继承

    a:hover {
        text-decoration: underline;
    }

    .hoverlink {
        color: red;
        @extend :hover;
    }

Sass 条件控制语句

@if, @for, @while, @each等条件控制语句

`@if`

    @if $type == 'bufy' {
        ...
    }

`@for`

through 和 to 的区别

    @for $i form 1 through 3 {
        <!-- i会增加到3 -->
        ...
    }

    @for $i form 1 to 3 {
        <!-- i会增加到3-1 -->
        ...
    }

`@while`

    $i: 6;

    @while $i > 0 {
        ...
    }

`@each`

    <!-- 定义map类型 -->
    $map: (top:1px, left:2px, bottom:3px, right:4px);

    @each $key, $value in $map {
        #{$key}: $value;
    }

    <!-- 编译后 -->
    top: 1px;
    left: 2px;
    bottom: 3px;
    right: 4px;

Sass基础