CSS vs SASS: What should you use?

This weekend I finally took some time to sit down and get my head into SASS (or SCSS). It is something I have been meaning to do for months now but have kept putting it off for one reason or another. Happy with coding in regular CSS and not wanting to change I suspect. Anyway, I took the plunge and thought I would share some initial thoughts with you about what you can expect if you too finally give it try — if you haven’t already!

Variables

Erm. Okay. So this is a big one! I don’t even know really how I have managed without them for all these years. What is available to me in PHP and JS is now available in CSS. Wow indeed. No more trying to remember that hex code for the correct pink. Just set a variable ($pink) and stick it anywhere you want. Boom! The correct hex code is automatically added all lovely and pink for you.

Nesting

I wasn’t sure about this at first. I am used to writing my CSS in a condensed, one line format. So even going back to a more expanded view was odd for me but doing that and then changing to the nested format seems alien to me. But after an hour or two, I started to come around to it. It makes sense. It feels more like HTML and there are a lot of plus points not least because you start to automatically write cleaner, shorter code.

Referencing

This is quite cool. When nesting, you can use the ‘&’ symbol to reference the parent element which again starts reducing your code and in turn the strain on your fingers. Little things like this will no doubt really make a difference in the long run.

.element {
background-color: pink;
&:hover { background-color: pink;}
}

Mixins

I haven’t played around much with these bad boys but I can see the power of them. They are a bit like variables but include larger amounts of code. For example, see below in the example we have saved a full border style in a mixin called ‘mymixin’. Then we can simple @include it where needed.

@mixin mymixin() {
border: 1px solid pink;
}
.element {
@include mymixin();
}

These are just a few of the things I’m sure to find out in the next few weeks and months of using SASS so I will likely update this article with some additional things in the near future.

In the meantime, please leave me some comments as this is my first post on medium and I am planning to write frequently from now on so would love some feedback.

Hope you enjoyed it!