Looking to transform a SCSS associative array into variables and classes?

Question

Looking to transform a SCSS associative array into variables and classes?

I need guidance on handling syntax for unquoting, declaring variables, and concatenating strings within a for loop. My objective is to utilize a map to generate color variables and corresponding classes for styling elements with font-color and background-color properties.

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600');
@for $i from 0 to length($color-collection) {


//generate individual variable assignments for each color, e.g. $white: #FFFFFF;
//create CSS classes based on variable names with specified styles, e.g. .bg-color-white {background-color: $white;}

}

css html sass

Answer 1

Answer №1

To start, it's important to utilize @each rather than @for.

Furthermore, within the loop itself, you can directly access the two necessary variables - one representing the key and the other the value.

In addition, we can employ Sass interpolation to incorporate the variable into a class name and unquote the value in a selector. Another option is using unqote($color-value), or simply inputting color values in the array without quotation marks.

Check out the example below:

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600');
@each $color-name, $color-value in $color-collection {

  .bg-color-#{$color-name} {
    background-color: #{$color-value};
  }
//define a variable for each color name, such as $white: #FFFFFF;
//establish a class for each variable name with a style, like .bg-color-white {background-color: $white;}

}

If you are using libsass, here is some code that accommodates older Sass syntax:

$color-collection: ('white' '#FFFFFF'), ('black' '#000000'), ('goldenrod' '#F59600');
@each $color in $color-collection {
  $color-name: nth($color, 1);
  $color-value: nth($color, 2);
  .bg-color-#{$color-name} {
    background-color: #{$color-value};
  }
}

Answer 2

To start, it's important to utilize @each rather than @for.

Furthermore, within the loop itself, you can directly access the two necessary variables - one representing the key and the other the value.

In addition, we can employ Sass interpolation to incorporate the variable into a class name and unquote the value in a selector. Another option is using unqote($color-value), or simply inputting color values in the array without quotation marks.

Check out the example below:

$color-collection: ('white': '#FFFFFF', 'black': '#000000', 'goldenrod': '#F59600');
@each $color-name, $color-value in $color-collection {

  .bg-color-#{$color-name} {
    background-color: #{$color-value};
  }
//define a variable for each color name, such as $white: #FFFFFF;
//establish a class for each variable name with a style, like .bg-color-white {background-color: $white;}

}

If you are using libsass, here is some code that accommodates older Sass syntax:

$color-collection: ('white' '#FFFFFF'), ('black' '#000000'), ('goldenrod' '#F59600');
@each $color in $color-collection {
  $color-name: nth($color, 1);
  $color-value: nth($color, 2);
  .bg-color-#{$color-name} {
    background-color: #{$color-value};
  }
}

Looking to transform a SCSS associative array into variables and classes?

Answer №1

Similar questions

Tips for arranging two columns side by side with the .each method in Rails

Tips for displaying active status on dropdown values when clicked with Angular8

Issue resolved: Mysterious fix found for background images not displaying in NextJS React components

Customize the Address Bar with Google Extension

What steps can I take to fix the issues on Safari that are being caused by three js on my website?

Strategies for managing recurring identical HTML content

Can you explain the concept of Single Page Application (SPA) in simple terms?

What is the best method for efficiently wrapping contents within a div container?

Playing back an Audio object using JavaScript

What are some ways to improve the precision of longitude and latitude data?

Xpath merging HTML elements or nodes

Dividing HTML and JavaScript using Vue

Using HTML5 date input on an android browser

What's causing jQuery to make the entire page malfunction?

Is there a way to break on a hyphen instead of breaking on the last letter?

Struggling to make `align-items="baseline"` function properly

The navigation bar initially fills the width of the screen, but does not adjust to match the width of the table when scrolling

The front end button stubbornly refuses to comply and redirect to another page

Unable to correctly declare and display UTF-8 character within JSON syntax

Adjust the size of the pagination for subsequent pages in posts