Toptal acquires, enhancing custom software leadership

Why Should You Use SASS?

01.04.2019 Marina I.
Leave a Comment
Why Should You Use SASS?

Writing CSS is very important for effective description how HTML elements should be displayed on a web page to define styles, design, layout, and everything needed to create a stunning website. But when you need to work with large and complex sites, you may wonder if CSS can be better.

Sass is one of the most widely used CSS Preprocessors. It has various features to help developers write better and cleaner CSS code. You can check for more details from Sass official website & Github repository.

SASS (Syntaxically Awesome Stylesheets) is a CSS preprocessor that allows you to use variables, math operations, mixins, loops, functions, imports, and other interesting features that make writing CSS much more powerful. In a sense, you can think of SASS as an extended style sheet language because it extends the standard characteristics of CSS, presenting the benefits of a basic programming language. Thus, SASS will compile the code and generate CSS output that the browser can understand. Here are some of the benefits of using SASS:

SASS Has a User-friendly CSS Syntax

SASS has two different syntax: Sass itself and SCSS, the most used. The SCSS syntax is compatible with CSS, so you just need to rename the file .css in .scss. Of course, it doesn’t use anything that SASS provides, but at least it doesn’t take hours to start using SASS.

SASS Allows You to Use Variables

One of the big advantages of using a CSS preprocessor, such as SASS, is the ability to use variables. A variable allows you to store a value or set of values and reuse those variables in SASS files as many times as you want. Easy, powerful and useful. For example, declaring a variable:

$color-grey-mid: #969696;


Its use:

td:nth-child(1) {

 font-family: "SharpSansDispNo1-Bold";

 color: $color-grey-mid;


When SCSS files are compiled, SASS takes care of the variables that were used, replacing the variable name with its stored value. And, of course, changing the color value is as fast as updating the variable content and recompiling.

SASS Uses Nested Syntax

Another useful advantage of CSS preprocessors is the improved syntax. SASS allows you to use nested syntax. In SASS, the attachment allows for more detailed and accurately describe the item styles. Advantages of investment:

  • More natural syntax and readability in most cases
  • Prevents the need to rewrite selectors multiple times
  • Better organization and structure of code through visual hierarchy
  • Easier maintained code.

An example of a nested code, SASS (SCSS syntax):

.header {

 position: relative;

 a {

   height: 12px;

   color: white;

   display: flex;

   font-size: 9px;

   span {

margin-left: 4.3px;


   .back_tab-desk {

display: none;




Remember that too deep attachment is not a good practice. The deeper the attachment, the more verbose a SASS file becomes, and the more complicated the potentially compiled CSS, because the nesting is flattened in the compiling process. Therefore, excessive use of nesting can lead to:

  • Overly defined CSS rules that are difficult to maintain.
  • Selectors that cannot be reused.
  • Runtime performance issues. Nested selectors will create a long CSS selector string that will eventually generate a larger CSS file.


Using variables is great, but what if there are blocks of code that repeat in a style sheet more than one time? Then the mixins come into play. Mixins are similar to functions in other programming languages. They return a value or set of values and can accept parameters, including default values. SASS also has functions, so don’t mix up mixin with function. For example, suppose there is a mixin:

@mixin sample {

    font-size: 12px;


Now you can include it anywhere. But, since the values were declared by default, there is no need to pass any parameter:

p {

@include sample;


This will be compiled into:

p {

    font-size: 12px;



Sass has a @import rule. @import allows you to modulate your code, making it easier to support by importing small SASS files. The difference between this and the CSS @import rule is that all imported SCSS files will be merged into a single CSS file. To import files in the SCSS / SASS is very simple:

@import "home/main";

@import "information/_information-main";

@import "contact/_contact-main";

You do not need to specify a file extension name here, and the import path can also contain directories, which means that you can set the Sass working directory to the desired structure.

SASS is well documented

Another advantage of using SASS is the huge amount of documentation available online. Sass has everything you need to learn, from manuals to books. One of the best starting points is the official SASS documentation page, where you can find excellent documentation full of practical examples.

CSS preprocessors will always exist. They extend basic CSS functionality by providing a set of powerful features that will immediately improve performance. These are just some advantages, but there are many more such as inheritance, functions, control directives, and expressions such as if (), for (), or while (), data types, interpolation, and so on.

Becoming a SASS professional is fast enough; one option is to view the SASS files in Bootstrap to understand how SASS works and how it turns into a complex and interesting thing. But learning the basics and setting it up for a project won’t take long.

Please, rate my article. I did my best!

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)

Leave a Reply