Definition Sass

Sass is a CSS processor. A CSS preprocessor is a tool that allows us to automatically generate style sheets, adding features that do not have CSS, and that is typical of programming languages, such as variables, functions, nested selectors, inheritance, etc.

These characteristics of the processors also allow us to make the generated CSS that more comfortable to maintain and more reusable.

Advantages of using Sass

Using a tool like Sass provides several advantages, such as the following:

  • Reduces the time to create and maintain CSS.
  • Sass allows us to have a modular organization of styles, which is vital for large projects.
  • It provides advanced structures typical of programming languages, such as variables, lists, functions, and control structures.
  • Sass allows to generate different types of output, compressed, normal or minimized, working both in development and in production, it is also effortless.
  • It allows us to watch the files in such a way that, if there has been a change in the style sheet, it is automatically regenerated (watch mode).
  • It has very few dependencies, especially the new version, which is dart-sass. In previous versions, it relied on many Ruby libraries and was a bit cumbersome to install, but with the new version, installation is easy.
  • There are many associated tools, many libraries made with Sass, and a critical community of users.

Disadvantages of using Sass

Like everything, Sass has some disadvantages, which are extensible to any other preprocessor:

  • You have to learn to use a new tool, which, for some, is a disadvantage.
  • There is a consumption time in the CSS generation or compilation process, especially if the SCSS file is enormous. It is not a long time, but there is a slight delay.
  • It has a more complex syntax than CSS.

How is the Sass syntax

The task of learning Sass is in two main blocks. First, learn how to work with [Sass] code and know its special syntax. The second task would be to apply [Sass] in your workflow so that you can use the preprocessor easily and don’t waste time on the CSS compilation process. We will look at the two parts in this first article of the [Sass] Handbook, beginning by examining its syntax.

It is not easy to explain the Sass syntax in a few lines. For that, we have the complete manual, but we want to start by giving some examples so you can see how it is.

There are two types of syntax to write your code

Sass Syntax

This syntax is a little different from the standard CSS syntax. It doesn’t differ much. For example, it prevents you from putting semicolons at the end of property values. Also, the keys are not used and instead are made indented.

SCSS Syntax

It is a syntax quite similar to the syntax of CSS itself. The CSS code is valid SCSS code. We could say that SCSS is a CSS code with some extra things.

In practice, although writing with Sass syntax might be faster, it is less recommended, because it takes you further away from the CSS language itself. Not only does it force you to learn more, but your code will be less like standard CSS, and therefore it is normal for you as a developer to feel less “at home” using Sass syntax. On the other hand, when you use SCSS, you have the advantage that your lifelong CSS code will be valid for the preprocessor, being able to reuse more your knowledge and possible style codes that you have been working with on projects.