SASS 代码中使用 @each 循环生成不同的 CSS 样式表-JavaScript中文网-JavaScript教程资源分享门户

SASS 是一种流行的 CSS 预处理器，可以帮助前端开发人员更加高效地组织 CSS 代码。其中，@each 循环是 SASS 中的一种强大的功能，可以帮助我们更加方便地生成不同的 CSS 样式表。本文将深入介绍 SASS 中的 @each 循环，并提供实用的示例代码和技巧。

什么是 @each 循环？

在 SASS 中，@each 循环是一种用于循环遍历集合（例如列表或映射）中每个元素的命令。通过 @each 循环，我们可以将集合中的每个元素作为变量，使用其值执行一些操作，最终生成不同的 CSS 样式表，从而在 CSS 样式表中实现灵活的控制。

@each 循环的语法格式如下：

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

其中，$var 表示集合中的每个元素，<list> 表示遍历的集合，循环体是具体的操作内容。需要注意的是，集合可以是 SASS 中的列表或映射。

如何在 SASS 中使用 @each 循环生成不同的 CSS 样式表？

为了更好地理解 @each 循环的应用，以下将介绍三个实用的示例，可以帮助你更好地掌握 @each 循环的用法。

使用 @each 循环实现 CSS 样式表的拆分

通过 @each 循环，我们可以将 CSS 样式表按照某些规则拆分成不同的样式表，从而实现样式的细化控制。

假设我们有以下样式表：

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

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

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

在这个例子中，我们使用了 SASS 中的映射结构 $colors，以集合元素的方式存储颜色及其值。我们通过 @each 循环遍历 $colors 集合，将每个颜色的名字（$color）和对应的颜色值（$value）作为变量，使用其值生成对应的CSS样式表。例如，.text-primary类将设置为{color：#007bff}。

使用 @each 循环实现自定义布局类

在许多项目中，我们需要自定义一些常用的布局类，例如“ .container”、“ .row”、“ .col-md”等。通过使用 @each循环，我们可以快速生成这些类，并且可以动态地控制它们的样式。

假设我们想要生成这些类：

// www.javascriptcn.com code example
.container {
  max-width: 1140px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: -15px;
}

.col-md- {
  flex-grow: 1;
  padding: 15px;
}

我们可以通过以下代码来生成这些类：

// www.javascriptcn.com code example
$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 992px,
  xl: 1200px
);

$max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

$container-max-widths: (
  sm: $max-widths[sm],
  md: $max-widths[md],
  lg: $max-widths[lg],
  xl: $max-widths[xl]
);

@mixin make-container($max-width) {
  max-width: $max-width;
  margin-right: auto;
  margin-left: auto;
}

@each $breakpoint, $container-max-width in $container-max-widths {
  .container-#{$breakpoint} {
    @include make-container($container-max-width);
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

@each $breakpoint, $size in $grid-breakpoints {
  @for $i from 1 through 12 {
    .col-#{$breakpoint}-#{$i} {
      width: $i / 12 * 100%;
    }
  }
}

需要注意的是，这里我们使用了两个映射结构 $max-widths、$container-max-widths，分别用于指定不同屏幕大小的最大宽度。同时，我们还使用了 SASS 中的 mixin 和 for 循环，以控制每个布局类的样式。

使用 @each 循环实现自定义字体类

在一些复杂的项目中，我们不仅需要自定义常用的布局类，还需要使用自定义字体类。通过使用 @each 循环，我们可以轻松生成自定义的字体类，并且可以使用变量来控制字体样式。

假设我们有以下变量：

// www.javascriptcn.com code example
$fonts: (
  default: Roboto,
  emphasis: Open Sans
);

$font-weights: (
  light: 300,
  regular: 400,
  medium: 500,
  bold: 700
);

@each $name, $font in $fonts {
  @each $weight, $value in $font-weights {
    .#{str-replace($name, ' ', '-')}--#{$weight} {
      font-family: $font;
      font-weight: $value;
    }
  }
}

在这个例子中，我们使用两个映射结构$fonts、$font-weights来指定字体类型和字体的不同权重。通过使用@each循环，我们遍历 $fonts 和 $font-weights，将每个字体的名字（$name）和字重（$weight）作为变量，使用其值生成自定义的字体类。例如，.default--bold类将设置为{font-family：Roboto; font-weight：700}。

总结

通过使用 @each 循环，我们可以更加方便地生成不同的 CSS 样式表，控制和优化页面样式。借助于上述实用的示例代码和技巧，相信你也可以更好地掌握如何在 SASS 中利用 @each 循环实现自定义样式表。

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

SASS 代码中使用 @each 循环生成不同的 CSS 样式表

接着读