Why You Should Choose SASS

Syntactically Awesome Style Sheets, or SASS for short, is a preprocessor for . It claims to be the most mature, stable, and powerful professional-grade CSS extension language in the world. It was initially designed by and developed by in 2016. CSS Hampton Catlin Natalie Weizenbaum But what does it mean to be a CSS preprocessor? According to MDN, a 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 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. https://codepen.io/jishnupsamal/pen/MWzbxxN?embedable=true Sass is compiled to CSS as the browser can't parse Sass natively. Sass has another amazing feature called . Partial files are special files in Sass that 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 . 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. partial files (_) @use Sass comes with six built-in modules namely, , , , , and . sass:math sass:color sass:list sass:meta sass:selector sass:string : It contains several maths-related functions like , , , , , , and constants like , and . sass:math ceil floor round log sqrt sin tan pi e epsilon : It contains various functions to manipulate colours like , , , and many more. sass:color scale adjust invert lighten : It contains functions to manipulate lists like , and . sass:list append index length : It contains functions that can help to customize the way Sass works. sass:meta : As the name suggests, it has functions to get details about the css selectors used and manipulate them. sass:selector : It contains functions to manipulate string data type such as , , , , etc. sass:string index insert split to-upper-case Using Sass in JavaScript To use Sass in your project, you need to install the package from NPM. sass 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 or flag, as shown below. -w --watch sass -w [output.css] Now, you can use the compiled CSS file in your html file. 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 . For more details on this, please refer to the . next.config.js official documentation Syntaxes of Sass You must be wondering, what do I mean by here. And this is not a fancy heading. syntaxes Sass (really) has two syntaxes. The 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 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. .sass ; .hero display: inline-flex position: relative height: $button-height border: none &_img object-fit: fill &_heading font-size: 18px Both syntaxes provide the same features. But generally, the SCSS syntax is 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 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 ? Let me know in the comments. Sass Hope you liked my post. Thank you for reading. Originally published at jishnupsamal.me