Why Use Sass?

Syntactically Awesome Style Sheets, or SASS for short, is preprocessor for CSS. It claims to be the most mature, stable, and powerful professional grade CSS extension language in the world. It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2016. But what does it mean to be a CSS preprocessor? According to MDN, CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. There are several CSS preprocessors available. Some of which include -

• SASS
• LESS
• Stylus

Sass

Now coming to SASS, it is the most popular CSS preprocessor. It is also used by Bootstrap which is undoubtedly one of the most popular and widely used frontend frameworks available out there. It has 14.6k stars on GitHub.

Advantages of SASS over CSS

CSS is an amazing language, developed in the early days of web, it revolutionized the way websites were designed and styled. It allowed developers to design beautiful and eye-catching websites.

But when the web grew older and CSS files became larger and unmaintainable, we felt the need for a more advanced and modular solution and that's why the concept of CSS preprocessors came to life. SASS makes it easier for developers and web designers to style websites more efficiently while keeping it maintainable and modular.

Moreover, SASS is fully compatible with CSS. This means that all the features which can be used in CSS, can also be used in SASS. Additionally, SASS has some more features which CSS doesn't have like CSS nesting, mixins and functions.

This is a simple CodePen demonstrating SASS Nesting.

Sass is compiled to CSS as the browser can't parse Sass natively. Sass has another amazing feature called partial files. Partial files are special files in Sass which start with an underscore (_). These partial files are ignored by the Sass compiler and act like modules. These modules can then be imported into the main Sass file using @use. This allows developers to maintain large stylesheets effectively by dividing it into smaller and modular partial Sass files. The main Sass files can be then compiled into a single CSS file to provide styling to the website.

Web Design by Pixabay

Sass comes with six built-in modules namely, sass:math, sass:color, sass:list, sass:meta, sass:selector and sass:string.

• sass:math: It contains several maths-related functions like ceil, floor, round, log, sqrt, sin, tan and constants like pi, e and epsilon.
• sass:color: It contains various functions to manipulate colours like scale, adjust, invert, lighten and many more.
• sass:list: It contains functions to manipulate lists like append, index and length.
• sass:meta: It contains functions that can help to customize the way Sass works.
• sass:selector: As the name suggests, it has functions to get details about the css selectors used and manipulate them.
• sass:string: It contains functions to manipulate string data type such as index, insert, split, to-upper-case, etc.

Using Sass in JavaScript

To use Sass in your project, you need to install the sass package from NPM.

npm i -g sass

After that, compile the Sass code to CSS using the command below.

sass <input.scss> [output.css]

Or if you want to watch a file for changes and compile all the changes to CSS immediately, you may use the -w or --watch flag, as shown below.

sass <input.scss> -w [output.css]

Now, you can use the compiled CSS file in your html file.

NodeJS by RealToughCandy.com

This is the way to use Sass in Vanilla JS. If you are using any meta framework like Gatsby or Next, for your project, you might not need to compile the Sass file yourself. You can directly use your Sass file because under the hood your meta framework compiles the Sass file for you.

For example, if you are using NextJS, you can use Sass directly by making necessary changes to next.config.js. For more details on this, please refer to the official documentation.

Syntaxes of Sass

You must be wondering, what do I mean by syntaxes here. And this is not a fancy heading.

Sass (really) has two syntaxes. First one is the SCSS syntax, which is similar to CSS. It uses the file extension .scss.

.hero {
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;

    &_img{
        object-fit: fill;
    }

    &_heading {
        font-size: 18px;
    }
}

The second one is the Sass syntax, and it uses the .sass file extension. It was the original syntax of Sass and, the reason why Sass is called Sass. It uses indentation in place of curly braces, similar to python (if you are familiar with it) and omits the semicolon ;. The code above can be written in sass syntax as shown.

.hero 
    display: inline-flex
    position: relative
    height: $button-height
    border: none

    &_img
        object-fit: fill


    &_heading 
        font-size: 18px

Both the syntax provide the same features. But generally, the SCSS syntax is more preferred as it has CSS-like, and hence, is easier for developers to adapt to this syntax.

Conclusion

Sass is a great option for designing large and complex systems. It makes the work of a web designer, a piece of cake.

Photo by Sigmund on Unsplash

But since every tool has its own use case and limitation, similarly, Sass, too, is not profitable in certain uses cases. Like if you have a, really, small project, you may choose not to use Sass as it would take time to install and set up Sass.

What do you think about the future of Sass? Let me know in the comments.

Hope you liked my post. Thank you for reading.

Originally published at jishnupsamal.me