Getting SASSY: A Practical Guide to SASS

By Tim Robards

Are you ready to take your web development skills to the next level?

The Getting SASSY guide will take you there! By learning SASS, your front-end development will be much more organized, faster and highly maintainable.

We'll cover the basics from variables, nesting, mixins, for/each loops and much more! We'll also take an in-depth look at how to structure your projects, as well as how to go about creating a build process that you can use for all your future projects!

Available in PDF, EPUB & MOBI Formats.

• Language: English
• Publisher: Tim Robards
• Release date: Feb 27, 2021
• ISBN: 9781777383817

Tim Robards

Web developer, writer & creator of easeout.co.

Book preview

Getting Sassy

Getting Sassy

A Practical Guide to SASS.

Tim Robards

© 2021 Tim Robards

Table of Contents

Introducing SASS

Defining CSS Preprocessors

Why use Preprocessors?

What is SASS?

SCSS or Sass?

Setting up SASS

Environment Setup

Folder Structure

File Structure

Initializing our Project Directory

Install node-sass

Compiling Sass Code to CSS

Live Reload

Variables

Nesting

Mixins

Functions

Partials and Importing

Using Partials

@import in CSS vs SASS

Inheritance

The Ampersand Operator

Control Directives

@if and @else

@for

@while

Interpolation

The Syntax

Why Use Interpolation?

Placeholders

Why use Placeholders?

Structuring your SASS Projects

How do we structure our Sass projects?

Simple Structure

The 7–1 Pattern

Get up and running with 7–1:

Setup Media Queries with SASS Mixins

CSS Media Queries

Mixins

Setting up your mixins

Using a mixin

Another way to setup our mixins

Setting up the Perfect Build Process

What is a build process?

The build process

Creating the Build Process

Summing up

Conclusion

Introducing SASS

SASS (or Syntactically Awesome Style Sheets) is a tool known as a CSS preprocessor. CSS preprocessors are scripting languages that extend the default capabilities of CSS.

Other popular examples include LESS and Stylus. They are in fact all great tools to utilize when you wish to code more maintainable CSS. Especially when working with larger codebases.

Defining CSS Preprocessors

A CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. There are many CSS preprocessors to choose from, however most CSS preprocessors will add some features that don’t exist in pure CSS, such as mixin, nesting selector, inheritance selector, and so on. These features make the CSS structure more readable and easier to maintain. — MDN

Once you’re comfortable with CSS, the next natural step is to utilize a preprocessor. The biggest advantage is not having to repeat yourself.

This advantage is known as keeping your CSS Dry, which stands for Don’t Repeat Yourself.

Why use Preprocessors?

The primary advantages are as follows:

Cleaner code thanks to variables and nesting

Greater ease of maintenance and organisation as we can separate our files