Sass: Basic Understanding

Hi there! This blog post is a beginner’s guide to using Syntactically Awesome Style Sheets (Sass) for website or app development. We’ll cover the basics of Sass and how to implement it into your workflow. 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);
}

---

Stay in the loop with our web development newsletter - no spam, just juicy updates! Join us now. Join our web development newsletter to stay updated on the latest industry news, trends, and tips. No spam, just juicy updates delivered straight to your inbox. Don't miss out - sign up now!

Leave this field empty if you're human:

We’ve tried our best to explain everything thoroughly, even though there’s so much information out there. If you found our writing helpful, we’d really appreciate it if you could buy us a coffee as a token of support.

Also, if you’re interested in learning more about WordPress, Javascript, HTML, CSS, and programming in general, you can subscribe to our MailChimp for some extra insights.