CODEWITHSUNDEEP
cssvariablessasscolorsscss-mixins
Raul Blosfeld Wohnrath
Raul Blosfeld Wohnrath

Reputation: 191

How to use attribute as property value in SCSS

I'm trying to create a dynamic solution for colors in SCSS

The idea is use an attribute value in markup as property value in SCSS.

The example of the idea:

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

And in SCSS

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

Is this even possible ? Do you ever try to build something like this ? Thanks for the help!

Upvotes: 0

Views: 2032

Answers (2)

Eliran Malka
Eliran Malka

Reputation: 16263

you don't even need SCSS - do it with CSS custom properties!

p {
  color: var(--text-color) !important;
}
<p style="
  --text-color: #00ff6e;
"> Sample </p>

note that even though custom properties have wide support in evergreen browsers, internet explorer's support is entirely lacking at the moment (edge has full support starting version 16).

you may be tempted to attempt the attr() function, but it'll fail in this case; its value is always treated as a CSS string.
furthermore, according to MDN, it only has strong support within the content property, and while the attribute-name parameter has consistent behavior, support for <type-or-unit> is sparse.

Upvotes: 2

Andrew
Andrew

Reputation: 106

I'd never have a reason to do this, especially if I can add a reusable class that sets: 

.text-color {
  color: $color;
}

Upvotes: 0

Related Questions