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

发布于 2021-02-15 16:28:17 字数 6023 浏览 1383 评论 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 中添加循环遍历,条件判断功能,这样可以帮助你创建一个真正强大的库。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

虐人心

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

65 文章
7132 评论
24525 人气
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。