SASS for beginners

This is my first post in DEV and i am super excited to share the stuffs that i have learnt today. I hope, it enlightens you about SASS.

Syntactically Awesome Style Sheet(SASS) is a pre-compiler which converts bunch of codes to css. So,What is the need of SASS when we can write directly via CSS?
SASS provides some beautiful features and that's the reason it is very popular. I will elaborate the features the one by one.

Some features are nesting,modularise,function and mixins,conditionals etc.

One more thing !! There are 2 file types through which we can write SASS
A. saas extension(style.saas)
B. sccs extension(style.scss) Popular

A. saas -

The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.

 // Some Random style  ->Curly-braces and semi-colons are mandatory for saas
 section{
   color:red;
 }             

B. SCSS -

The second and older syntax, known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.

// Some Random style  -> works through indentation

 section
   color:red

*** Features ****

Variable Declaration -

We can declare variables in SASS and later can access it using '$var-name'.

  //style.scss

  // Variable bgColor is defined with values 'blue'
  $bgColor: blue;  

  nav{
    background: $bgColor;
  }

Nesting -

Often we use multiple selectors to select one particular element( ' ul li a.mylink' will select the anchor tags in li elements which have a class 'mylink').But Saas provides a elegance way of writing i.e nesting the elements inside parent elements.

 nav {
     ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li { display: inline-block; }

    a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
   }
 }

  /*corresponding css */
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    nav li {
      display: inline-block;
    }

    nav a {
      display: block;
      padding: 6px 12px;
      text-decoration: none;
   }

Modularise the saas files using partials -

In css, we can write separate files for each individual part of web pages, but managing it is very difficult.We can create partial Sass files that contain little snippets of CSS and we can include them in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore (_partial.scss). The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Then we need to import the partial file to main saas file.For that we can use @use . Don't use @import to include the files as there are some serious issues may arise with it.

    // _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}


// styles.scss , 
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

@mixins to make your style sheet DRY -

Sometimes we need certain code to rewrite every time. lets say the vendor prefixes which are added for browser compatibility. Thus we add it for every style elements/tags. So we need some block of code that can be used as a single statement and can do the same job. To include the mixins, we need to use the @include .

@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
}
.box { @include transform(rotate(30deg)); }

Inheritance -

For example, in our web page, we need certain border around each of the header and footer. So we need to add the border property in header once and then in footer. Sometime we need to add thousand lines of same code in separate places.Here Inheritance plays a major role. We need to define a block with '%some_name' and then the rules. Then we have to use the @extend to extract those rules.

           %message-shared {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }

    .success {
      @extend %message-shared;
      border-color: green;
    }

Operators

With Sass, we can do the mathematical operations easily as it supports +,-,*,/ etc.

   article[role="main"] {
       float: left;
       width: 600px / 960px * 100%;
   }

Some additional things

A. We can use the '&' access the immediate parent element.

  a{
    color:blue;

    &:hover {    //Represents as a:hover
      color:green;
    }
  }

B. Interpolation - we can use the #{} for template the value.In the below example, based on the value of $top_or_bottom can be modified.

  #{$top_or_bottom} : 0;

   a:nth-child( #{ $col-num}n ) {} -> a:nth-child(2n)  

Also there are conditionals and loops in SAAS. And lot more. If you are interested for further diving, here is the link

Happy learning !!