SASS & SCSS — PART 2

Hello, I am here with the second part of the article on Sass and Scss. In this part, I will talk about the life-enhancing features of Sass and Scss.

Topics we will talk about in this part:

• Map - get
• Nesting
• Mixin
• Function

💡 Map - get

The map-get structure actually resembles the switch case. The defined variable can take more than one state and value, and we can assign the value we want from these states by specifying when using it.

To understand better, let’s look at an example:

(SASS)

Here, I defined three states named light, gray and dark for the color variable and assigned color values to these states.
Likewise, I assigned small, medium and big states to the size variable and specified the pixel values.
When I come to the sections to be used, when you specify it as map-get($state name, assigned value), I will display in the CSS document that the value I have chosen is assigned.

❗️An important warning should be made for the Sass file: These situations must be defined side by side, it gives an error one after the other.

(SCSS)

In Scss, there is no obligation to write side by side, you can also make your definitions one under the other. It can be used in two ways as in the example. If you want, you can give the values directly, or you can use them by specifying that they are map and key.

💡Nesting

Rather than repeating the same selectors over and over again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.

(SASS)

I mentioned in Sass that spaces are important. You can use spaces to indicate which element is below which element without repetition.

(SCSS)

In scss, we use curly braces to indicate that they are children of each other. It is sufficient to add curly braces to cover the nested items.

💡Mixin

Mixins allow you to define styles that can be re-used throughout your stylesheet. So you don’t have to repeat the same style elements over and over. Simply call the mixin you want to use with include.

First, we define the mixin, which includes recurring features, as @mixin mixinname. Then you can come to the box class you want to use and call it statically as @include mixinname.
If you want, you can give parameters to the mixin to use it dynamically. Thus, you can make it easier to use by changing the color or size you want with the parameter.
If you want to define more than one parameter and call it with a single parameter, you must specify it while defining the mixin, otherwise, if you give the direct value, it will be based on the first parameter. If you do not want it to be based on the first parameter, you must call it with the name of the parameter you defined ($height:1000px). This time, if you do not define both parameters with :null, it will give an error because :null means that this parameter can also be empty.

Scss is also used in the same way, only the semicolon and curly brackets are different.

💡Function

Functions allow you to define complex operations on SassScript values that you can re-use throughout your stylesheet. They make it easy to abstract out common formulas and behaviors in a readable way.

Operations such as for loop, if-else structure, mathematical operations can be used within functions. Returns a value with @return.

As in the example, the function is defined and the style element is added according to the return values and the value it is called.

Scss is also used in the same way.

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