CSS►sass

sass 入门（四）

  • 插值#{}
  • 运算
  • 控制指令

    • 插值#{}

    1
    2
    3
    4
    5
    6
    7
    @mixin set-value($side, $value) {
        margin-#{$side}: $value;
    }

    .demo {
        @include set-value(top, 15px);
    }

    编译

    1
    2
    3
    .demo {
        margin-top: 15px;
    }

    用处无限大，等待你发掘。

    运算

    加法

    1
    2
    3
    4
    5
    $box-width: 100px;
    $item-width: 50px;
    .demo {
        width: $box-width - $item-width;
    }
    1
    2
    3
    .demo {
        width: 50px;
    }

    不同的单位类型相加会报错

    减法

    - 同理

    乘法

    * 同理

    除法

    / 同理

    控制指令

    @if

    根据条件除处理样式块

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @mixin none ($boolean: true) {
        @if $boolean {
            display: block;
        }
        @else {
            display: none;
        }
    }

    .demo {
        @include none(false);
    }

    编译

    1
    2
    3
    .demo {
        display: none;
    }

    @for 循环

    1
    2
    @for $i from <start> through <end>   // 循环包含end数
    @for $i from <start> to <end>       // 循环不包括end数
    • $i 变量
    • start 起始值
    • end 结束值

    1. through

    1
    2
    3
    4
    5
    @for $i from 1 through 3 {
        .demo#{$i} {
            margin-top: 10px * $i;
        }
    }

    编译

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .demo1 {
        margin-top: 10px;
    }

    .demo2 {
        margin-top: 20px;
    }

    .demo3 {
        margin-top: 30px;
    }

    2. to

    1
    2
    3
    4
    5
    @for $i from 1 to 3 {
        .demo#{$i} {
            margin-top: 10px * $i;
        }
    }

    编译

    1
    2
    3
    4
    5
    6
    7
    .demo1 {
        margin-top: 10px;
    }

    .demo2 {
        margin-top: 20px;
    }

    while 循环

    只要…就…

    1
    2
    3
    4
    5
    6
    7
    8
    $tot = 3;

    @while $tot > 0 {
        .demo#{$tot} {
            margin-top: 10px * $tot;
        }
        $tot: $tot - 1;
    }

    编译

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .demo3 {
        margin-top: 30px;
    }

    .demo2 {
        margin-top: 20px;
    }

    .demo1 {
        margin-top: 10px;
    }

    each 循环

    遍历一个列表

    1
    @each $var in <list>

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $list: one two three;

    @mixin imgs {
        @each $img in $imgs {
            .img-#{$img} {
                background: url("/imgs/#{$img}.png");
            }
        }
    }

    .show-img {
        @include imgs;
    }

    编译

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .show-img .img-one {
        background: url("/imgs/one.png");
    }

    .show-img .img-two {
        background: url("/imgs/two.png");
    }

    .show-img .img-three {
        background: url("/imgs/three.png");
    }