Ok, so most of you will know what Sass is. I’m sure most of you have used it at some point. Some of you may still use it, some may think, what the hell was the fuss.
First up, this isn’t a technical post about Sass. I’m old and experienced enough to realise that there are people out there that can talk about this far more in depth and with more authority than I can and will pull me up on stuff so this is not one of them “how you use it posts”.
Treat it more like a “I’ve finally found a need to use it and wanted to share it” post. Hey it might inspire you to use it too!
I first started using Sass because basically I had to. The project I was helping out on used it so I had to go in and get my hands dirty. Being honest, I had no idea about the variables and mixins and continued to keep declaring font-families, colours and what have you thoughout. The only real thing I used was the nesting selectors. Even then, I seemed to do it wrong. It felt like I was being too specific and often repeated rules for repeating sake.
I remember reading all about Sass on Twitter and blogs and thinking to myself, “What is the point of this”.
…so I ditched it
Fast forward a few months and I was to work with it again. Only this time I was to use the variables a lot more. Mainly because I was told to. It was at this point, it started to make sense but it was too easy to ignore it all and continue writing CSS the old fashioned way. It still felt like a step that really wasn’t needed.
It’s only really recently I’ve discovered why I should use Sass. It’s clever, I get that but nothing I cannot write in a normal CSS file. Is it quicker to amend CSS via Sass? I have a find and replace so again, I’d say probably not a big time saver.
Where it is good is that it makes me think more about how my CSS will be laid out and it helps me keep a tidier CSS file which is something I’ve always had issues with.
The best feature of Sass for me is the nesting of media queries. This keeps everything neat and tidy and ensures I’m not searching through loads of CSS for different breakpoints. For example…
article
{
margin-bottom: $basemargin;
@media screen and (min-width: $bp4)
{
width: 68%;
float: left;
}
}
This basically means that declaring the media point inside the article ensures that when the $bp4 breakpoint is reached, it will introduce the width and the float. It’s called @media bubbling. Adding it here means you can see all your various rules at a glance.
Can it get messy?
Yes, probably. So far, I’ve used it properly on one site…this one. The CSS file wasn’t that big. Plus it’s only me working on it. Would I use it on bigger projects with more than one Front-ender? Yes, for sure. I think rules need to be established and base styles agreed beforehand but I think Sass as a project tool is a great shout.
I’ve got loads more to learn with Sass without doubt. Nesting, Variables and Media Bubbling thus far and loving it.
Just need to get it working in the team environment.