Question

我有一系列构成网格的a代码（每个a都是一个类.portfolio-grid-item）。

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

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

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

e.g。

归类为.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%);
        }
    }
}

根据CSS类更改SCSS变量

2 个答案:

更新

和demo