Organized, clean approach to SCSS variables

twitter logo ・1 min read

I am a lazy man with a lot on my plate. I like clarity and efficiency, and I dislike memorizing things.

There's an approach to SCSS variables I use in all my projects -- an approach which works with my mind's habits and saves me typing.

An example of the technique, applied:

p {
  color: c(body-text);
}

The data structure and SCSS function making this possible:

// the data map
$colors: (
  body-text: rgba(#000, 0.9),
  body-link: #33c,
  // etc.
)

// the function
@function c($the-color) {
  @return map-get($colors, $the-color);
}

I use this with colors c(color), with breakpoints bp(phone-landscape), with "magic numbers" - n(w-desktop-max-width) etc.

DRYs the project, keeps the namespace clean and makes it easy to look stuff up.

Happy coding and let me know if you use similar tiny time-savers!

twitter logo DISCUSS
Classic DEV Post from May 10

Discuss: GitHub Special Event

GitHub is holding a "GitHub Special Event" today. Let's discuss what we're thinking leading up to it + while it's happening <3

Andrei Andreev profile image
Director of Web Development at a financial institution. I am a lazy man with a lot on my hands.
Join dev.to

Better understand your code.