Getting Started With Sass

Sass is a CSS pre-processor which makes writing CSS more faster and efficient. This is just a faster way to grab the basic syntax of Sass and how to get started with easily. For more advanced concepts, check the Sass Documentation. CSS on it own can be fun and effective but as the document get larger and you write more code, it gets more difficult to maintain. Sass makes it easier to maintain much larger projects.

Prerequisites

Basic HTML and CSS

Scss Vs Sass

Sass (Synthetically Awesome Style Sheet) is an older version of sass and it uses a .scss extension. Scss (Sassy Scss) on the other hand is the current version of Sass.

Scss uses curly brackets to show different blocks of code, just like JavaScript whilst Sass uses indentation and uniform tab size, just like Python.

• SASS - Syntactically Awesome StyleSheets: .sass extension
• SCSS - Sassy CSS: .scss extension

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  header {
    height: 50px;
    font-size: 30px;
    p {
      line-height: 10px;
      letter-spacing: 3px;
      &:hover {
        color: white;
        background: #000000;
      }
    }
  }
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  header {
    height: 50px;
    font-size: 30px;
    p {
      line-height: 10px;
      letter-spacing: 3px;
      &:hover {
        color: white;
        background: #000000;
      }
    }
  }
}

body
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  header
    height: 50px;
    font-size: 30px;
    p
      line-height: 10px;
      letter-spacing: 3px;
      &:hover
        color: white;
        background: #000000;

body
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  header
    height: 50px;
    font-size: 30px;
    p
      line-height: 10px;
      letter-spacing: 3px;
      &:hover
        color: white;
        background: #000000;

Compiling Scss To Css

The styling language of the browser is CSS. The browser understands CSS but not Scss. With that, our scss code must be compiled into css for the browser to understand.

There are many ways scss can be compiled into clean css code.

Sass is written is Ruby.

Ways to compile Scss Code

• Installing Sass through the command line with Ruby
• Installing compiling softwares such as Koala, Live Reload and Hammer
• Installing using npm globally and compiling the sass code to css using the command line
• VS Code Extensions

In this tutorial, I will use the VS Code Extension, feel free to skip the section if you already know how to set it.

Setting Up Sass For VS Code

• Have Visual Studio Code installed.

• Go to the extensions panel and search for live sass compiler

• Click on the Extension by Ritiwck Dey and Install it. (Reload VS Code To Load Extension)

• Once the extension is installed, you need to set the location in save and the file extension.

  Location and extension is a personal preference.

• Search for settings.json file in VS Code. Can be found in settings.

• Add the following JSON code to enable your save location and extensions and save the changes.

  "liveSassCompile.settings.formats":[
    // My Settings
    {
      "format": "expanded",
      "extension":".css",
      "savePath":"/css",
    },

    // You can also use this for production.
    // It reduces the css file size

    {
      "format": "compressed",
      "extension":".min.css",
      "savePath":"/css",
    }
  ]

  "liveSassCompile.settings.formats":[
    // My Settings
    {
      "format": "expanded",
      "extension":".css",
      "savePath":"/css",
    },

    // You can also use this for production.
    // It reduces the css file size

    {
      "format": "compressed",
      "extension":".min.css",
      "savePath":"/css",
    }
  ]

• At the bottom of VS Code, a Watch Sass button will show. Click on it to compile your sass to css.

After the button is clicked, the extension will recompile the scss to css on every save.

Sass Syntax

Pretty much every valid css is valid sass. If you type a valid css in a sass file without any other sass features, it will recompile it to the same valid css without any changes

Features of Sass

• Variables
• Control Flow Statements like @if, @each and @for
• Nesting & Interpolation
• Modules & Partials
• Mixins & Functions
• Inheritance
• Operators and Operations