根据 CSS 类更改 SCSS 变量 [重复]

Question

我有一系列 a 标记组成一个网格（每个 a 是一个带有 .portfolio-grid-item 类的块）。

每个.portfolio-grid-item 包含多个div 和heading 元素，并通过变量($grid-color: $blue;) 使用默认颜色。

我正在尝试创建一个 SCSS 规则来执行以下操作：

• 检查是否为a 标记分配了其他类。
• 如果有其他类，请将默认颜​​色变量替换为新的。
• 如果不是，则回退到默认值。

例如

分类为.portfolio-grid-item .orange 的元素应该将$grid-color: $blue 替换为$grid-color: $orange;

我尝试过使用mixin 和if 语句，但我以前从未这样做过，我不确定该方法是否正确或受支持。

我的笔在这里：http://codepen.io/anon/pen/EjwarE

任何建议将不胜感激！

更新：

简单地说（我知道这不是真正的代码，这只是我的目标逻辑，希望这会有所帮助！）：

// Default
$grid-color: $blue


// Statement
if HTML element has class = `.orange`

// Change the following variable
$grid-color: $orange

这个想法是，这将一次性覆盖 所有 $grid-color 实例

Answer 1

这更符合您的需要。我确信它可以改进，但我使用了一个颜色值图，我循环通过它来产生你的颜色变体。

我没有使用 if 语句纯粹是因为默认情况下我修改了您的主要元素 CSS 以包含蓝色背景作为标准。通过这种方式，我们的循环只需要生成映射的其他颜色，并且样式会通过您添加到该元素的额外类来覆盖。

SCSS：

//set your base colours
$colors: (
  green: green,
  blue: blue,
  orange: orange
);

//loop through your map and apply colours to the mapped values. This overrides the default where the additional class is applied. 
@each $colors, $specific in $colors {
  .portfolio-grid-item.#{$colors} {
    background: $specific;
  }
}

您的投资组合项目：

// Gird Sizings
.portfolio-grid-item {
  height: $grid-item-height;   
  position: relative;
  text-decoration: none;
  float: left;
  width: 33.33%;
  //set default
  background: $grid-color;
}

工作示例 - Codepen

使用此方法，您可以通过调整地图以包含更多值来将颜色应用于字体等。例如，您可以在地图中同时映射背景和字体颜色。如：

//set your base colours
$colors: 
  (green, white, green),
  (orange, white, orange);

//loop through your map and apply colours to the mapped values. This overrides the default where the additional class is applied. 
@each $color, $text, $bg in $colors {
  .portfolio-grid-item.#{$color} {
    background: $bg;
    color: $text;
  }
}

然后，您可以将悬停添加到循环中，并根据需要使映射到 $bg 的背景变暗。据我了解，这应该达到预期的结果。

Answer 2

好吧，你可以这样做：

@mixin gridbg($bg) {
   @if $bg == blue {
   background: $blue;
 } @else if $bg == green {
   background: $green;
 } @else if $bg == orange {
   background: $orange;
 }
}

.orange {
  @include gridbg(orange);
}

.green {
  @include gridbg(green);
}

.blue {
  @include gridbg(blue);
}

更新

上面只是一个简单的例子，但是你可以用 mixins 做更多的事情： 这是一个预览：

.orange {
    @include gridbg(orange);
    h3 {
      color: $grid-color
    }
    h5 {
      color: white;
      background: $orange;
    }
    &:hover {
        @include gridbghover(orange);
        h3 {
          color: $grid-color
        }
        h5 {
          color: white;
          background: darken($orange, 20%);
        }
    }
}

还有一个demo