35 通过控制导出不同样式的内容

在SASS/SCSS中，条件和循环控制是我们实现动态样式的强大工具。在上篇文章中，我们讨论了如何使用循环语句来简化样式的生成。接下来，我们将深入探讨如何通过条件和循环控制结合使用，导出不同样式的内容。这将使我们能够根据特定条件生成不同的CSS规则，同时也能保持代码的可维护性和可读性。

条件控制与循环控制结合的优势

在实际开发中，很多情况下我们需要根据特定的条件生成不同的样式。例如，我们可能希望根据不同的屏幕尺寸，或不同的主题模式（如暗模式和亮模式）来应用不同的样式。通过结合使用条件控制和循环控制，我们可以在同一段代码中实现复杂的逻辑，使代码更加干净和高效。

示例案例：根据主题模式导出不同的样式

假设我们要创建一个按钮组件，它在两种主题模式（light和dark）下会有不同的背景色和文字颜色。我们将使用条件控制来检测当前的主题模式，使用循环控制来生成多种按钮样式。

代码示例

首先，我们定义一个主题模式变量以及几个颜色变量：

$theme: 'dark'; // 可以是 'light' 或 'dark'
$colors: (
  light: (
    background: #fff,
    text: #333,
  ),
  dark: (
    background: #333,
    text: #fff,
  ),
);

.button {
  @for $i from 1 through 3 {
    $current-color: map-get($colors, $theme);
  
    background-color: map-get($current-color, background);
    color: map-get($current-color, text);
    
    padding: 10px * $i; // 根据循环生成不同的内边距
    margin: 5px;
    border: 1px solid lighten(map-get($current-color, background), 20%);
    border-radius: 5px;

    // 生成不同的按钮样式
    &-style-#{$i} {
      @if $theme == 'dark' {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
      } @else {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      }
    }
  }
}

代码解析

在上述代码中，我们首先定义了一个名为$theme的变量，用于表示当前的主题模式，并使用一个颜色映射$colors来存储深色与浅色主题的背景色和文字颜色。

• 使用@for循环，我们在样式中生成了三个不同层级的按钮。每个按钮的padding都是根据循环的索引动态变化的。

• 我们使用map-get函数从颜色映射中提取当前主题的颜色值，确保每个按钮样式都应用了正确的颜色。

• 通过条件语句@if，我们为按钮增加了不同的box-shadow样式，这样在深色和浅色主题下，按钮将表现出不同的视觉效果。

输出效果

根据不同的主题模式，生成的CSS可能如下所示：

.button-style-1 {
  background-color: #333;
  color: #fff;
  padding: 10px;
  margin: 5px;
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.button-style-2 {
  background-color: #333;
  color: #fff;
  padding: 20px; /* 10px * 2 */
  margin: 5px;
  border: 1px solid #444;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* 以此类推... */

小结

通过这篇教程，我们了解了如何使用条件控制与循环控制结合来灵活生成不同的样式。这种方法在实际开发中可以大幅提高CSS的重用性与可维护性。在下一篇文章中，我们将进一步探索如何编写动态样式，以便更加灵活地处理复杂的样式需求。希望大家在实际项目中能灵活应用这些技巧，让你的SASS/SCSS代码更加简洁高效。