The most popular CSS preprocessors are Sass and Less . We'll focus on Sass , because it's more useful when using the popular Bootstrap or Materialize CSS.
There are two syntaxes available within Sass : SCSS and Sass . SCSS is really an extended syntax of CSS. This means that any CSS code will be valid SCSS code . Because of this property of SCSS, I recommend it more for beginners - but it's worth remembering that it's just another notation within the same language!
What are the benefits of Sass (SCSS)?
In the past, the first answer would probably be variables . Today, CSS variables can be used without any worries , because they have been understood by all major browsers for a long time:
Table showing CSS variable support The ability to use CSS variables (March 2024) - today they are widely accepted. Once, the ability to use variables was an overwhelming advantage of SCSS over pure CSS. Source: caniuse.com.
Although variables are also available in CSS itself, the SCSS variable notation is much more elegant :
color: $primary-color;
Than the one that is part of CSS, i.e. supported directly by browsers:
color: var(primary-color);
SCSS variables significantly increase code readability and allow for faster and more convenient expansion.
Sass also allows you to nest selectors, create your own functions, loops, conditionals , and more. I’ll describe some of these capabilities in detail below.
Who needs Sass (SCSS)?
Everything. For every project. Sass has practically no disadvantages - installation and configuration are trivially simple, the license - free (MIT), and full compatibility of CSS with SCSS means that in the worst case we will write only in CSS and hungary telemarketing data will not use the possibilities of Sass, but we will not have any additional difficulties in connection with this.
A common argument against preprocessors is the lack of the ability to view the source in the browser - because we will see a compiled CSS file there, not SCSS. However, this is not a problem at present , because we have the ability to generate so-called sourcemaps . If you are going to create a larger project, you will certainly be interested in this issue, for smaller ones it is not very important.
So let's install!
The official Sass website provides many ways to get started. You can choose any of the ones listed there or use the one I find most convenient - described below
Despite the passage of time and the emergence of new tools, I will still recommend using Easy SASS to start with . Not only because it was written by a Pole, but also because it gives access to (almost) all the possibilities of this language, and the installation is trivial - just right for the first steps with this language.