SASS 中的循环语句及其应用示例

在前端开发中，CSS 是不可缺少的元素，而 SASS 可以让我们的 CSS 编写更加高效和简洁。其中循环语句是 SASS 中十分强大的一种语法，可以帮助我们轻松生成一系列的样式代码。

SASS 中的五种循环语句

在 SASS 中，有五种循环语句可以使用，分别是 @for、@while、@each、@if 和 @else。

@for

@for 循环语句用于重复一个代码块固定次数，其语法如下：

@for $variable from <start> through <end>
  // code block
@endfor

其中 $variable 是循环变量，<start> 和 <end> 分别是循环开始和结束的值，循环体为 { // code block }。在循环中，我们可以使用循环变量 $variable，它会依次取值 start, start+1, ..., end-1, end。

示例代码：

@for $i from 1 through 3
  .box-#{$i}
    width: 100px * $i

输出：

// www.javascriptcn.com code example
.box-1 {
  width: 100px;
}
.box-2 {
  width: 200px;
}
.box-3 {
  width: 300px;
}

@while

@while 循环语句用于当满足条件时则重复执行代码块，其语法如下：

@while <condition>
  // code block
@endwhile

条件为 <condition>，循环体为 { // code block }，只有当条件 <condition> 为真时，循环体才会被执行。

示例代码：

$i: 0
@while $i < 3
  .box-#{$i}
    width: 100px * ($i+1)
  $i: $i + 1

输出：

// www.javascriptcn.com code example
.box-0 {
  width: 100px;
}
.box-1 {
  width: 200px;
}
.box-2 {
  width: 300px;
}

@each

@each 循环语句用于迭代一个列表中的每一项，并执行相应的代码块，其语法如下：

@each $variable in <list>
  // code block
@endeach

其中 $variable 是变量名，<list> 是一个由逗号隔开的值列表，代码块为 { // code block }，每次迭代时 $variable 会取到列表中的一个值。

示例代码：

$colors: red, green, blue
@each $color in $colors
  .color-#{$color}
    background-color: $color

输出：

// www.javascriptcn.com code example
.color-red {
  background-color: red;
}
.color-green {
  background-color: green;
}
.color-blue {
  background-color: blue;
}

@if 和 @else

@if 循环语句用于根据条件判断是否执行代码块，其语法如下：

@if <condition>
  // code block
@else if <condition>
  // code block
@else
  // code block
@endif

条件为 <condition>，可以根据需要添加多个 else if，循环体为 { // code block }，只有当条件为真时，对应的代码块才会被执行。如果所有条件均不满足，则执行最后一个 else 代码块。

示例代码：

// www.javascriptcn.com code example
@mixin text-style($size)
  font-size: $size
  @if $size > 20px
    font-weight: bold
  @else if $size > 16px
    font-style: italic
  @else
    text-decoration: underline

h1
  @include text-style(24px)

p
  @include text-style(16px)

a
  @include text-style(12px)

输出：

// www.javascriptcn.com code example
h1 {
  font-size: 24px;
  font-weight: bold;
}

p {
  font-size: 16px;
  font-style: italic;
}

a {
  font-size: 12px;
  text-decoration: underline;
}

循环语句的应用示例

循环语句在前端开发中有着广泛的应用，以下是一些示例案例。

1. 生成网格系统

循环语句可以帮助我们轻松生成网格系统中的格子，如下：

// www.javascriptcn.com code example
$grid-cols: 12  // 网格系统的列数
$gutter: 20px   // 列之间的间距

.row
  max-width: 1200px
  margin: 0 auto
  display: flex
  flex-wrap: wrap

@for $i from 1 through $grid-cols
  .col-#{$i}
    flex: 1 0 (100% / $grid-cols - $gutter)
    margin-right: $gutter

  .row .col-#{$i}:last-child
    margin-right: 0

2. 生成多级菜单

循环语句可以帮助我们轻松生成多级菜单，如下：

// www.javascriptcn.com code example
$menu-items: (
  'Home': '/',
  'About': '/about',
  'Products': (
    'Product 1': '/product-1',
    'Product 2': '/product-2',
    'Product 3': '/product-3',
  ),
  'Contact': '/contact',
)

nav
  ul.menu
    @each $label, $url in $menu-items
      li
        a(href=$url)= $label

        @if type-of($url) == 'map'
          ul.sub-menu
            @each $sub-label, $sub-url in $url
              li
                a(href=$sub-url)= $sub-label

3. 生成动态图标

循环语句可以帮助我们轻松生成动态图标，如下：

@for $i from 1 through 6
  .icon-#{$i}
    background-image: url('/icons/icon-#{$i}.svg')
    width: ($i * 10) + px
    height: ($i * 10) + px
    background-size: cover

以上展示了 SASS 中五种循环语句的语法和用法，以及循环语句在前端开发中的应用示例，相信可以帮助大家更加高效地编写 CSS 样式。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d633ada941bf7134be3e0c