Why use SASS as your CSS Preprocessor?

Writing CSS for large websites can get increasingly difficult to maintain throughout the development process. Repeating styles, long element selectors, vendor prefixes, and a giant CSS file are a few issues that come with writing vanilla CSS.

At some point, you may have heard of SASS. Maybe you thought it would be overcomplicated to use, or at least unnecessary.

Mixins will heavily clean up your code and prevent you from repeating yourself.

Extend

@extend allows you to reuse code inside different selectors, so that you don’t have to target a selector more than once, neither will you repeat yourself. This is perhaps the most useful feature of SASS.

Import

Instead of having one large CSS file or having to make several HTTP requests to different CSS files on your site, you can use @import to divide up your SASS into separate, more manageable files called partials.

//SCSS
@import "partials/header";
@import "partials/footer";

This allows you to keep your code more organized, while only needing one HTTP request after the SASS code is compiled to CSS.