SCSS is advanced version of SASS. SASS stands for Syntaclically Aswesome Style Sheet. It is a Css pre processor language. SCSS provides many features like variable, operator, mixin etc just like other programming language does. It reduces the Css development time.
Install
The following are steps for the scss set up in Linux
Step 1:
Install ruby using apt package manager, rbenv, or rvm
Step 2:
Install sass using the following command
sudo su -c "gem install sass"
Step 3:
Following is a sample command for converting the scss file to Css file. For that first create a file with .scss extention and add the scss code.
sass input.scss output.css
Features of SCSS
Variable
Variables are used to store some information, which can be used in our code where ever we want. SCSS uses `$` symbol to declare the variable.
$bodycolor: #333;
body {
color: $bodycolor;
}
Operator
SCSS provides basic mathematical operators like +, -, *, / and %. Those are much useful in Css styling process.
.divwidth {
width: 900px / 360px;
}
Mixins
Mixin is a block of Css statements that can be used repeatedly in a program. This feature allow us to reduce the repeated Css codes. Using `@mixin` we can create mixin and using `@include` we can add that mixin within our code.
@mixin box($wdvar) {
width: $wdvar;
}
.smallbox { @include box(10px); }
.largebox { @include box(100px); }
Inheritance
It is one of the important feature in SCSS. Using @extend keyword we can share a set of Css properties from one selector to another.
.classone {
color: #333;
}
.classtwo {
@extend .classone;
border-color: green;
}
Nesting
SCSS allow us to nest our Css selectors in a way that follows the same visual hierarchy of our HTML.
.classone {
font-color: blue;
a {
text-decoration: none;
}
}