Sass速通（三）：判断与循环

lonelydawn

发布于 2021-09-26 11:35:48

63800

代码可运行

文章被收录于专栏：lonelydawn的前端猿区lonelydawn的前端猿区

运行总次数：0

代码可运行

Sass 为样式书写引入了结构化编程方案，允许我们在 CSS 原有的顺序结构之外书写判断和循环结构。

判断

在 Sass 中，我们可以使用 @if、@else if、@else 来书写条件语句。

$bool1: true;
$bool2: false;
.inner {
    @if ($bool1) { // true
        font-size: 14px;
    }
    @if ($bool1 and $bool2) { // false
        color: red;
    } @else if ($bool1 or $bool2) { // true
        color: green;
    } @else {
        color: blue;
    }
}

编译后

.inner {
  font-size: 14px;
  color: green;
}

在布尔运算中，关键字 and 表示“且”，or 表示 “或”。

循环

与 JS 一样，Sass 中有多个用于书写循环结构的指令，如 @for、@while、@each。

@for

@for循环，有两种写法：

// @for 控制变量 from 起始值 through 终止值
@for $i from 1 through 3 {
    .through-#{$i} {
        width: 2em * $i;
    }
}
// @for 控制变量 from 起始值 to 终止值
@for $i from 1 to 3 {
    .to-#{$i} {
        width: 2em * $i;
    }
}

在循环中，控制变量将从起始值加到终止值。

through 和 to 的区别： through 包含终止值；to 不包含终止值。

编译后

.through-1 {
  width: 2em;
}
.through-2 {
  width: 4em;
}
.through-3 {
  width: 6em;
}

.to-1 {
  width: 2em;
}
.to-2 {
  width: 4em;
}

@while

@while 需要一个控制表达式，表达式的值为 true 时，循环继续；值为 false 时，循环结束。

$i: 1;
@while $i < 5 { // 表示式值为 true，循环继续
    .while-#{$i} {
        width: 2em * $i;
    }
    $i: $i + 2;
}

编译后

.while-1 {
  width: 2em;
}
.while-3 {
  width: 6em;
}

@each

@each 可用于循环遍历一个值列表，list 或 map。

map 在遍历将被转化为 list 的形式，如 (key1: value1, key2: value2) 将被转化为 (key1 value1) (key2 value2)。

$list-border: (width 2px) (style dotted) (color green);
@each $prop, $value in $list-border {
    .list {
        border-#{$prop}: $value;
    }
}
$map-border: (width: 1px, style: dashed, color: blue);
@each $prop, $value in $map-border {
    .map {
        border-#{$prop}: $value;
    }
}

编译后

.list {
  border-width: 2px;
}
.list {
  border-style: dotted;
}
.list {
  border-color: green;
}

.map {
  border-width: 1px;
}
.map {
  border-style: dashed;
}
.map {
  border-color: blue;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

打包