Sassy CSS – Let’s start off by clearing up a few things. You will find the term Sass and Scss used a lot. These are the two kinds of syntax out there for Sass. You will find that .sass files do not contain semicolons and curly braces. On the other hand .scss files do contain curly braces and semicolons. It is newer and personally, I find it easier to read. This article focuses on Sass in the context of Scss.

Sassy CSS makes CSS easier

Scss is fully compliant with CSS. So all your old code will still continue to work. If you are wondering which is better to use, Sass or Scss, have a look at this in-depth comparison.

Looking for something else? Try these links instead:

• Sass CSS – This Awesome Extension Will Make You Sassy
• Chrome Developer Tools – Easy Web Debugging You Need to Know
• Struggling With Imposter Syndrome? How To Think And Overcome

As I mentioned earlier, I prefer Scss. For me, these are the reasons Scss makes for Sassy CSS.

Being able to use Variables

I love the ability to use variables in my scss files. You can create variables for whatever value you like. A nice example of this is to use a variable to store the primary color of your site.

Sass allows Nested Syntax

That’s right, you can nest your syntax as needed. This allows a cleaner method for targeting elements. It allows me to organize my code better which in turn improves the structure.

You can include mixins

Mixins allow you to use the @mixin keyword to define a common set of properties. I have created a mixin called primary-font and specified default values for the parameters.

If I don’t specify any parameters (as in the h1 selector) the mixin will use the default parameter values.

If I do specify parameter values (as in the h2 selector) the values I provide will override the default parameter values.

Modularize code using Partials

Partial files are named with a leading underscore. They will therefore not compile to CSS files of their own. In this example, I have created partial files for my variables and mixins.

In the _mixin.scss file I have added the mixin I created earlier. I then deleted it from my custom.scss file.

Looking at the _variables.scss file, you will see that I have added my variables. I have also removed these from my custom.scss file.

Creating partial files is an excellent way to break up your code into more manageable pieces. This is all good and well, but how would one use these? The answer lies in @import.

Importing Partials

The @import keyword allows you to bring the partial files you created earlier into the scope of your main custom.scss file.

The compiled CSS file will look as the screenshot below. You can see that the compiled CSS file has the values specified in the variables. It also has the properties defined in the mixin we created.

Extending

The @extend keyword of Sass allows developers to inherit the properties of one class, in another. If you are familiar with the concept of inheritance, you will understand @extend easily.

Simply put, @extend allows you to reuse all the properties of one class inside another class. I don’t have to duplicate code.

This makes more sense when looking at the compiled CSS file where @extend has been used.

Using Functions

Functions are another very powerful feature of Sass. In my solution I have added another partial file called _functions.scss.

I have created the following function called calculate-padding that simply multiples the two parameters passed to it.

In my custom.scss file, I can call my function to produce a single result for the padding of my primary-caption class.

When I swing back to the compiled CSS, you will see the result of the function in the CSS syntax.

Mixins vs Functions

You might be wondering what the difference is between mixins and functions. Simply put, functions will return a single result for you, while mixins are used apply a list of properties to a class.

Bootstrap 4 is customizable

If you use Bootstrap 4 in your web project, you will be able to change something that does not quite work for you. Think of the default breakpoints that Bootstrap 4 provides. If you need to add another custom breakpoint, you can do this by modifying the Bootstrap files as needed.

Have a look at the Bootstrap 4 documentation on theming.

There is a lot of Community Support

Just Google Sass and bask in the smorgasbord of articles and blog posts on the topic. You can also check out the community page for Sass. There is also the official Sass documentation site you can refer to. Lastly, there are more books on Sass that you can shake a stick at!