Scss--控制指令(@if, @for, @each, @while)--使用/实例

分手后的思念是犯贱 2023-09-29 16:48 38阅读 0赞

原文网址：[Scss--控制指令(@if, @for, @each, @while)--使用/实例\_IT利刃出鞘的博客-CSDN博客][Scss--_if_ _for_ _each_ _while_--_IT_-CSDN]

## 简介 ##

本文介绍Scss的控制指令的用法，包括：@if, @for, @each, @while。

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用，尤其是用在 [Compass][] 等样式库中。

## @if ##

**说明**

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 \{\} 内的代码

**简单示例**

p {
      @if 1 + 1 == 2 { border: 1px solid; }
      @if 5 < 3 { border: 2px dotted; }
      @if null  { border: 3px double; }
    }

编译后的CSS：

p {
      border: 1px solid; 
    }

**复杂示例**

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明。

SCSS：

$type: monster;
    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
        color: green;
      } @else {
        color: black;
      }
    }

编译为

p {
      color: green; 
    }

## @for ##

说明

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

**示例**

SCSS：

@for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }

编译后的CSS：

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

## @each ##

**说明**

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果。

**示例**

SCSS：

@each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
      }
    }

编译后的CSS：

.puma-icon {
      background-image: url('/images/puma.png'); 
    }
    .sea-slug-icon {
      background-image: url('/images/sea-slug.png'); 
    }
    .egret-icon {
      background-image: url('/images/egret.png'); 
    }
    .salamander-icon {
      background-image: url('/images/salamander.png'); 
    }

## @while ##

**说明**

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。

**示例**

SCSS：

$i: 6;
    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }

编译后的CSS：

.item-6 {
      width: 12em; 
    }
    
    .item-4 {
      width: 8em; 
    }
    
    .item-2 {
      width: 4em; 
    }

[Scss--_if_ _for_ _each_ _while_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/125937340
[Compass]: http://compass-style.org/