Динамически изменить переменную на основе имени класса

Question

Предположим, у меня есть что-то вроде этого:

.object {
  $primary-color: blue;
  h1 {
    font-size: 40px;
    color: $primary-color; 
  }
  p {
    font-size: 20px;
    color: $primary-color; 
  }
}

Теперь у меня будет синий объект.Но скажем, я хочу сделать тот же объект, но красным цветом, было бы интуитивно писать

.object red {
  $primary-color: red;
}

и ожидать, что все $ primary-color изменится на красный, но это недопустимо вSCSS.Я должен написать:

.object red {
  $primary-color: red;
  h1 { color: $primary-color; }
  p { color: $primary-color; }
}

Если я сделаю это таким образом, я все равно смогу сохранить размер шрифта 40px в h1 и 20px в p и изменит все цвета на красный.Однако, как только мой код станет больше, его будет все сложнее и сложнее поддерживать.

Предоставляет ли SCSS какой-либо инструмент, позволяющий сделать эту задачу более модульной и обслуживаемой?

Answer 1

//you can use sass maps - if you want do add new color version of component just add the color to variables to the map.


  //define colors

$product-color-red: red;
$product-color-blue: blue;

//define color map
$colors-list: (
  primary : $product-color-red,
  secondary : $product-color-blue
);

// generate componenent with multiple colors
@each $key in map-keys($colors-list) {
  .mycomponent {
    &.color-#{$key} {
      p {
        color: map-get($colors-list, $key);
      }
    }
  }
}

//effect below, you could change color-xxx class to component variant name
.mycomponent.color-primary p {
  color: red;
}

.mycomponent.color-secondary p {
  color: blue;
}

Answer 2

Конечно, SCSS предоставляет такую ​​функцию, но вы также можете сделать это с помощью CSS с помощью переменных CSS:

.object h1 {
  font-size: 40px;
  color: var(--p, blue);
}

.object p {
  font-size: 20px;
  color: var(--p, blue);
}
.red {
  --p:red;
}
.other-color {
  --p:rgb(15,185,120);
}

<div class="object">
<h1>Blue title</h1>
<p>blue text</p>
</div>
<div class="object red">
<h1>red title</h1>
<p>red text</p>
</div>
<div class="object other-color">
<h1>red title</h1>
<p>red text</p>
</div>