SASS Basic

Q. What is SASS?

Sass is a CSS preprocessor that gives access to a variety of advanced features that are not present in vanilla CSS.

Vanila CSS ==> Normal CSS

Some of it features are variables, nesting, inheritance, mixin, operators, loops, condition, etc.

Extension of Sass file is .scss

The main advantage of using Sass is that it can also compile a Sass file into a CSS file using the Sass command in a terminal.

    sass file_name.scss file_name.css

Let's deep dive into some of the Sass features :

1. Variables

We all have great knowledge about variables so without wasting your time let's dive in

Syntax:

     $variable_name : value;

Example:

     $header_color = #A9D0F5;

     .element {
         color : $header_color;
     }

2. Nesting

Normal CSS doesn't support nesting property whereas SASS helps us to nest the CSS selectors into a hierarchal order.

Syntax:

element{
          element2{
                   properties;
          }
          element3{
                  properties;
         }
}

Example:

.container{

          width : 100%

          div {
                  background-color : black;
                  a {
                          color : white;
                   }
         }
}

3. Inheritance

We all know about inheritance and its benefits in any programming language. SASS provides inheritance property out of the box. It let us share a set of CSS properties from one class to another.

Syntax:

@extend property_name;

Example

.header {
         color : black;
}

.sub-header {
         @extend .header;
         font-size : 24px;
}

4. Mixin

A mixin let us make a group of CSS declarations that we can sure throughout the site. It is just like functions in CSS. Good use of mixin is for vendor prefixes.

Syntax

@mixin function_name(argument) {
          properties;
}

Example

@mixin overlay() {
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
}

.modal-bg{
           @include overlay();
           background : green;
}

Example 2

@mixin header($width) {
           left : $width;
           top : $width;  
}

.modal-box{
           @include header(5px);
}

5. Operators

SASS offers different kinds of operators like +, -, *, /, and % for performing basic arthimetic operations.

Syntax

@mixin function_name() {
           properties;
}

Example

@mixin top-margin($extra_margin) {
           margin-top : 15px + $extra_margin;
}

.container {
           width : 100px / 10px;
           @include top-margin(10px);
}

6. Loops

We all know the power of the loop and what kind of benefits it gives. It helps in performing iteration in a CSS property.

Syntax

@for $variable from value through range_value {
        statement;
}

Example

@for $i from 1 through 100 {
        .font_size : # {$i} {
                font-size : 0px + $i;
        }
}

7. Conditions

It helps in checking a particular condition (i.e. true or false) and executing that particular block accordingly.

Syntax

@if $variable == value {
         statement;
}
@else if $variable == value {
         statement;
}
else {
         statement;
}

Example

@if $margin == 10px {
         top-margin : 20px;
}
@else if $margin < 10px{
         top-margin : 15px;
}
else {
         top-margin : 10px;
}

Conclusion

There are plenty of features in SASS and as it is evolving it is becoming better. With this basic kind of programming features included in a CSS now, we can execute the properties according to the needs of the viewer. It made life somehow easy. As you have read this you must try it and make your stylesheet much efficient and fun.

Thanks hope you like it.