36 只生成条件与循环控制之编写动态样式

在之前的篇章中，我们深入探讨了利用条件与循环控制来导出不同的样式，这为我们的样式表增加了灵活性和可维护性。在本篇中，我们将继续这一主题，专注于如何通过条件与循环来编写更为动态的样式，以提升我们的样式表的重用性和可配置性。

理解动态样式的价值

动态样式使得我们的 CSS 更加灵活。当面对具有不同状态或变体的元素时，利用 SASS/SCSS 的条件与循环控制，可以有效减少样式的冗余，并提高代码的可读性和可维护性。这种方法特别适合那些具有相似样式但属性值不同的组件，例如按钮、表单输入框等。

条件控制编写动态样式

使用 @if 和 @else

我们可以使用 @if 和 @else 语法来根据不同状态生成不同的样式。例如，创建一个按钮样式，并根据按钮的状态生成不同的背景色。

$button-color: green;

@mixin button-style($type) {
  padding: 10px 20px;
  border: none;
  color: white;

  @if $type == 'primary' {
    background-color: $button-color;
  } @else if $type == 'secondary' {
    background-color: darken($button-color, 10%);
  } @else {
    background-color: gray;
  }
}

// 用于生成不同类型的按钮样式
.button-primary {
  @include button-style('primary');
}

.button-secondary {
  @include button-style('secondary');
}

.button-default {
  @include button-style('default');
}

在上面的例子中，我们定义了一个 button-style 的 mixin，它根据传入的参数 $type，生成不同的按钮样式。这使得我们的代码更加灵活，只需更改类型即可生成不同的样式。

循环控制编写动态样式

使用 @for 循环

@for 循环可以用来生成重复的样式。在某些情况下，比如我们需要为一组相似的元素生成样式，就可以使用这种方法。

假设我们需要为不同的列生成特定的边距，且要求每列的边距逐渐增加，可以这样实现：

@for $i from 1 through 5 {
  .col-#{$i} {
    margin-left: 10px * $i;
  }
}

在这个例子中，生成了 .col-1, .col-2, .col-3, .col-4, 和 .col-5 的样式，每一列的左边距是 10 像素乘以其列数。

使用 @each 循环结合地图

如果需要处理更多可能的值，可以结合 @each 循环和 map 数据结构，以便生成更复杂的动态样式。比如，要为不同的主题生成相应的颜色，我们可以这样实现：

$themes: (
  light: #fff,
  dark: #333,
  primary: blue,
);

@each $theme, $color in $themes {
  .theme-#{$theme} {
    background-color: $color;
    color: if($theme == light, black, white);
  }
}

这里我们为每个主题生成了一组样式。@each 使得我们可以循环遍历每一个主题，并轻松地生成相应的样式。

结束语

在本篇中，我们探讨了使用条件和循环控制来编写动态样式的技术。这种做法能够显著减少代码的冗余并增强了样式的灵活性。随着你对 SASS/SCSS 的深入使用，掌握这些技巧将为你提供更强大的工具，让你在项目中写出更加优雅的 CSS 代码。

在下一篇中，我们将讨论项目中的最佳实践，包括代码结构与样式组织，以帮助你更好地管理复杂的样式表。希望你能继续关注这一系列教程！