[SASS] Basic introduction about SASS for newbie

I. Introduction

• SASS stands for Syntax Awesome Style Sheets, is a powerful CSS extention so all valid syntaxes in CSS will be valid in SASS

• SASS has 2 syntaxes:

1. SCSS syntax (.scss) - used most commonly

2. Indented syntax (.sass) - unuasually used

II. Installation using Node.js

npm install -g sass

III. Execution

• Command to compile Sass to CSS: sass input.scss output.css --watch

• input.scss: source file to build from

• output.css: path to put output CSS to

• watch: flag to observe the change from input file and re-compile css file each time the change happened

IV. SASS Syntaxes

1. Variables

• Variables are places used to store information which you want to reuse throughout your sheet.

$textColor: #fff;
p {
color: $textColor;
}

• SASS syntax uses indentation and newlines to replace curly braces {} and semicolons ; respectedly.

$textColor: #fff
p 
    color: $textColor: #fff

2. Nesting

• Sass allows you to nest your CSS selectors as the way HTML elements nested.

<nav class="header">
    <ul class="header-inner">
        <li>
            <a></a>
        </li>
    </ul>
</nav>

nav {
    ul{
    }
    li {
    }
}

or

.header {
  &-inner{  // .header-inner
  }
  &:hover{  // .header:hover
  }
}

3. Mixins

• mixin is a CSS code block which you can reuse throughout your sheet. mixin can receive variables as arg so its somehow the same as function.

@mixin bgc($bgColor: "black") {
    background-color: $bgColor;
}

body {
    @include bgc($bgColor: "#333");
}

4. Partials/Modules

• A partial is a SASS file name starting with underscore _: _partial.scss
• A partial file can contain little snippets of CSS so you can include in other SASS files, using partial is a great way to modualize and maintain CSS code.
• Partial files will not be generated into CSS files by SASS.
• Partials are used with @use rule, @use loads SASS file as a module so you can refer to its variables, mixins and functions.

// _base.scss
$textColor: #fff;

// style.scss
@use 'base';

body {
    background-color: #000;
    color: base.$text-color;
}

5. Extend/Inheritance

• Using @extend allows you to share a set of CSS prop from one selector to others.

%common-style {  // place-holder
    border-radius: 25px;
    width: 100px;
}

.yes-btn{
    @extend %common-style;
    color: green;
}

.no-btn{
    @extend %common-style;
    color: red;
}

6. If condition statement

@if $direction == "left" {
    // do smt
}

7. Operators

• Some SASS math operators are +, -, *, math.div(), %