Sass 循环实现复制和扩展-JavaScript中文网-JavaScript教程资源分享门户

引言

在前端开发中，我们经常会遇到需要复制和扩展样式的情况。比如，我们定义了一个按钮样式，但是需要创建多个色系或大小不同的按钮，这时候就需要复制和扩展原有的样式。如果采用传统的 CSS 方式，我们可能需要手写多个样式，这不仅费时费力，而且容易出错。而 Sass 提供了一种循环的方式，可以方便地实现样式的复制和扩展，并且可以大大提高开发效率。

语法

Sass 循环有两种语法：

@for 循环：递增循环，可以设置起始值、步长和结束条件。
@each 循环：遍历列表或地图类型的变量，可以分别取出列表项或地图键值对。

以下分别介绍这两种循环语法的使用方式和示例。

`@for` 循环

@for 循环的语法如下：

@for $var from <start> through <end> [step <step>] {
  // 循环体
}

其中：

$var：循环变量，代表从起始值到结束值范围内的每个整数。
<start>：起始值。
<end>：结束值。
<step>（可选）：步长，默认为 1。

循环变量可以在循环体中使用，用于控制样式生成的次数和样式参数的变化。下面是一个简单示例，用于生成 3 个红色按钮：

@for $i from 1 through 3 {
  .btn-#{$i} {
    color: red;
    font-size: 16px * $i;
  }
}

在这个例子中，我们定义了一个名为 $i 的循环变量，设定了从 1 到 3 的循环范围，即循环 3 次，并在循环体中生成 .btn-1、.btn-2 和 .btn-3 三个类名的按钮样式，字体大小随着循环变量递增而递增。

`@each` 循环

@each 循环的语法如下：

@each $var in <list> {
  // 循环体
}

其中：

$var：循环变量，代表列表项或地图键值对中的键名。
<list>：要遍历的列表或地图类型的变量。

类似 @for 循环，循环变量可以在循环体中使用，但是循环变量的值不再是整数，而是列表项或地图键值对中的键名。下面是一个示例，用于创建多个颜色的按钮：

-- -------------------- ---- -------
-------- -
  ------ -----
  -------- -----
  ------- -----
--

----- ------ ------ -- ------- -
  ------------- -
    ----------------- -------
    ------- -
      -------- ----
    -
  -
-

在这个例子中，我们定义了 $colors 变量，它是一个地图类型的变量，包含了三种颜色和对应的十六进制颜色值。然后我们通过 @each 循环，取出每个键值对中的键名和颜色值，生成 .btn-red、.btn-green 和 .btn-blue 三个按钮样式，背景颜色随着循环变量的遍历而取值，悬停时的不透明度则是固定值。

扩展示例：Grid 栅格布局

循环语法可以用于各种样式的复制和扩展，但是最常见的用法是用于网格系统的生成，这是因为网格系统的样式通常是规则化且需要大量的变化。我们可以使用循环语法轻松实现网格样式的生成，下面是一个示例。

基础样式

首先，我们定义 Grid 的基础样式，包含 Grid 容器和 Grid 项目的样式：

-- -------------------- ---- -------
----- -
  -------- -----
  ---------- -----
  ------- ------
-

---------- -
  ----- - - -----
  ------- -----
-

在这个示例中，我们使用 display: flex; 实现了 Grid 布局，指定容器 grid 的 flex-wrap: wrap; 属性可以实现自动换行，然后我们给容器加上了负 margin，这是因为 Grid 项目会加上正 margin，需要通过负 margin 抵消。Grid 项目 .grid-item 的样式中，我们使用了 flex: 0 0 100%; 声明了项目不应该缩放、不应该增长、并且占据 100% 的宽度，通过 margin 可以控制网格之间的间距。

复制样式

接下来，我们需要实现复制和扩展样式的功能，我们可以通过 @for 循环完成这个需求。下面是一个使用循环实现 12 列栅格布局的示例：

$grid-columns: 12;

@for $i from 1 through $grid-columns {
  .grid-#{$i} {
    flex-basis: calc((100% / #{$grid-columns}) * #{$i});
  }
}

在这个示例中，我们定义了一个名为 $grid-columns 的变量，设定为 12，这是因为我们想要生成 12 列的栅格布局。然后，我们使用 @for 循环生成 12 个类名 .grid-1、.grid-2…….grid-12，通过 flex-basis: calc((100% / #{$grid-columns}) * #{$i}) 实现了根据列数等分的宽度，其中 $i 是循环变量，递增从 1 到 12。

扩展样式

在生成栅格样式的基础上，我们还可以通过 @each 循环实现更多的样式扩展。下面是一个示例，用于实现不同布局模式下栅格的样式调整：

-- -------------------- ---- -------
-------------- -
  ---------- ---- ------
  ------------- ---- --------------
  ----------- ------- ------
--

----- ------ ------ -- ------------- -
  -------------- -
    --------------- ----------- ---
    ---------- ----------- ---
  -
-

在这个示例中，我们定义了 $grid-layouts 变量，是一个地图类型的变量，包含了三种布局模式和对应的 flex-direction 和 flex-wrap 属性。然后我们通过 @each 循环，取出每个布局模式和对应的属性值，生成 .grid-default、.grid-horizontal 和 .grid-vertical 三个类名的样式，其中 $name 是循环变量，即布局模式，用于生成样式类名，$value 是当前布局模式对应的属性值，在循环体中通过 nth 函数取出对应的属性值设置给对应的样式。

总结

循环语法是 Sass 中最实用的语法之一，它可以大大提高样式设计和变化的灵活性和效率。在实际开发中，我们可以结合实际需求轻松实现样式的复制、扩展和变化，也可以通过嵌套循环和条件语句等高级语法实现更加强大的功能。学习 Sass 循环语法不仅可以提升前端开发技能，也可以使我们更好地理解样式语言的本质和规律。

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

Sass 循环实现复制和扩展

引言

语法

@for 循环