Sass Noob to Ninja (Basic Understanding) – Part 1

Hello there, in this series of blog post about Syntactically Awesome Style Sheets (Sass) we will discuss the basics up to advanced of how to use Sass and implement it to your workflow when building a website or app. So let’s get started!

Skill Pre-requisites:
HTML, CSS, basic programming familiarity regarding strings, $variables, if statement and for loops

First, what is Syntactically Awesome Style Sheets (Sass)?
– is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself, also a modern web development tool that helps you write a better CSS and works faster. read more

Sass Strong Features

VARIABLES – you can set value to a variable and re-use it on different places inside of your stylesheet.

// Sass variables sample.
$primary_color: #13292A;

.header {
    background-color: $primary_color;
}

.footer {
    border: 1px solid $primary_color;
}

NESTING – make your writing of CSS elements and properties nested that makes it neat and organized.

// Sass nesting sample.
.gridbox {
    max-width: 200px;
    margin: 0 auto;

    h3 {
        text-transform: uppercase;
        background-color: #ff0000;
    }

    p {
        font-size: 1rem;
        line-height: 1.4;
    }
}

PARTIALS – it allows you to make your stylsheet less clutter and partially integrate different parts of website stylesheet.

// Sass partials sample.

// Site CSS.
@import "resets"
@import "helpers/mixins"
@import "site/base"
@import "site/layout"

// Extra Plugins.
@import "plugins/woocommerce"
@import "plugins/jetpack"

EXTEND – make your CSS use less code by re-using previously declared CSS properties and avoid repetitive code, this cool features are perfect for any variations occur in a certain element of your HTML like for an example a gridbox with default styling to compact version styling.

// Sass extend sample.
.gridbox {
    background-color: #ffffff;
    border: 1px solid #ffaaaa;
    border-radius: 5px;
    font-size: 16px;
    padding: 20px;
}

.gridbox-compact {
    @extend .gridbox;
    padding: 10px;
    border-radius: 3px;
    font-size: 14px;
}

OPERATORS – allow you to perform a basic math operations such as addition, substraction, multiplication, modulus, division and so on.

// Sass operators sample.
$default_size: 5px;
$bolder: $default_size * 2;

.box {
    @if ( $default_size >= 5 ) {
        color: #f5f5f5;
    } @else {
        color: #e5e5e5;
    }
}

MIXINS – a most flexible and powerful feature of Sass which allow you to store some functions.

// Reset margin and padding.
@mixin resetMarPad() {
	margin: 0;
	padding: 0;
}

// Function for converting a px based font-size to rem.
@function calculateRem($size) {
    $remSize: $size / 16px; // rem value = size * root html pixel.

    // Default font size on html element is 100%, equivalent to 16px;
    @return #{$remSize}rem;
}
  
// Mixin that will include the fall back px declaration as well as the calculated rem value.
@mixin fontSize($size) {
    font-size: $size;
    font-size: calculateRem($size);
}

.btn {
    @include resetMarPad();
    background: #ff0000;
    color: #ffffff;
    @include fontSize(24px);
}

1 thought on “Sass Noob to Ninja (Basic Understanding) – Part 1”

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.