乐趣区

关于sass:Sass-常用功能

jiezi

Sass 罕用性能

原文链接：https://note.noxussj.top/?source=sifo

Sass 性能有很多，这边只列举一些比拟罕用的。

嵌套规定 (Nested Rules)

Sass 容许将一套 CSS 款式嵌套进另一套款式中，内层的款式将它外层的选择器作为父选择器。

编译前 
    .box {
        .box1 {background-color: red;}
    
        .box2 {background-color: blueviolet;}
    }
编译后 
    .box .box1 {background-color: red;}
    .box .box2 {background-color: blueviolet;}
    .box .box3 {background-color: blue;}

父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规定时，有时也须要间接应用嵌套外层的父选择器。

编译前 
    button {
        width: 100px;
        height: 30px;
    
        &:hover {background-color: red;}
    }
编译后 
    button {
        width: 100px;
        height: 30px;
    }
    button:hover {background-color: red;}

属性嵌套 (Nested Properties)

有些 CSS 属性遵循雷同的命名空间 (namespace)，比方 font-family , font-size , font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了防止了反复输出，Sass 容许将属性嵌套在命名空间中。

编译前 
    .my-content {
        padding: {
            top: 10px;
            right: 10px;
            bottom: 10px;
            left: 10px;
        }
    
        font: {
            size: 30px;
            weight: bold;
        }
    }
编译后 
    .my-content {
        padding-top: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        font-size: 30px;
        font-weight: bold;
    }

正文

单行正文不会被编译到 css 文件中，多行正文中能够应用差值语句 ““”，类型 ES6 的模板字符串。

单行正文

单行正文 

    // These comments are only one line long each.
    // They won't appear in the CSS output,
    // since they use the single-line comment syntax.
    
    .my-content {
        width: 100%;
        height: 100%;
    }

编译后 

    .my-content {
        width: 100%;
        height: 100%;
    }
多行正文

编译前 

    /* This comment is
     * several lines long.
     * since it uses the CSS comment syntax,
     * it will appear in the CSS output. */
    
    .my-content {
        width: 100%;
        height: 100%;
    }

编译后 

    /* This comment is
     * several lines long.
     * since it uses the CSS comment syntax,
     * it will appear in the CSS output. */
    .my-content {
        width: 100%;
        height: 100%;
    }

变量 $

编译前 

    $width: 100px;
    $height: 100px;
    
    .box {
        width: $width;
        height: $height;
    }

编译后 

    .box {
        width: 100px;
        height: 100px;
    }

运算 (Operations)

编译前 

    .box {
        width: 100px + 100px;
        height: 200px / 2;
        background-color: royalblue;
    }

编译后 

    .box {
        width: 200px;
        height: 100px;
        background-color: royalblue;
    }

插值语句 #{}

编译前 

    $name: box;
    $attr: background;
    
    .box {.#{$name}1 {
            width: 100px;
            height: 100px;
            #{$attr}-color: red;
        }
    
        .#{$name}2 {
            width: 100px;
            height: 100px;
            #{$attr}-color: blueviolet;
        }
    
        .#{$name}3 {
            width: 100px;
            height: 100px;
            #{$attr}-color: blue;
        }
    }

编译后 

    .box .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .box2 {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    .box .box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

@import

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

编译前（base.scss）

@import './reset.scss';

.box {.#{$name}1 {
        width: 100px;
        height: 100px;
        #{$attr}-color: red;
    }

    .#{$name}2 {
        width: 100px;
        height: 100px;
        #{$attr}-color: blueviolet;
    }

    .#{$name}3 {
        width: 100px;
        height: 100px;
        #{$attr}-color: blue;
    }
}
编译前（reset.scss）
    * {
        margin: 0;
        padding: 0;
    }

    $name: box;
    $attr: background;
编译后（base.css）
    * {
        margin: 0;
        padding: 0;
    }
    
    .box .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .box2 {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    .box .box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

嵌套 @import

编译前（base.scss）
    .box {@import 'box';}
编译前（box.scss）
    .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    .box2 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    
    .box3 {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
编译后（base.css）
    .box .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .box2 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .box3 {
        width: 100px;
        height: 100px;
        background-color: red;
    }

@extend

编译前 
    .box {
        width: 100px;
        height: 100px;
    }
    
    .box {
        .box1 {
            @extend .box;
    
            background-color: red;
        }
    
        .box2 {
            @extend .box;
    
            background-color: blueviolet;
        }
    
        .box3 {
            @extend .box;
    
            background-color: blue;
        }
    }
编译后 
    .box,
    .box .box1,
    .box .box2,
    .box .box3 {
        width: 100px;
        height: 100px;
    }
    
    .box .box1 {background-color: red;}
    .box .box2 {background-color: blueviolet;}
    .box .box3 {background-color: blue;}

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输入 {} 内的代码。

编译前 
    $type: monster;
    
    p {
        @if $type == ocean {color: blue;} @else if $type == matador {color: red;} @else if $type == monster {color: green;} @else {color: black;}
    }
编译后 
    p {color: green;}

@for

@for 指令能够在限度的范畴内反复输入格局，每次按要求（变量的值）对输入后果做出变动。这个指令蕴含两种格局：@for $var from “start” through “end”，或者 @for $var from “start” to “end”。

区别在于 through 与 to 的含意：当应用 through 时，条件范畴蕴含 “start” 与 “end” 的值，而应用 to 时条件范畴只蕴含 “start” 的值不蕴含 “end” 的值。另外，$var 能够是任何变量，比方 $i；“start” 和 “end” 必须是整数值。

编译前 
    @for $i from 1 through 3 {.item-#{$i} {width: 2em * $i;}
    }
编译后 
    .item-1 {width: 2em;}
    
    .item-2 {width: 4em;}
    
    .item-3 {width: 6em;}

@each

@each 指令的格局是 $var in “list”, $var 能够是任何变量名，比方 $length 或者 $name，而 “list” 是一连串的值，也就是值列表。@each 是一个循环语句，$key、$value、相当于 javascript 中的对象键值对，名字能够自定义。

编译前 
    @each $key, $value in (h1: 2em, h2: 1.5em, h3: 1.2em) {#{$key} {font-size: $value;}
    }
编译后 
    h1 {font-size: 2em;}
    
    h2 {font-size: 1.5em;}
    
    h3 {font-size: 1.2em;}

@while

@while 指令反复输入格局直到表达式返回后果为 false。这样能够实现比 @for 更简单的循环，只是很少会用到。

编译前 
    $i: 3;
    @while $i > 0 {.item-#{$i} {width: 2em * $i;}
        $i: $i - 1;
    }
编译后 
    .item-3 {width: 6em;}
    
    .item-2 {width: 4em;}
    
    .item-1 {width: 2em;}

混合指令 @mixin & @include

应用 @mixin 指令定义混合款式，应用 @include 指令援用混合款式，格局是在其后增加混合名称，以及须要的参数（可选）。

编译前 
    @mixin box {
        width: 100px;
        height: 100px;
    }
    
    .box {
        .box1 {
            @include box;
    
            background-color: red;
        }
    
        .box2 {
            @include box;
    
            background-color: blueviolet;
        }
    
        .box3 {
            @include box;
    
            background-color: blue;
        }
    }
编译后 
    .box .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .box2 {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    .box .box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

参数 (Arguments)

参数用于给混合指令中的款式设定变量，并且赋值应用。在定义混合指令的时候，依照变量的格局，通过逗号分隔，将参数写进圆括号里。援用指令时，依照参数的程序，再将所赋的值对应写进括号。

编译前 
    @mixin box($color) {
        width: 100px;
        height: 100px;
        background-color: $color;
    }
    
    .box {
        .box1 {@include box(red);
        }
    
        .box2 {@include box(blueviolet);
        }
    
        .box3 {@include box(blue);
        }
    }
编译后 
    .box .box1 {
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .box .box2 {
        width: 100px;
        height: 100px;
        background-color: blueviolet;
    }
    .box .box3 {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

函数指令 (Function Directives)

Sass 反对自定义函数，并能在任何属性值或 Sass script 中应用。

编译前 
    @function box-width($width) {@return $width * 2;}
    
    .box {
        .box1 {width: box-width(100px);
            height: 100px;
            background-color: red;
        }
    
        .box2 {width: box-width(100px);
            height: 100px;
            background-color: blueviolet;
        }
    
        .box3 {width: box-width(100px);
            height: 100px;
            background-color: blue;
        }
    }
编译后 
    .box .box1 {
        width: 200px;
        height: 100px;
        background-color: red;
    }
    .box .box2 {
        width: 200px;
        height: 100px;
        background-color: blueviolet;
    }
    .box .box3 {
        width: 200px;
        height: 100px;
        background-color: blue;
    }

原文链接：https://note.noxussj.top/?source=sifo

退出移动版