css - 我正在尝试在 SASS 中创建颜色变量，它将根据添加到父元素的类来设置嵌套元素的样式

Question

从样式的 Angular 来看，我可以实现我需要的，但感觉我在重复很多代码。

我已经创建了一个非常小的例子来说明我试图在更大范围内实现的目标。每个难度级别作为与之关联的颜色，用于不同的事物，如字体颜色、边框颜色、背景颜色等。

CodePen

<div class="lesson easy">
  <h2>Easy Lesson</h2>
  <p>Description</p>
  <button>More Info</button>
</div>

<div class="lesson medium">
  <h2>Medium Lesson</h2>
  <p>Description</p>
  <button>More Info</button>
</div>

<div class="lesson hard">
  <h2>Hard Lesson</h2>
  <p>Description</p>
  <button>More Info</button>
</div>

//variables that relate to a specific difficulty
$easy: green;
$medium: orange;
$hard: red;

//base styles
.lesson {
  border: 2px solid black;
  width: 200px;
  float: left;
  margin-right: 10px;
  padding: 0px 20px 20px 20px;
}

button {
  border: 0;
  padding: 10px;
}

//specific styles, is there an easier, cleaner way to write this using a mixin that will allow me to use it on a much larger scale with even more nested HTML elements?
.lesson {
  &.easy {
    border-color: $easy;
    button {
      background: $easy;
    }
    p {
      color: $easy;
    }
  }
  &.medium {
    border-color: $medium;
    button {
      background: $medium;
    }
    p {
      color: $medium;
    }
  }
  &.hard {
    border-color: $hard;
    button {
      background: $hard;
    }
    p {
      color: $hard;
    }
  }
}

Answer 1

您可以在 map 上编写所有变体并迭代它的属性以生成所有类组合。

$colors: (
  'easy': green,
  'medium': orange,
  'hard': red
);

@each $name, $color in $colors {
  .lesson.#{$name} {
    border-color: $color;
    button {
      background: $color;
    }
    p {
      color: $color;
    }
  }
}