Yesterday, I mentioned that I love CSS variables. Today, I thought I’d explain what they are and how they work, for those who aren’t already familiar with them.
Let’s dig in!
How to define CSS variables You define a CSS variable by typing its name with a leading double-dash (--).
It uses the same syntax a typical CSS property—--{name}: {value}—and must be defined on an element.
p { --size: 1rem; } You can then use your CSS variable just like you would any other property value by wrapping it in var().
Why not use SASS?
Let me reverse that question and ask: Why use Sass?
Sass is lovely. I love being able to split my CSS into multiple files in the same way I would split the rest of my code. It’s really nice for making more maintainable CSS on larger projects.
My portfolio would’ve been hell to make without SASS helping with the organization.
CSS can already be split into multiple files though.
So why not just use CSS?
Sass is to CSS what jQuery is to Javascript.
It has variables as well as modules, easily nestable definitions, and inheritance so that you can have base classes
CSS has variables, modules and nesting.
By inheritance, do you mean the
extendskeyword? Because if so, it just seems like going further down the misguided BEM path instead of picking better selectors.The same reason you don’t start new projects using jQuery.