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)