Why SCSS?
Because it’s 2020 and automation in every sector is boosting. So, you should automate your CSS writings. SCSS saves time, and helps in code management by using the power of partials.
Let’s dive into the world of SCSS.

Variables
Declare variables just starting the name with $ sign.
$site-color: darkred and we can later use it in in our codes.

body {
color: $site-color;
}
Pretty simple. What about array of styles? Yep, we can do that too.
$colors: (
"error": red,
"success": blue,
"warning": orange
);
And your CSS you can all them like below:
.btn-danger {
color: map-get($colors, error )
}

Mixin
Mixin is just a CSS code blocks that can be reused multiple times. It’s kind of like variables but with more powers, like multi-lines raw CSS, nesting etc.
Declare mixin with a @ sign and giving it a name.

@mixin background {
background: #000,
color: #fff,
}
Mixin also supports parameters.
@mixin background($bg, $text) {
background: $bg,
color: $text,
}
Nice and easy. Let’s now implement it in CSS.
.container {
@include background($variable, $variable);}
Tip: You can always over-ride the values of mixin.

Extending and Re-using components or code-blocks
We can extends our code by re-using same components over and over. SCSS makes is easy. It’s similar to mixin but it doesn’t support parameters like mixin.
Declaration:
Use .class-name or %keyword to declare re-usable code-blocks.

%defaultDiv {
background: #000,
color: #fff,
}

We can re-call this by @extend %defaultDiv inside any CSS {...} block.

Nesting
Nesting is quite easy.

element{
...
child-element {
...
&-child {
...
}
}
}
Putting & will automatically derive parent element name. In our case, child elements child name will be element .child-element .child-element-child We can also use interpolation instead of using @ , we can do that by #{&}

Functions
Loading . . .
mixing can do the works of functions. But for calculation / computation function is the ruler. There are also some awesome builtin functions.

Iteration
Loading . . .
Rarely used. Syntax is very similar to jquery.

Partials
Create filename with _ like _menu.scss or _social.scss and include them in main SCSS file using @import 'menu'.
Notice: We don’t need to provide _ or extension .scss while importing, Saas compiler will do it.

Categories: Uncategorized

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *