SASS vs Plain CSS, and why SASS may Have its Uses

Learn about the difference between plain CSS and SCSS (SASS) pre-processor files.

1489 views

By. Jacob

Edited: 2019-09-11 16:49

Every so often I learn about something that I have put off because I thought it would be complicated or take a much time to learn. SASS is one of those things. It literally took me minutes to setup and start using, which is something I really appreciate, since I really, really, really just want my tools to work so I can get on with my life – I am sure many of you feel the same way.

So, my advice is this: Give it a chance! It is just another skill in our toolbox, and it is one of the faster ones to learn. Other preprocessors include LESS and Stylus

When you first start using SASS, you will find that there is little difference between SCSS files and clean CSS files. SASS simply enables the use of variables and other neat features inside your CSS. If you are skilled with CSS, this has clear benefits. If not, well it might actually cause problems.

Note. SCSS files are just plain CSS files with extra features. SASS will convert SCSS to plain .css.

I consider myself quite an expert with CSS, so much so that I consider totally CSS basic stuff. Today it is even easier than back when we had to design for multiple different browsers. When I code, I already use DRY (Don't Repeat Yourself) principles. CSS is already powerful enough alone to allow this, and IMO does not really need variables or inheritance – although it is nice features to have.

I do think SASS has uses when combined with a high skill level in plain CSS. But, the reality is that many (perhaps most) do not possess the skills. They learn a little here, and a little there, but rarely seem to take the time to systematically learn things. That was also how I learned to code (mostly), and I also think it is the easiest way. Do not learn things until you need them! Right? But, now I have many years of experience, and I even take shortcuts sometimes. Usually I just want things to work, and move on to the next thing.

Some of the best things about SASS:

Ability to have SASS @import and combine SCSS files into a single CSS file.
Variables
Inheritance
@mixins (Similar to JavaScript functions)

You can also do math in your SASS files, but you have to keep in mind that the end result is still a static CSS file, so I do not personally see much point in this. I am pretty used to doing basic math, and I would rather do these basic calculations (about width, font-sizes. etc.) in my head. Not sure how this can be uniquely useful.

Now, feel free to comment if you have something to add. I will try to update the article as I continiue learning more.

Coding SCSS files

As mentioned earlier, SCSS is just CSS with extra features added. To start coding, or converting existing CSS file to a SASS file, simply change the extension on your css file to .scss. You can then start coding with your favorite editor. It seems Eclipse does not support SCSS out-of-the-box, and I am to lazy to find a solution. Instead, I decided to move to Visual Studio Code, since it seems to have more features from the start, and it requires very little initial configuration.

After writing a .scss file, you also need to process it with SASS. By doing this, an actual .css file will be generated. It is this file you need to link from your HTML! I am sure this can be automated in editors like Aptana, Eclipse, and Virtual Studio Code. But, otherwise you will need to remember executing a --watch command in terminal before you start coding on your SCSS file:

sass --watch yourFile.scss YourFileFinal.css --style compressed

Or, like this if you prefer to watch all files inside the css/ directory:

sass --watch css:css --style compressed

Note. The --style compressed part will also minify the CSS, writing everything on one line, removing unnecessary whitespace.

For the skilled developer

SASS is a great tool for the experienced developer, but I would not recommend it for beginners, since it might actually encourage developers to cut corners, and the result can be larger CSS files. Still, you might want to use it just for the minimization – unless you have some other tool for that.

The reason is, you need to be very skilled at CSS to optimize your coding, carefully considering the whole of a project, and applying the DRY principle. For example, instead of having the same color codes or font-family declarations all over the place, simply use a class somewhere at the top. There is no need to use variables in simple cases like that.

A nice aspect is the ability to use @import and have SASS automatically import the file doing preprocessing. This will limit the number of HTTP requests, and speed up your website.

While variables are cool, I think they are only really useful in a limited number of cases. In some cases it might encourage bad practices. One of the best things about SASS is the minimization doing pre-processing, but you can also get that from other tools.

Nesting in SASS

Nesting in SASS seems completely unnecessary, because CSS already does it out-of-the-box. For example, in pure CSS you would write:

header nav ol {
 /* Styling properties goes here */
}

This would select all

's that are placed inside

. As you can see, it does not get much easier. In SASS, you can instead write it like this:

header {
 nav {
  ol {
   /* Styling properties goes here */
  }
 }
}

I know which syntax I prefer. The SASS documentation claims the latter is more readable, but that is not the case. In fact, it makes it harder to write your styles on one line, which is hugely beneficial on larger files.

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable.

If someone does not understand pure CSS, then I do not think they should be allowed to touch the code in the first place.

Extends and Inheritance

Apparently, extends make it possible to copy styles to several different classes. I have not yet tried this, so I am not entirely sure how it would work in my case.

But, based on my understanding, this is again something I do not really see much use for in my case. I think it will just complicate the code unnecessarily, and introduce programming syntax to something that is easily solved by taking the styles, and grouping them in a class. Ideally a developer would consider the entirety of the HTML+CSS, and be able to add/remove classes from markup and CSS files as needed. This might not be possible for everyone, and if you have a less-than-ideal situation where multiple people is messing with the front-end code – without agreeing on a coding style – then it might be helpful for really large projects.

In standard CSS, you would simply write something like this:

.menuLinks, .footerLinks {font-weight:bold;}

Using SASS extends, the above would take up more space in the code, and further complicate things:

%make-bold {display: flex;flex-wrap: wrap;}
.menuLinks {@extend %make-bold;}
.footerLinks {@extend %make-bold;}

This %make-bold is called a placeholder class, because it is only included in the processed CSS file if something is using it via @extend.

To make matters worse, most people seem to prefer having crazy linebreaks/formating of the CSS, which drastically limits the code you can have on the screen. They are making things harder for themselves :-D

I say.. Better do things right from the start, instead of relying on redundant features in preprocessors.

I do recognise this has it uses. For example, if you combine the power of SASS with a high-level of skill with pure CSS, then you will be able to do some really cool things.

Coding SCSS files

For the skilled developer

Nesting in SASS

Extends and Inheritance

Tell us what you think: