Categories

Beginner guide of SCSS

These days front-end developers are using complex design, multiple style sheets and theme which is harder to maintain. To solve this problem SASS has been invented. With the help of SASS, we can use variables, nesting, mixins, loops, inheritance, etc in our CSS code.

SASS is basically a CSS, but it was written in SASS then compiled back to CSS. SASS was designed and created by Hampton Catlin. Sass is a Ruby gem.

To use the SASS you have to install SASS, if you’re not familiar with the command line you can install a separate app such as Scout or Koala you can find more details in sass-lang install page.

There are 2 syntaxes available in Sass

  1. Sass (Syntactically Awesome StyleSheets) extension of this file is .sass.
  2. SCSS (Sassy CSS) extension of this file is .scss.

In this tutorial, we will discuss the basic of SCSS.

Here is the example difference between SCSS and CSS code.

In this CSS code, we have simply mentioned the yellow colour in the header.

1
2
3
4
5
6
header {
     color: #ffd800;
}
footer{
     color: #ffd800;
}

In this SCSS code we have to use a variable $ colour, and assign a colour value in it. We are using $ colour value in SCC code whenever we required.

1
2
3
4
5
6
7
$color:  #ffd800;
header {
    color: $color;
}
footer{
     color: $color;
}

Nesting

In SCSS, we can combine multiple selectors within one selector. This will make our codes easy-to-read.

The following code shows the use of nested rules in the SCSS file.

Variables

We can use variables in SCSS. Any CSS value can be stored in SASS Variables, which will be reused throughout the stylesheet. The $ symbol is used to declare a variable in SCSS.

In the following code, we have used $ colour as a variable which stores the hex colour code. We will reuse this variable through our stylesheet.

Mixins

We can make a group of CSS declarations in a Mixin which can be reused through the stylesheet. Mixins are declared in the @mixin directive. We can pass the value according to our need to make the mixin more flexible.

In the following code, we have declared the border-radius property in a mixin so we can reuse border-radius property anywhere in our stylesheet by just adding @include border-radius.

Operators

We can use mathematical operations in our SCSS file. With Operators, we can create more complex and dynamic codes. SCSS can allow some standard math operators i.e. +, -, *, /, and %.

In the following code, we have declared some value in variables after that we have added 10 in the value of our variable.

Functions

We can create a function in our SCSS file.

In the following code, we have declared 2 variable and assign some value on that. after that create a function “container with”. We can call our function throughout the stylesheet.

Import

SCSS import is the same as CSS import only the different is SCSS import not create an HTTP request for any addition stylesheet. imported stylesheet combine into the main stylesheet and serve as a single stylesheet.

In the following code, we have import the base.scss stylesheet in the main stylesheet.

1
@import 'reset';

Inheritance/ Extend

In @extend we can share a set of CSS properties to the different selector. Using @extend will help us to keep our stylesheet short and handy.

Conclusion

SCSS will make CSS powerful. There are lots of way in SCSS to make our stylesheet simple. SCSS is very helpful for both web designer and developers.

You can learn lots of other feature in SCSS for http://sass-lang.com/.

Hope you have enjoyed this article, don’t forget to share with your friends.

If you would like to write guest posts for Blog Identity, you can contact us onĀ info@blogidentity.com and check our submission guidelines.

You may also like...

Leave a Reply

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