SASS & SCSS — Part 1

Hello, in this article I will talk about Sass and Scss. Let’s first look at what Sass and Scss are, then let’s take a look at their features.

Topics we will talk about in this section:

• What is Sass?
• What is Scss?
• Install Sass
• Converting Sass file to CSS file
• Sass and Scss Spelling Rules
• Variables in Sass and Scss

💡 What is Sass?

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor. In other words, we can say that CSS is translated into the programming language.

It is there to avoid confusion and repetition that occurs when long CSS codes are written. It compiles the codes written with the logic of the programming language and converts them to CSS codes.

💡 What is Scss?

The difference between Scss and Sass is the syntax difference. What are these syntaxes? Curly braces and semicolons. It is preferable for those who cannot switch directly from CSS to Sass. In short, we can say that it is the version of Sass that is closer to CSS.

Now that we have learned what Sass and Scss are for, let’s look at how to install them.

💡 Install Sass

For installation, you will see that there are various installation paths from Sass’s site https://sass-lang.com/install. For this, the application can be downloaded and used, it can also be used by installing from the terminal. I prefer to install via npm. The code you need to type in the terminal is as follows:

npm install -g sass

In this way, you include the Sass and Scss structure in your project.

💡 Converting Sass file to CSS file

• In order to convert the Sass or Scss files to a CSS file, the css.map file runs in the meantime and this file does the conversion operations. There are several methods to provide these operations and convert them to CSS files. The first of these methods is to specify the Sass file you want to convert and the .css extension you want to convert manually in the terminal. For this you have to enter the following command:

sass index.scss index.css

• Another method is to use extensions. As soon as we save the code with the extension, there are extensions that enable compilation and conversion to .css code. VS Code offers us a plugin called Live Sass Compiler for this. With this plugin, you can convert Sass and Scss files to .css files.

💡 Sass and Scss Spelling Rules

📍 Sass

One of the most distinctive main features of Sass is the absence of curly braces and commas. As in CSS and Scss, you will not get an error when you do not put them, on the contrary, you should not use these elements. It’s actually a great preprocessor for those who forget continuous semicolons and curly braces.

Another spelling rule is indentation. The indentation is very important in Sass because the features you want to specify are determined according to which element they belong to.

In the example below, the properties of the box are specified in a tab. If the title is in line with the box’s properties, this title is now the child element of the box, that is, it is specified as .box.header in CSS. Likewise, if the content class is under the header, this time the content is the box and the element under the header. If the content was at the level of the box, it would have been a separate class.

📍Scss

Curly braces and semicolons are used in Scss, so it is very similar to CSS, but of course, it has many different features from CSS, which I will talk about in the next topics. Unlike Sass, indentations have no meaning. Indent as much as you want, the elements do not affect each other.

💡 Variables in Sass and Scss

Variables in Sass and Scss can be used by defining them and calling them wherever desired. This allows you to easily call ($name) by the name we choose, without the need to specify the same color or the same size all the time.

Values that are not defined in any element at the top are global variables. If they are not changed, they can be used everywhere with the same value.

There are local variables as well as global variables. Local variables are defined in the specified scope and are valid in that scope. Even if there is a local variable with the same name, they do not change the global variables, they can only change it in a single case, which changes the value defined above after making the local variable a global variable by typing !global next to the variable value defined in the scope. In addition, in the scope where a local variable with the same name is used, the local variable is checked first.

We have come to the end of the first part of the Sass and Scss article, I will talk about other topics in the next parts.
See you in the next parts 👋