# Why Use Sass? By [Jishnu Prasad Samal](https://paragraph.com/@jishnu-prasad-samal) · 2023-07-29 --- 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](https://sass-lang.com/) * [LESS](https://lesscss.org/) * [Stylus](https://stylus-lang.com/) Sass Now coming to SASS, it is the most popular CSS preprocessor. It is also used by [Bootstrap](https://getbootstrap.com) which is undoubtedly one of the most popular and widely used frontend frameworks available out there. It has 14.6k stars on [GitHub](https://github.com/sass/sass). 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 Designing 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 [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 -w [output.css] Now, you can use the compiled CSS file in your html file. NodeJS logo 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](https://nextjs.org/docs/app/building-your-application/styling/sass). 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. But since every tool has its own use case and limitation, similarly, Sass, too, is not profitable in certain use 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_](https://jishnupsamal.me/blog/why-use-sass?utm_source=devto&utm_medium=blog&utm_campaign=why-use-sass-devto) --- *Originally published on [Jishnu Prasad Samal](https://paragraph.com/@jishnu-prasad-samal/why-use-sass)*