Sass : Syntactically Awesome Stylesheet

Sass(Syntactically Awesome Stylesheet) is an extension of CSS. It is a CSS preprocessor that allows developers to write CSS code easier and faster. CSS tends to get messy and unmanageable very quickly as its usually a single file that contains thousands of lines of code. Sass solves this by allowing us to use features like variables, nesting and import. Browsers do not understand Sass code, for browser to understand there's need for us to convert the code to regular CSS and this can be done by using Sass compilers.

Sass Syntax

Sass has two syntaxes

The Sass syntax

.button 
    background-color: White
    width: 200px

    &:hover
    background-color: black

This is the original Sass syntax. It uses the extension .sass. It uses indentation instead of curly braces and semicolons to describe the format of the document.

Sass Syntax

.button {
    background-color: White
    width: 200px

    &:hover {
        background-color: black
    }
}

The Sass syntax uses the extension .scss. Due to the fact that its similar to CSS, it’s the easiest syntax to master and the most popular.

Sass variables

Sass allows us to information in placeholders for re-use. Variables usually begin with the dollar sign( $ )

$box-width: 400px;

$box-background: white;
$box-width: 200px;

.container {
    background-color: $box-background;
    width: $box-width;
}

Once a variable is created, it can be used in various places. Here's how the above code looks when compiled and converted to normal CSS

.container {
    background-color: White;
    width: 200px;
}

Nesting

Sass allows us to nest selectors inside one another which makes the code cleaner and easier to read.

section {
    background-color: #fff;
    height: 95vh;

    a {
        text-decoration: none;
        color: black;
        font-size: 3.5rem;
    }



    p {
        font-size: 4rem;
        font-weight: 700;

        h2 {text-transform: uppercase;}
    }
}

This is how the code looks when compile and converted to CSS

section {
    background-color: #fff;
    height: 95vh;
}

section a {
    text-decoration: none;
    color: black;
    font-size: 3.5rem;
}

section p {
    font-size: 4rem;
    font-weight: 700;
}

section p h2 {
    text-transform: uppercase;
}

Import

Sass allows us to import smaller Sass files called partials into the current Sass file to build a single CSS file.

// The partial
// File name: _cssreset.scss

html,
body {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

// The Main sass file
// File name: basefile.scss

@import "cssreset"
body {
    font-size: 62.5%;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

// The processed CSS output:
// File name: style.css

html, body {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}


body {
    font-size: 62.5%;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

Sass allows developers to write clean codes easily. It makes it easy for designers and developers to work more efficiently and quickly. It contains fewer codes so you can write CSS quicker .