Как использовать атрибут в качестве значения свойства в SCSS

Question

Я пытаюсь создать динамическое решение для цветов в SCSS

Идея состоит в том, чтобы использовать значение атрибута в разметке в качестве значения свойства в SCSS.

Пример идеи:

<p text-color="#00ff6e"> Sample </p>

А в SCSS

[text-color="$color"] {
  color: $color !important;
}

Возможно ли это вообще?Вы когда-нибудь пытались построить что-то подобное?Спасибо за помощь!

Answer 1

вам даже не нужен SCSS - сделайте это с пользовательскими свойствами CSS !

p {
  color: var(--text-color) !important;
}

<p style="
  --text-color: #00ff6e;
"> Sample </p>

обратите внимание, что, хотя пользовательские свойства имеют широкую поддержку в вечнозеленых браузерах, в настоящее время поддержка Internet Explorer полностью отсутствует (у edge имеется полная поддержка, начиная с версии 16).

Вы можете испытать желание попробовать функцию attr(), но в этом случае она не удастся; его значение всегда обрабатывается как строка CSS.
более того, согласно MDN , он имеет сильную поддержку только в свойстве content, и, хотя параметр attribute-name имеет согласованное поведение, поддержка <type-or-unit> редка.

Answer 2

У меня никогда не было бы причин для этого, особенно если бы я мог добавить повторно используемый класс, который устанавливает:

.text-color {
  color: $color;
}