You are here
Home > Technology > Sassy Css – The Valuable Benefits You Need To Know

Sassy Css – The Valuable Benefits You Need To Know

Sassy CSS Benefits you need to know

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:

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.

Sassy CSS variables

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.

Sassy CSS uses mixins

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.

Sassy CSS partials

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

Sassy CSS mixin 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.

Sassy CSS variable 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.

Sassy CSS Imports

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.

Sassy CSS generated CSS

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.

Sassy CSS Extending

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

Sassy CSS Extend compiled CSS file

Using Functions

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

Sassy CSS add functions partial file

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

Sassy CSS Functions File

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

Sassy CSS calling the Function

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

Sassy CSS Function Compiled CSS file

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!

Dirk Strauss
Dirk is a Software Developer and Microsoft MVP from South Africa. He loves all things Technology and is slightly addicted to Twitter and Jimi Hendrix. Apart from writing code, he also enjoys writing human readable articles. "I love sharing knowledge and connecting with people from around the world. It's the diversity that makes life so beautiful." Dirk feels very strongly that pizza is simply not complete without Tabasco, that you can never have too much garlic, and that cooking the perfect steak is an art he has yet to master.

Similar Articles

Top