DEV Community

Andrei Andreev
Andrei Andreev

Posted on

2 1

Organized, clean approach to SCSS variables

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!

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay