Week 176 was posted by Charanjit Chana on 2021-03-08.
SASS is what it always felt like CSS should have been. It makes your code more flexible, reusable and manageable. I've been using SASS / LESS in some for well over a decade but in reality I've never really pushed what it can do.
As part of some prototyping at my last job I did take advantage of breaking the CSS down into smaller files which made it a lot more manageable. Other than that, I don't recall many times when I've even taken it that far.
The things I love about SASS
SASS Variables
If this is all that SASS offered, it would still be a good step up from plain old CSS. Create your variable and when you need to change the value it changes everywhere. With CSS (before CSS variables), you would do a lot of searching or making use of your IDE's find and replace functions.
Using variables in your calc() functions is a little complicated as you need to wrap them with #{$variableName}. I've only really taken the time to understand CSS variables, but they're still an afterthought for me at this point.
Nesting
So variables are great, but nesting is what I love most about SASS. It's much easier to keep track of where and how things are styled in your CSS file. Variables and nesting are the two bits of SASS I use without hestiation.
RGBA
I use the rgba() property a lot these days and recently found out you can pass in keywords or variables. SASS takes those and converts them into RGB values.
color: rgba(silver, .5); //rgba(192, 192, 192, .05)
Things in SASS I need to take more advantage of
Nested media queries
I recently found out that you could nest media queries in SASS but I haven't really taken advantage of it very often. If I hadn't figured out a more efficient way to take care of dark mode with CSS variables and I was still relying on SASS variables then it would be a no brainer.
Having said that, it could make managing things like responsive breakpoints a little easier to track. I'm not sure, but perhaps something I'll investigate when I have some time.
Mixins
With a bit more thought, I'm sure I could find some really good uses for mixins but a lot of the CSS I've written over the past few years is simple enough to have avoided them. In reality, I pretty much forgot about them until I saw this video from Kevin Powell:
As part of another project I'm working on, I'm going to refactor the CSS and see where I can make use of some mixins. Once that's complete, I'm going to look at the possibility of re-engineering 1 Thing A Week for consistency and as part of that I'll do the same with the CSS. This site has one of the largest CSS files I've created so some love and attention will go a long way.
Are there other aspects of SASS I should be looking at?
Tags: css, development, sass