那那那呀

一个小伙

sass 入门（四）

2018.02.04
  1. 插值#{}
  2. 运算
  3. 控制指令

插值#

@mixin set-value($side, $value) {
    margin-#{$side}: $value;
}

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

编译

.demo {
    margin-top: 15px;
}

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

运算

加法

$box-width: 100px;
$item-width: 50px;
.demo {
    width: $box-width - $item-width;
}

.demo {
    width: 50px;
}

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

减法

- 同理

乘法

* 同理

除法

/ 同理

控制指令

@if

根据条件除处理样式块

@mixin none ($boolean: true) {
    @if $boolean {
        display: block;
    }
    @else {
        display: none;
    }
}

.demo {
    @include none(false);
}

编译

.demo {
    display: none;
}

@for 循环

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

1. through

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

编译

.demo1 {
    margin-top: 10px;
}

.demo2 {
    margin-top: 20px;
}

.demo3 {
    margin-top: 30px;
}

2. to

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

编译

.demo1 {
    margin-top: 10px;
}

.demo2 {
    margin-top: 20px;
}

while 循环

只要…就…

$tot = 3;

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

编译

.demo3 {
    margin-top: 30px;
}

.demo2 {
    margin-top: 20px;
}

.demo1 {
    margin-top: 10px;
}

each 循环

遍历一个列表

@each $var in <list>

$list: one two three;

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

.show-img {
    @include imgs;
}

编译

.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");
}
CSS sass