如何在 SASS 中使用 @each 循环语句来生成常见的 CSS 属性？

在前端开发中，CSS 是不可避免的一部分。而在 CSS 中，有很多常见的属性，例如颜色、字体、边框等等。在编写 CSS 时，经常需要手动为每个元素添加这些属性，这样会导致代码冗余且难以维护。在这种情况下，使用 SASS 中的 @each 循环语句可以很好地解决这个问题。

什么是 SASS？

SASS 是一种 CSS 预处理器，它可以让开发者使用类似编程语言的方式编写 CSS。SASS 可以提供许多功能，如变量、嵌套、混合、继承和函数等。这些功能可以让 CSS 更加模块化、可读性更高、易于维护。

什么是 @each 循环语句？

@each 循环语句是 SASS 中的一种循环语句，它可以循环遍历一个列表并执行一些操作。@each 循环语句的语法如下：

@each $var in <list>
  // do something with $var

其中，$var 是循环变量， 是需要循环遍历的列表。

我们可以使用 @each 循环语句来生成常见的 CSS 属性，例如颜色、字体、边框等等。下面是一些示例代码：

生成颜色属性

// javascriptcn.com 代码示例
$colors: (
  primary: #007bff,
  secondary: #6c757d,
  success: #28a745,
  danger: #dc3545,
  warning: #ffc107,
  info: #17a2b8,
  light: #f8f9fa,
  dark: #343a40
);

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }

  .bg-#{$name} {
    background-color: $color;
  }

  .border-#{$name} {
    border-color: $color;
  }
}

在上面的示例中，我们定义了一个颜色列表 $colors，然后使用 @each 循环语句遍历这个列表，并为每个颜色生成三个属性：文本颜色、背景颜色和边框颜色。

生成字体属性

// javascriptcn.com 代码示例
$fonts: (
  sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif,
  serif: Georgia, 'Times New Roman', Times, serif,
  monospace: 'Courier New', Courier, monospace
);

@each $name, $font in $fonts {
  .font-#{$name} {
    font-family: $font;
  }
}

在上面的示例中，我们定义了一个字体列表 $fonts，然后使用 @each 循环语句遍历这个列表，并为每个字体生成一个属性：字体。

生成边框属性

// javascriptcn.com 代码示例
$borders: (
  none: none,
  solid: solid,
  dashed: dashed,
  dotted: dotted
);

@each $name, $style in $borders {
  .border-#{$name} {
    border-style: $style;
  }
}

在上面的示例中，我们定义了一个边框列表 $borders，然后使用 @each 循环语句遍历这个列表，并为每个边框样式生成一个属性：边框样式。

总结

使用 SASS 中的 @each 循环语句可以很好地生成常见的 CSS 属性，这样可以减少代码冗余且易于维护。在使用 @each 循环语句时，需要注意变量名和列表名称的命名规范，以及循环变量的使用方法。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657951d3d2f5e1655d3565ef