CSS @each|极客教程

CSS @each

在CSS中，@each是一个非常有用的指令，它可以帮助我们简化代码，减少重复性工作。@each指令可以用来循环遍历一个列表，并将其中的每个元素应用到指定的CSS属性中。在本文中，我们将详细介绍@each指令的用法，并提供一些示例代码来帮助读者更好地理解。

基本语法

@each指令的基本语法如下：

@each $variable in <list> {
  // CSS rules
}

其中，$variable是一个变量，用来存储列表中的每个元素；是一个包含多个元素的列表。在@each指令中，我们可以使用$variable来引用列表中的每个元素，并将其应用到CSS属性中。

接下来，我们将通过一些示例代码来演示@each指令的用法。

示例代码

示例1：使用@each循环设置不同的背景颜色

$colors: red, green, blue;

@each $color in $colors {
  .color-#{$color} {
    background-color: $color;
  }
}

在这个示例中，我们定义了一个包含三种颜色的列表$colors，然后使用@each指令循环遍历这个列表，并为每种颜色生成一个类名，设置不同的背景颜色。

运行结果如下：

.color-red {
  background-color: red;
}

.color-green {
  background-color: green;
}

.color-blue {
  background-color: blue;
}

示例2：使用@each循环设置不同的字体大小

$sizes: 12px, 14px, 16px;

@each $size in $sizes {
  .size-#{$size} {
    font-size: $size;
  }
}

在这个示例中，我们定义了一个包含三种字体大小的列表$sizes，然后使用@each指令循环遍历这个列表，并为每种字体大小生成一个类名，设置不同的字体大小。

运行结果如下：

.size-12px {
  font-size: 12px;
}

.size-14px {
  font-size: 14px;
}

.size-16px {
  font-size: 16px;
}

示例3：使用@each循环设置不同的边框样式

$styles: solid, dashed, dotted;

@each $style in $styles {
  .border-#{$style} {
    border: 1px $style black;
  }
}

在这个示例中，我们定义了一个包含三种边框样式的列表$styles，然后使用@each指令循环遍历这个列表，并为每种边框样式生成一个类名，设置不同的边框样式。

运行结果如下：

.border-solid {
  border: 1px solid black;
}

.border-dashed {
  border: 1px dashed black;
}

.border-dotted {
  border: 1px dotted black;
}

示例4：使用@each循环设置不同的文本颜色

$colors: #ff0000, #00ff00, #0000ff;

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

在这个示例中，我们定义了一个包含三种文本颜色的列表$colors，然后使用@each指令循环遍历这个列表，并为每种文本颜色生成一个类名，设置不同的文本颜色。

运行结果如下：

.text-#ff0000 {
  color: #ff0000;
}

.text-#00ff00 {
  color: #00ff00;
}

.text-#0000ff {
  color: #0000ff;
}

示例5：使用@each循环设置不同的背景图片

$images: url('image1.jpg'), url('image2.jpg'), url('image3.jpg');

@each $image in $images {
  .bg-#{$image} {
    background-image: $image;
  }
}

在这个示例中，我们定义了一个包含三种背景图片的列表$images，然后使用@each指令循环遍历这个列表，并为每种背景图片生成一个类名，设置不同的背景图片。

运行结果如下：

.bg-url('image1.jpg') {
  background-image: url('image1.jpg');
}

.bg-url('image2.jpg') {
  background-image: url('image2.jpg');
}

.bg-url('image3.jpg') {
  background-image: url('image3.jpg');
}

示例6：使用@each循环设置不同的边框颜色和宽度

$borders: 1px solid red, 2px dashed green, 3px dotted blue;

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

在这个示例中，我们定义了一个包含三种边框样式的列表$borders，然后使用@each指令循环遍历这个列表，并为每种边框样式生成一个类名，设置不同的边框样式。

运行结果如下：

.border-1px solid red {
  border: 1px solid red;
}

.border-2px dashed green {
  border: 2px dashed green;
}

.border-3px dotted blue {
  border: 3px dotted blue;
}

示例7：使用@each循环设置不同的阴影效果

$shadows: 1px 1px 3px rgba(0, 0, 0, 0.5), 2px 2px 5px rgba(0, 0, 0, 0.7), 3px 3px 7px rgba(0, 0, 0, 0.9);

@each $shadow in $shadows {
  .shadow-#{$shadow} {
    box-shadow: $shadow;
  }
}

在这个示例中，我们定义了一个包含三种阴影效果的列表$shadows，然后使用@each指令循环遍历这个列表，并为每种阴影效果生成一个类名，设置不同的阴影效果。

运行结果如下：

.shadow-1px 1px 3px rgba(0, 0, 0, 0.5) {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.shadow-2px 2px 5px rgba(0, 0, 0, 0.7) {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.shadow-3px 3px 7px rgba(0, 0, 0, 0.9) {
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.9);
}

示例8：使用@each循环设置不同的旋转角度

$angles: 45deg, 90deg, 135deg;

@each $angle in $angles {
  .rotate-#{$angle} {
    transform: rotate($angle);
  }
}

在这个示例中，我们定义了一个包含三种旋转角度的列表$angles，然后使用@each指令循环遍历这个列表，并为每种旋转角度生成一个类名，设置不同的旋转效果。

运行结果如下：

.rotate-45deg {
  transform: rotate(45deg);
}

.rotate-90deg {
  transform: rotate(90deg);
}

.rotate-135deg {
  transform: rotate(135deg);
}

示例9：使用@each循环设置不同的动画效果

$animations: fadeIn 1s ease-in, fadeOut 2s ease-out, shake 0.5s linear;

@each $animation in $animations {
  .animate-#{$animation} {
    animation: $animation;
  }
}

在这个示例中，我们定义了一个包含三种动画效果的列表$animations，然后使用@each指令循环遍历这个列表，并为每种动画效果生成一个类名，设置不同的动画效果。

运行结果如下：

.animate-fadeIn 1s ease-in {
  animation: fadeIn 1s ease-in;
}

.animate-fadeOut 2s ease-out {
  animation: fadeOut 2s ease-out;
}

.animate-shake 0.5s linear {
  animation: shake 0.5s linear;
}

示例10：使用@each循环设置不同的渐变效果

$gradients: linear-gradient(to right, red, blue), radial-gradient(circle, yellow, green), repeating-linear-gradient(to bottom, orange, purple);

@each $gradient in $gradients {
  .gradient-#{$gradient} {
    background: $gradient;
  }
}

在这个示例中，我们定义了一个包含三种渐变效果的列表$gradients，然后使用@each指令循环遍历这个列表，并为每种渐变效果生成一个类名，设置不同的渐变效果。

运行结果如下：

.gradient-linear-gradient(to right, red, blue) {
  background: linear-gradient(to right, red, blue);
}

.gradient-radial-gradient(circle, yellow, green) {
  background: radial-gradient(circle, yellow, green);
}

.gradient-repeating-linear-gradient(to bottom, orange, purple) {
  background: repeating-linear-gradient(to bottom, orange, purple);
}

通过以上示例代码，我们可以看到@each指令的强大之处，它可以帮助我们简化代码，减少重复性工作，提高开发效率。