Generate CSS classes dynamically based on variables - SCSS

Question

I have color variables (example):


// _colors.scss
:root, * {
  --color-primary-50: 1,1,1;
  --color-primary-100: 2,2,2;
  --color-primary-200: 3,3,3;
}

And I want to generate classes based on the variables, for example:


// _background.scss
.bg-primary-50 {
  background: rgb(var(--color-primary-50));
}

.bg-primary-100 {
  background: rgb(var(--color-primary-100));
}

.bg-primary-200 {
  background: rgb(var(--color-primary-200));
}

I want to simplify my future modifications if I need to change or add new colors and dynamically populate my _background file with classes based on _colors variables.

It seems like a lot of monotonic work. Is there any way to get this result? Perhaps I should change my file structure?

Kunal Tanwar · Accepted Answer · 2022-05-15 19:56:29Z

11

use @each loop. Instead of creating the vars in :root add those in a single var (see below example)

$colors : (
  "primary-50":  "1,1,1",
  "primary-100": "2,2,2",
  "primary-200": "3,3,3",
);

@each $color, $value in $colors {
    .bg-#{$color} {
        background-color: rgb($value);
    }
}

the above code compiled into

.bg-primary-50 {
  background-color: #010101;
}
.bg-primary-100 {
  background-color: #020202;
}
.bg-primary-200 {
  background-color: #030303;
}

And for CSS --variables

:root {
    @each $color, $value in $colors {
        --color-#{$color}: rgb($value);
    }
}

and 💥 you have CSS Variables

:root {
  --color-primary-50: #010101;
  --color-primary-100: #020202;
  --color-primary-200: #030303;
}

Like you mentioned in your comment "will this solution work for the light and dark modes?" for that you can do something like this

html[data-color-mode="dark"] {
  $dark-mode-colors: (
    "primary-color-50": "0, 0, 0",
    "primary-color-100": "1, 1, 1",
    "primary-color-200": "2, 2, 2",
  )

  @each $color, $value in $colors {
    .bg-#{$color} {
        background-color: $value;
    }
  }
}

// change your color scheme as you prefer method will remain the same
html[data-color-mode="light"] {
  $light-mode-colors: (
    "primary-color-50": "0, 0, 0",
    "primary-color-100": "1, 1, 1",
    "primary-color-200": "2, 2, 2",
  )

  @each $color, $value in $colors {
    .bg-#{$color} {
        background-color: $value;
    }
  }
}

edited May 15, 2022 at 19:56

answered May 15, 2022 at 17:55

Kunal Tanwar

1,2991 gold badge13 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anton S. Over a year ago

Thank you for the answer! Question, will this solution work for the light and dark modes?

Kunal Tanwar Over a year ago

See the updated answer!!

Anton S. Over a year ago

As far as I understand this solution, we need to create SCSS variables first, then get our CSS variables. Am I right? Sorry, I just want to make sure that I understand how it works :)

Kunal Tanwar Over a year ago

yes first you need to create scss variables and then you will get your css variables then you can use those css variables like you mentioned in your question.

Shautieh Over a year ago

That's exactly what I needed. I use hex values for colours though, and needed to use --color-#{$color}: #{$value} for my css variables to work. $valueis not enough and the #{} is required here (it is not necessary for the classes)

Collectives™ on Stack Overflow

Generate CSS classes dynamically based on variables - SCSS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related