Sass 控制命令:@if,@for,@each 和 @while - 文章教程

Sass 控制命令:@if,@for,@each 和 @while

发布于 2021-02-15 字数 7003 浏览 1092 评论 0

Sass 的控制命令是创建库和重复使用代码库的一个基础,使用好 Sass,需要掌握好 Sass 的控制命令,只有掌握了这些,你才能进入 Sass 的下一个层次的学习。

Sass 控制命令的速成

Sass 控制命令可以让你在编写@mixin@function时提供相应的流程和逻辑判断。

在这篇文章中我们将覆盖:@if@for@each@while

使用守则

如果你想跟着这篇文章学习Sass控制命令,你可以先从Github下载相应的示例代码。

为了更好的帮助大家理解,我将示例中的Sass语法格式更换成SCSS格式。

@if

@if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块。

这里有一个 @if 指令的简单示例,我已经对示例做了简化处理,只适合阅读,并不太实用。

$boolean: true !default;

@mixin simple-mixin {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}

.some-selector {
    @include simple-mixin;
}

编译出来的CSS:

.some-selector {
  display: block; }

还要注意在每个选项中都加了一个@debug信息。在这篇文章中并不详细介绍@debug,但是我添加了,主要是在命令行中输出时可以看到提示信息,让用户了解某些事情。在一些复杂的@mixin@function中使用@warn@debug,可以起到一定的作用,可以让程序员更容易的发现和追查问题,也更好的提供用户体验。

正如上面的示例,我们在终端编译之后,可以看到@degbug中的对应相关信息:

>>> Change detected to: test.scss
test.scss:7 DEBUG: $boolean is true
      write test.css
      write test.css.map

@for

@for指令有两种形式。

第一种形式是:

@for $var from <start> through <end>

<start>开始循环,到<end>结束,非常简单明了。来看一个简单的示例:

$class-slug: for !default;

@for $i from 1 through 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出来的CSS

.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

.for-4 {
  width: 64px; }

从示例中我们可以明确的知道,从<start>开始(此处示例是1),一直遍历到<end>(此处示例是4)。包括<end>的值。

第二种形式是:

@for $var from <start> to <end>

循环从<start>开始,一直遍历循环到<end>结束。这种形式的循环只要碰到<end>就会停止循环(将不会遍历<end>值)。我们来看一个示例:

$class-slug: for !default;

@for $i from 1 to 4 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出来的CSS

.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

@for循环指令除了可以从小数值到大数值循环之外,还可以从大数值循环到小数值。而且两种形式都支持。

$class-slug: for !default;

@for $i from 5 through 1 {
    .#{$class-slug}-#{$i}{
        width: 60px + $i;
    }
}

编译出CSS

.for-5 {
  width: 65px; }

.for-4 {
  width: 64px; }

.for-3 {
  width: 63px; }

.for-2 {
  width: 62px; }

.for-1 {
  width: 61px; }

在两种形式之下,$var都可以是任意的变量名。在通常的习惯中,一般都将$var命名为$i来做变量名,用于@for指令的递增或递减。

如果你真想看看@for指令的真实示例,你可以看看通过他创建的一个网格系统。你可以在网格系统项目的第37-53行看到@for的使用。

你可以在文件中看到下面这样的代码样本:

// Loops to enumerate the classes
// Yep, this saves us tons of typing (if this were CSS)
@for $i from 1 through $grid-columns {
  .grid-#{$i} { @include grid-base($i); @extend .grid-block; }
}
@for $i from 1 to $grid-columns {
  .grid-prefix-#{$i} { @include grid-prefix($i); }
}
@for $i from 1 to $grid-columns {
  .grid-suffix-#{$i} { @include grid-suffix($i); }
}
@for $i from 1 to $grid-columns {
  .grid-push-#{$i} { @include grid-push($i); }
}
@for $i from 1 to $grid-columns {
  .grid-pull-#{$i} { @include grid-pull($i); }
}

@each

@each指令形式:

@each $var in <list>

如果你没有接触过列表,也不要紧,他也非常简单,就是把2变成1。

在下面的例子中你可以看到,$var就是一个变量名,<list>是一个SassScript表达式,他将返回一个列表值。变量$var会在列表中做遍历,并且遍历出与$var对应的样式块。

这有一个@each指令的简单示例:

$list: adam john wynn mason kuroir;

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

编译出CSS:

.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }

@while

@whild 指令也需要SassScript表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为false时停止循环。这个和@for指令很相似,只要 @while 后面的条件为 true 就会执行。

这里有一个 @while 指令的简单用例:

$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

编译出CSS:

.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }

结论

正如你所看到的,Sass指令可以在你的 @mixin 或者 @function 中添加循环遍历,条件判断功能,这样可以帮助你创建一个真正强大的库。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

虐人心

有一天你能到我的心里去,你会看到那里全是你给的伤悲。

51 文章
评论
24490 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论