What is the best way to insert an HTML data attribute string into a SCSS mixin using attr()?

Question

What is the best way to insert an HTML data attribute string into a SCSS mixin using attr()?

I'm currently working on setting up a color scheme in SCSS that allows me to use the following HTML structure:

<div class="swatch" data-bg="green">...</div>

In my SCSS file, I have defined a mixin like this:

@function color($key: 'black') {
  @return map-get($colors, $key);
}

With this setup, if I pass background-color: color('green'), it will look for 'green': #009900 in the $colors map and return background-color: #009900; as the CSS output.

However, when I try to pass the value of the data-bg attribute into the color() SCSS mixin, it doesn't seem to work as expected. Here's how I tried to implement it:

.swatch[data-bg] {
  background-color: color(attr(data-bg));
}

This implementation fails to render the background-color line in the CSS at all. Ideally, I would expect the parsing to flow like this:

color(attr(data-bg)) → color('green') → #009900

If you'd like to see the problem I'm facing, check out the "Brown" color swatch on this Codepen: https://codepen.io/rbrum/pen/axZLxw

I would greatly appreciate any assistance with this issue.

html css sass mixins scss-mixins

Answer 1

Answer №1

After encountering this question, I found a creative solution to my problem.

I decided to move away from using data- attributes and instead focused on utilizing class names for elements. When I want a specific background color, I simply assign a class like .bg-amber or .bg-purple. Here are the colors I have defined:

$colors: (
  'black': #000000,
  'white': #FFFFFF,
  // ...
  'amber': #FFBF00,
  'purple': #800080,
  // ...
);

To access a color more efficiently, I created a function that retrieves the value based on the color name:

@function c($key: 'black') {
  @return map-get($colors, $key);
}

Next, I created a mixin that applies a specified color as the background with an optional prefix for CSS attributes:

@mixin bg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    background-color: c($color-name);
  }
}

If I need to use this in a single instance, I would implement it like this:

@include bg('amber', 'bg-');

This code generates the following output:

.bg-amber {
  background-color: #FFBF00;
}

Furthermore, I utilize an @each loop to automate this process for all colors in my list:

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
}

In addition, I introduced a "foreground" variation:

@mixin fg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    color: c($color-name);
  }
}

This feature can be seamlessly integrated into the existing @each loop following the bg() application:

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
  @include fg($color-name, 'txt-');
}

Furthermore, this concept extends beyond background colors to encompass border colors, box shadows, and more.

Answer 2

After encountering this question, I found a creative solution to my problem.

I decided to move away from using data- attributes and instead focused on utilizing class names for elements. When I want a specific background color, I simply assign a class like .bg-amber or .bg-purple. Here are the colors I have defined:

$colors: (
  'black': #000000,
  'white': #FFFFFF,
  // ...
  'amber': #FFBF00,
  'purple': #800080,
  // ...
);

To access a color more efficiently, I created a function that retrieves the value based on the color name:

@function c($key: 'black') {
  @return map-get($colors, $key);
}

Next, I created a mixin that applies a specified color as the background with an optional prefix for CSS attributes:

@mixin bg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    background-color: c($color-name);
  }
}

If I need to use this in a single instance, I would implement it like this:

@include bg('amber', 'bg-');

This code generates the following output:

.bg-amber {
  background-color: #FFBF00;
}

Furthermore, I utilize an @each loop to automate this process for all colors in my list:

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
}

In addition, I introduced a "foreground" variation:

@mixin fg($color-name, $prefix: '') {
  .#{$prefix}#{$color-name} {
    color: c($color-name);
  }
}

This feature can be seamlessly integrated into the existing @each loop following the bg() application:

@each $color-name, $color-val in $colors {
  @include bg($color-name, 'bg-');
  @include fg($color-name, 'txt-');
}

Furthermore, this concept extends beyond background colors to encompass border colors, box shadows, and more.

What is the best way to insert an HTML data attribute string into a SCSS mixin using attr()?

Answer №1

Similar questions

Fixed position navbar toggler

Utilizing Bootstrap 4: Opting for <select> over tabs (<li>)

Turn off hover opacity effect for a specific image

Changing HTML dynamically does not trigger the ng-click event within ng-bind-html

Looking to display or conceal a text box with a date picker based on the selection of a specific value from a drop-down menu

Utilizing Beautiful Soup in Python to Scrape HTML Data from a Search Engine Results Page

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

What is the method for incorporating text below font icons?

Issue with Element's Response to JQuery Click Event

I'm having an issue where my footer is getting cut off when I resize the browser and start side scrolling. Can

What is the best way to input keys without losing focus?

How do I utilize the Material-UI slider's activated (CSS API) feature to conceal the shadows?

Obtain ID and Class details from an HTML webpage using VBA

Aligning two identical components within the same container when triggered by a single click

Mastering the Art of Utilizing content_for and Rendering Partials in Rails 4

Utilizing MUI for layering components vertically: A step-by-step guide

Instructions for inserting an anchor tag into the middle of a <p> element utilizing document.createElement("p")

Using HTML5 input type number along with a regular expression pattern

Text in SVG file misaligned at the edge

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9