3 Reasons Why SASS is AWESOME
SASS is a widely used CSS tool in the web development industry. It is loved by many for its ability to organize code and make it more DRY. Of course I don’t mean dry as in *yawn*, in fact, I hear all the cool devs are using it. No, its many features help to keep developers from repeating themselves (Don’t Repeat Yourself) and to shorten the number of lines in your style sheets.
If you’re not already using this popular tool, I would recommend you hop on board. Here are just a few reasons why.
This neat feature checks off both boxes: it creates more organized looking code and it saves space. It may look odd to begin with but you’ll be dazzled with its simplicity in no time!
One word of warning with nesting: if you’re designing a responsive website you’ll need to watch out for specificity. In the example above, if you wanted to make a change on the <a> tags in a mobile view, you’ll need to be just as specific as you were in the original styles.
Partials are another great way to make sections of your code easy to find. The idea behind partials is to break up your code into sections based on typography, global styles, headers, footers, etc. Each partial will have its own .scss sheet which are joined together on the main style.scss by using the import function as seen below.
Just remember to import each partial in the order that it appears on the page. For example, the footer should always be the last to be uploaded. This ensures that the most important styles are loaded first.
Can’t remember the six digit hex codes for the colours on your website? Well, luckily you don’t have to with SASS variables! Variables are established at the beginning of the .scss document. They hold any value such as font size, font family, colour value, etc. It’s not only a great tool for people like me who have a bad memory, but it also saves a ton of hassle when the design colors change halfway through the project. It only needs to be changed at the variable level!
Of course there are lots of other fun features in SASS, popular ones being the @mixin and @extend functions, but nesting, partials, and variables are reason enough to join the community of SASSy coders. They’re super easy to use right from the start. But most importantly, think of all the sassy puns in your future…
If I have at least convinced you to try it out, check out my friend Bill’s article on setting up your SASS files.