Introduction to SCSS (Sassy CSS) and SCSS Functions

CSS is a powerful language used for making creative and attractive websites. Sassy CSS (SCSS) adds some powerful benefit to CSS that makes it more fantastic language by extending CSS and adding great features such as variables, mixins, nesting and much more. SCSS extension, i.e, file ending with “.scss” allows for more concise styling along with CSS. SCSS is the syntax for Sass. Every valid CSS3 stylesheet is a valid SCSS file with the same meaning and it extends all the features and functionality of CSS.

Now let’s have a look at some SCSS cool features and functions that lets you write clean, less-repetitive style-sheets making it really easy to read & modify your code.

1. Variables –

SCSS allows to change or modify the color value of a variable which you use in your website several time and it will update that value throughout the file wherever that variable is used. You can define variables like this:

$primaryColor: #6bc040;
$defaultFont: Helvetica, Calibri, sans-serif;

#header h2 {
font-family: $defaultFont;
font-size: 20px;
color: $primaryColor;
}
SCSS would compile this to:

#header h2 {
font-family: Helvetica, Calibri, sans-serif;
font-size: 20px;
color: #6bc040; }
2. Mixins-

Mixins in SCSS allows you to re-use the blocks of code including CSS properties & selectors. For example, take a block of code that defines CSS transitions. To define a mixin, you have to use @mixin then type in a name for it (transition in this case). Then where-ever you want to put in this block of code, just type in @include mixin-name (transition).

a {
color: #6bc040;
-webkit-transition: all 0.20s ease-in-out;
-moz-transition: all 0.20s ease-in-out;
-o-transition: all 0.20s ease-in-out;
-ms-transition: all 0.20s ease-in-out;
transition: all 0.20s ease-in-out;
}
a:hover {
color: #001;}

.button {
background: #6bc040;
color: #fff;
-webkit-transition: all 0.20s ease-in-out;
-moz-transition: all 0.20s ease-in-out;
-o-transition: all 0.20s ease-in-out;
-ms-transition: all 0.20s ease-in-out;
transition: all 0.20s ease-in-out;}

.button:hover {
background: #001;
}

The above code shows the vendor prefixes to achieve a fade effect when a user hovers over a link. You might want the same effect when a user, hovers over a button or some list elements, then you can use mixins to re-write the above code in SCSS as such:

@mixin transition {
-webkit-transition: all 0.20s ease-in-out;
-moz-transition: all 0.20s ease-in-out;
-o-transition: all 0.20s ease-in-out;
-ms-transition: all 0.20s ease-in-out;
transition: all 0.20s ease-in-out;
}

a {
color: #6bc040;
@include transition;
}

a:hover {  color: #000; } .button {
background: #6bc040;
color: #fff;
@include transition;
}

.button:hover {
background: #001;
}
3. Nesting –
SCSS allows you to nesting CSS blocks within each other. Nesting is use for finding the link of the child element to it’s parent. For example:

a {
color: $primaryColor;
@include transition;
font: {
family: Helvetica, Arial, sans-serif;
size: 16px;}
text-decoration: none;
&:hover {
text-decoration: underline; }}

This would compile to :

a {
color: #6bc040;
-moz-transition: all 0.20s ease-in-out;
-o-transition: all 0.20s ease-in-out;
-ms-transition: all 0.20s ease-in-out;
transition: all 0.20s ease-in-out;
font-family : Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration : none;
}

a:hover {
text-decoration: underline;
}