Sass: Basic Understanding

Learn the basics of Sass (Syntactically Awesome Style Sheets) and how to enhance your CSS workflow with features like variables, nesting, mixins, and more. Perfect for beginners in web development.

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

To get the most out of this tutorial, you should be familiar with:

• HTML
• CSS
• Basic programming concepts, including strings, $variables, if statements, and for loops.

What is Syntactically Awesome Style Sheets (Sass)?

Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself and is a modern web development tool that helps you write better CSS and work more efficiently. It’s widely adopted in web development to enhance CSS by providing features like variables, nesting, and mixins. You can read more here.

Sass Strong Features

Let’s dive into some of the powerful features of Sass and how they can streamline your CSS development.

1. Variables

Variables in Sass allow you to store values (like colors, fonts, or sizes) and reuse them throughout your stylesheet. This makes it easier to maintain consistency and update values in multiple places with a single change.

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

.header {
    background-color: $primary_color;
}

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

2. Nesting

Nesting allows you to write your CSS in a more organized and hierarchical structure, similar to HTML. This keeps your code clean and readable, especially when working with complex designs.

// 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;
    }
}

3. Partials

Partials in Sass allow you to split your stylesheet into smaller, more manageable files. You can then use @import to include these partials in your main stylesheet. This reduces clutter and helps keep your code organized.

// Sass partials sample.

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

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

4. Extend

The @extend feature allows you to reuse existing CSS code, reducing repetition. This is particularly useful when you have multiple elements that share a base style but require slight variations.

// 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;
}

5. Operators

Sass includes basic mathematical operations like addition, subtraction, multiplication, division, and more. These operations help you calculate values dynamically, which is particularly useful for responsive design or flexible layouts.

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

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

6. Mixins

Mixins are one of Sass’s most powerful features. They allow you to define reusable chunks of code, which can be called with custom parameters. This makes your code DRY (Don’t Repeat Yourself) and easier to maintain.

// 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 includes the fallback 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);
}

Conclusion

Sass is a powerful tool that extends the capabilities of CSS by introducing features like variables, nesting, partials, mixins, and more. By integrating Sass into your workflow, you can write cleaner, more maintainable code while speeding up your development process. Whether you’re a beginner or an advanced developer, Sass offers the flexibility and control needed to build modern, scalable websites.

As you continue exploring Sass, try implementing these features in your own projects to see the efficiency they bring. Happy coding!