Sass

[Dilip]

Which one is your favourite, CSS or Sass? I think Sass has completely taken over the CSS scene. It is very easy to deal with Sass than CSS.

Saves time and makes things a lot easy to control.

 

[Arantor]

And yet many of Sass's advantages (particularly variables, though calculations are too) are now achievable in native CSS too.

 

[Cory]

I'll stick with CSS since I know nothing about SASS and CSS is what I grew up using.

 

[Arantor]

Well, first up anything in CSS is legal Sass. It's 100% compatible like that, and is designed to be a superset rather than a sideways move.

The main things to care about:
* Sass by default ships as a bunch of files and you run a tool to combine them together and minify them for performance.
* Sass is all about the variables - so you define a colour once and reuse it everywhere by referencing it with a name. Modern CSS now has this too, but Sass had it *years* before.
* Sass has features about reusing things, e.g. you can do what Bootstrap does under the hood (since Bootstrap uses Sass internally), whereby define a style in CSS normally and just add an @include to mark that section as 'only include this in the md size and up' without having to remember what the size points are etc. and do all kinds of macro stuff to roll your own functions to avoid writing lots of CSS by hand.
* Tools exist to sit on top of your Sass and process it out to remove styles that you're not actually using, but that requires the tools having access to the templates etc. to review what ids and classes they're actually using.
* Tools also exist to take a collection of SVG images, build an image font and also spit out the required Sass to include for the rest of your project to use them as an icon font - just the way Font Awesome does it.

 

[Cory]

Well, first up anything in CSS is legal Sass. It's 100% compatible like that, and is designed to be a superset rather than a sideways move.

The main things to care about:
* Sass by default ships as a bunch of files and you run a tool to combine them together and minify them for performance.
* Sass is all about the variables - so you define a colour once and reuse it everywhere by referencing it with a name. Modern CSS now has this too, but Sass had it *years* before.
* Sass has features about reusing things, e.g. you can do what Bootstrap does under the hood (since Bootstrap uses Sass internally), whereby define a style in CSS normally and just add an @include to mark that section as 'only include this in the md size and up' without having to remember what the size points are etc. and do all kinds of macro stuff to roll your own functions to avoid writing lots of CSS by hand.
* Tools exist to sit on top of your Sass and process it out to remove styles that you're not actually using, but that requires the tools having access to the templates etc. to review what ids and classes they're actually using.
* Tools also exist to take a collection of SVG images, build an image font and also spit out the required Sass to include for the rest of your project to use them as an icon font - just the way Font Awesome does it.

Great overview of SASS. I might dabble with it someday, but I think I really need to focus more on JavaScript frameworks than CSS.

 

[Dilip]

A lot of front-end developers are so addicted to Sass, they completely renounced CSS. I know a few whose bread and butter depend on such work. They are so invested in Sass that they almost have no respect for CSS.

 

[Arantor]

Even though Sass literally turns into CSS... -sigh-

 

[ten thousand]

Setting up Sass compilation is one of the first things I do in any project I work on. There are just too many quality of life features I miss without it. This will sound dumb but nesting definitions is my must-have feature. There are plenty of other wonderful Sass features (modules, variables, mixins, operators), but being able to write:

.content {
  border: 2px solid #c6c6c6;

  .nav {
    font-weight: 600;
  }
}

... instead of ...

.content {
  border: 2px solid #c6c6c6;
}

.content .nav {
  font-weight: 600;
}

... is just too good. It flows so well, feels so much cleaner.