Loading...

Skip to main content

Clean CSS variables using SASS maps

Tagged:

Maps in SASS/SCSS allow us to store pairs of keys and values, and make it easy to look up a value by its corresponding key. We can use a SASS map to generate variables for our projects.

Creating the SCSS map

First, let's create our map. We have a list of 5 font weights, each with a name and a value.

_typography.scss
$font-weights: ( "regular": 400, "medium": 500, "semibold": 600, "bold": 700, "extrabold": 800, );

Generating the variables

Now, we just need to generate our variables. We want each variable to follow the same naming convention, so we can make it really simple:

_typography.scss
:root { @each $weight, $value in $font-weights { --font-weight-#{$weight}: #{$value}; } }

The code above will compile to this:

_typography.css
:root { --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; }

Usage

To use my variables, I can simply write font-weight: var(--font-weight-semibold) (or another weight from my map).

p { font-weight: var(--font-weight-regular); }

This snippet has been useful when generating typography styles, as well as colour palettes. It adds a few lines of code but I think it makes it more readable, and it guarantees that your variable names are all consistent. Ultimately, this is really a matter of personal preference. For our font weight variables, here's the difference between our code and plain old CSS:

_typography.css
:root { --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; }
_typography.scss
$font-weights: ( "regular": 400, "medium": 500, "semibold": 600, "bold": 700, "extrabold": 800, ); @each $weight, $value in $font-weights { --font-weight-#{$weight}: #{$value}; }

To see an example with nested maps, have a look a the colour palette demo below.

Demo

import "./styles/styles.scss";

export default function App() {
  return (
    <main>
      <ul className="button-group">
        <li>
          <button className="button-primary">Primary</button>
        </li>
        <li>
          <button className="button-secondary">Secondary</button>
        </li>
      </ul>
    </main>
  );
}