What is Sass, how to use Sass

Get to know the Sass CSS preprocessor and learn how to use Sass to optimize your website development work.

We begin with this article the Sass Manual, in which we are going to explain the bases so that you can use Sass and benefit from all the advantages of CSS preprocessors. Sass is the most used of the preprocessors and one of the usual requirements that you will find in job offers.

In this manual we will explain the Sass syntax and its use in the framework of website development, so that you can automate the translation of Sass code to standard CSS code. But before we get into Sass itself, it’s worth taking a little time to clarify what CSS preprocessors are.

What are CSS preprocessors

CSS preprocessors are tools for website developers that allow you to translate non-standard style sheet code, specific to the preprocessor in question, into standard CSS code understandable by browsers.

Preprocessors basically offer us various utilities that today are not found in the CSS language, or are not compatible with all browsers. Examples can be variables, nesting of selectors, functions (called mixins), etc.

Developing with a preprocessor mainly saves time, since we have to write less code to get things done. But we also get easier code maintenance, thanks to better code organization and the ability to edit certain values ​​once and affect dozens, or hundreds, of places in the generated CSS code.

Not all are advantages when we talk about preprocessors, since they force us to learn a new language and write non-standard code. That non-standard code must be compiled into CSS, which affects the development flow as well. The preprocessor code is not understood by the browser and therefore we have to take the trouble to translate it, before taking a website to production. Fortunately, this flow is quite refined and there are various alternatives for optimizing this translation, so that we don’t have to intervene manually and it saves us time.

why sass

Any preprocessor is perfectly valid. We could undoubtedly choose other alternatives such as Less or Stylus and it would be great for us and our project, since in the end they all offer more or less the same utilities. But nevertheless, Sass has become the most used preprocessor and the most demanded.

Having received more support from the community, you are more likely to find job offers with Sass or inherit projects that use Sass, so it will generally be more useful for you to learn this preprocessor.

Also, several frameworks use Sass, such as Bootstrap. Therefore, if you have to work with them, it will be better for you to learn Sass.

How is the Sass syntax

As we said, the task of learning Sass is divided into two main blocks. First learn to work with the Sass code and learn about its special syntax. The second task would be to apply Sass to your workflow so that you can easily use the preprocessor and not spend time compiling CSS. We’ll cover both parts in this first Sass Handbook article, starting by examining their syntax.

Obviously, we are not going to be able 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.

The first thing you should know about Sass is that there are two types of syntax for writing your code:

• Sass Syntax: This syntax is a bit different from the standard CSS syntax. It doesn’t differ much. For example, it prevents you from placing semicolons at the end of property values. Also, the keys are not used and are indented instead.
• SCSS syntax: It is a syntax quite similar to the syntax of CSS itself. In fact, the CSS code is valid SCSS code. We could say that SCSS is CSS code with some extra things.

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

As we understand that when using a preprocessor it is preferable to stay closer to the CSS language, in this manual we will always use SCSS syntax.

Now let’s look at a few things about the Sass syntax. For example, the use of variables.

$color-backgrounds: #F55; h1 { background-color: $color-backgrounds; }

In this code you are seeing how we declare a variable and then use it in a selector. Obviously, that’s not valid CSS, since there are no such declarations in the language.

Note: Today CSS already incorporates variables, although another syntax is used. The problem is that they are not yet available in all browsers, so it is not totally safe to use them, unless you implement PostCSS with CSS Next.

Once the above code is compiled, you would get a standard code like the following:

h1 { background-color: #F55; }

We’ll see more about variables and many other Sass utilities shortly. But now we prefer to spend some time to explain how you can use Sass in your project.

How to use Sass

To use Sass you have two fundamental alternatives.

1. Preprocess with a graphical interface tool, such as Prepros, CodeKit or Scout-App. In principle it may be simpler, since it does not require working with the command line, but you need to use a specific program and it may not always be available to you, or it may not be integrated into another workflow that you may have already assumed in your project. . Also, the best graphical interface tools have the disadvantage of being paid, or needing a license to unlock their full power.
2. Use the command line to preprocess. This is the preferred option for most developers. Not only because it does not require the purchase of a license for the graphical interface software, but mainly because you can integrate it with an entire ecosystem of tools to optimize many aspects of a website. In addition, it is within the reach of any developer, since we all have a terminal in our operating system and finally, it allows you to fully customize the behavior of the preprocessor.

3. Use automation tools. As a third option, it is also very common to use tools that allow you to automate the frontend workflow, compiling CSS files, Javascript, optimizing images, etc. We are referring to packages like Gulp, Grunt or Webpack (although the latter is more of a packer). These systems have the particularity that they serve to cover all the needs of working with web languages ​​and are not only used to compile the Sass code. It would be the most powerful option of the three mentioned, although it requires more training to be able to use it. In this group we could also join PostCSS, although this tool only serves us to convert the CSS, applying various plugins, among which could be the compilation of Sass, and does not enter areas such as Javascript.

The previous alternatives can be a bit dizzy if you are not used to hearing about so many technologies. Don’t worry too much because we are going to go to a simple option that will allow you to start using Sass, without much effort or configuration. Specifically, we are now going to explain how to use Sass from your terminal, with the “official” tools of the preprocessor itself (the alternative proposed in point 2 above). It is a possibility within the reach of any reader. Our next step then will be to start by installing the preprocessor.

Install Sass

Sass installation depends on the operating system you are working with. Although they all require starting by installing the Ruby language, since the Sass compiler is written in Ruby.

Let’s see, for each system, how to get hold of Ruby.

• Windows: There is a Ruby installer for Windows. https://rubyinstaller.org/ You can use it to make things easier.
• Linux: You will have to install Ruby using your package manager of the distribution you work with, apt-get, yum, etc.
• Mac: Ruby is installed on Mac systems, so you would not need to do any additional steps.

Once the Ruby language is installed we will have the “gem” command, which installs packages (software) based on this language. So we’ll use that command to install Sass. Again, there may be differences between different operating systems.

windows

You will have to open a terminal, either Power Shell, “cmd” or whatever you like to use. If you don’t use any, just type “cmd” after pressing the start button. Then you will have to launch the command.

gem install sass

linux

To install Sass, once you have Ruby previously, you can do it with the following command in your terminal.

sudo gem install sass –no-user-install

Mac OS X

On Mac you will generally use “sudo”, just like on Linux. Although you can try before without sudo and use sudo if the console really asks you for not having enough permissions.

sudo gem install sass

Important note for Mac users: On Mac OS X you may need to do some other operations. On a clean Mac install you may need to install the Xcode extensions:

xcode-select –install
Or install Xcode itself from the App Store (don’t worry, it’s free). Then you will also have to open the Xcode, once installed, to complete the installation of all the necessary components.

For any system, once Sass is installed, we can see if it is really available, by doing the following command:

sass -v

That should return the version of Sass installed on our system.

Compile Sass files to CSS

Now that you have Sass installed you’ll want to compile the Sass code to convert it to standard CSS. For that step, we need to start with a file with Sass code.

Earlier in this article we looked at what a piece of Sass code might look like, using SCSS syntax. You can copy that code and save it to a file on your computer. Use any folder to do this first test and save the file with the name “ex.scss” (or whatever else you fancy).

Now you must place yourself with the terminal in the folder where you have the file that you have just created with the SCSS code. Then you’ll run the command to compile, like this…