Requirements

Welcome to the blog on getting quick knowledge about SASS/SCSS. The requirements of this blog are:

• Prior basic understanding of CSS
• Package manager for windows chocolatey or homebrew for macOS and Linux

Breif Information on CSS preprocessor

SASS/SCSS are the preprocessors for CSS, this means the code we write will later get compiled to CSS before the actual use. As our project grows, it's often hard to manage and write reuasable codes efficiently. CSS preprocessor's give the power of writing CSS codes in a more efficient way by allowing to write function, inheriting styles, auto adding vendor prefixes, and try to ensure that the code works on most of the browsers. Some of the common preprocessors are: SASS/SCSS, Stylus, LESS, etc.

SASS and SCSS

SASS vs SCSS

Now, we have basic understanding of what preprocessor is, let's get the basic information about what is SASS and SCSS? are they both same? The simple answer is no, they aren't same,however they are similar in terms of working mechanism. Actually, the SASS compiler allows us to write code in two formats, SASS style itself and another is the SCSS, sass style was the original way of writing SASS where each block is defined by new level of indentation and each statement is seperated by a new line. To compare with CSS curly braces is replaced by a indentation and semicolon is replaced by a new line. The code below describes it the best.

// main.sass
main
    background-color: #005dff
    h1
        font-size: 30px

In SCSS, the syntax is similar to CSS. SASS supports all the features of SCSS. Below is a glimpse of SCSS syntax compared to CSS.

// main.scss
main{
    background-color: #005dff
    h1{
        font-size: 30px
    }
}

// main.css
main{
    background-color: #005dff
}
main h1{
        font-size: 30px
}

Installing SASS compiler

There SASS compilers are categorised into three types:

• Dart Sass
• LibSass -Ruby Sass Ruby Sass was the original implementation of sass written in Ruby. LibSass contains bunch of compilers written in different languages like node-sass written in TypeScript/JavaScript, SassC written in C, go-sass written in Golang, etc. However, they both are now deprecated. The lastest one is dart sass written in dart.

  Installing SASS compiler for windows

  In cmd or powershell type following command.

  choco install sass
  

  Installing SASS compiler for Linux or MacOS

  brew install sass/sass/sass
  

  Writing SCSS code

  Let's start by making a new file ending with scss extension let's say main.scss.

  Variables

  In scss, we define variables by adding $ sign before the variable name for example $primary_color:#005dff. We can even group the variables and map them with key.

  $colors: (
  primary_color: #005dff,
  accent_color: #e89700,
  );
  

  We use map-get($variable_name, key) to get the value of key from that variable. See example below:

  $colors: (
  primary_color: #005dff,
  accent_color: #e89700,
  );
  button {
  background-color: map-get($colors, primary_color);
  color: map-get($colors, $key: accent_color);
  }
  

  Compiling scss/sass code into css

  Now for compiling this code into css, in terminal we write command as

  sass file_name.scss output_file_name.css
  

  In my case I'll be running sass main.scss main.css. Here, I'll get css file with following code:

  button{
  background-color: #005dff;
  color: #e89700;
  }
  

  We can also make the compiler watch for changes and compile it for us by adding watch flag as follows:

  sass --watch main.scss main.css
  

  If we have a directory (./sass) which contains bunch of scss file and want to compile them at once in another directory (./public/stylesheets) we can give following command

  sass --watch ./sass:public/stylesheets
  

  Nesting

  We do nesting to select element contained inside element.

  <main>
    <div class="text_container">
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloremque
            dolorem hic eos eum sit nulla qui, similique neque laborum magni, sint
            quia ab in ducimus aut id iste, sunt voluptatibus?
        </p>
        <button>Click Me</button>
    </div>
  </main>
  

  In CSS, to style p tag and button inside main we seperately need to write selector starting from main like main .text_container p and main .text_container button. In SCSS we can nest the selectors and write styles faster.

  main{
    .text_container{
        p{
            /* some styles */
        }
        button{
            /* some styles */
        }
    }
  }
  

  Inheriting Styles

  In SCSS, we have a sepecial selector % which can define style will get compiled only if we inherit (use) that style in our other elements.

  // we can inherit this style in other elements
  %button_style {
  height: 30px;
  width: 100px;
  border-radius: 15px;
  background-color: #005dff;
  border: 2px solid #000;
  }
  .primary_button {
  @extend %button_style; 
  }
  .secondary_button{
    @extend %button_style;
    background-color: transparent;
  }
  

  Good thing about this is, it will automatically make the code non repeating. CSS output will look like:

.secondary_button, .primary_button {
  height: 30px;
  width: 100px;
  border-radius: 15px;
  background-color: #005dff;
  border: 2px solid #000;
}

.secondary_button {
  background-color: transparent;
}

Thank's for reading, comment below for giving me feedbacks. Will write part 2 of SCSS soon!