Blog

We write about Ember.js, Ruby on Rails as well as Elixir and Phoenix.

Front End Development

Sass Fundamentals

Sass addresses many of the maintainability problems we typically experience when writing CSS, and makes writing styles fun again! This basic course will help you make the most out of this awesome preprocessor.

1
Module 1 Duration: 510 minutes

1 — Sass Fundamentals

While there have been recent major advancements in the way we organize the JavaScript in our modern web applications, CSS has comparatively hardly evolved at all. Instead, many teams rely on preprocessors such as Sass, Less, PostCSS, Stylus and others. These are essentially extensions of the foundational CSS concepts, which are compiled into regular CSS at build time.

In this course, we’ll start with regular CSS, and quickly layer on new capabilities and tools that will change the way you think about your app’s styles. Quickly, after moving on from the basics, we’ll start to see how style can be parameterized and re-used, avoiding repetition and redundancy, while keeping everything readable and maintainable.

Next, we’ll look at directives that bring imperative code concepts into stylesheets, like looping, conditional blocks and more. Finally, we’ll experiment with building our own Sass extension, where we can add new vocabulary and capabilities to the way we express styles.

Agenda
Sass Fundamentals Duration: 30 minutes
9:00
The preprocessor revolution

We’ll look at some of the common CSS pitfalls that motivated the invention of these technologies, and highlight how much easier things become in the Sass world.

Sass Fundamentals Duration: 20 minutes
9:30
Stylish Tools

When it comes to transforming Sass files to CSS, we have a few options. We’ll learn about options you can use from the command line, and in a node build tool.

Sass Fundamentals Duration: 25 minutes
9:50
EXERCISE 1 - Using the Sass CLI

Build a shell script that transforms a Scss file into two CSS files: one that’s human-friendly for a development environment, and one that’s smaller for a production environment. How much of a file size savings did we get for this optimization?

Sass Fundamentals Duration: 30 minutes
10:15
Nested & Modular Styles

Partials and the @import directive allow us to write stylesheets in a modular and maintainable way. We’ll look at the pitfalls of the CSS @importat-rule, and how Sass provides similar capabilities while addressing some common problems.

Sass Fundamentals Duration: 20 minutes
10:45
Exercise 2 - DRY Styles

Sticking to “the inception rule”, refactor the Scss file you’re given to take advantage of Sass nesting features

Sass Fundamentals Duration: 25 minutes
11:05
Exercise 3 - Partials and import

The @import directive, combined with partials allow us to break our stylesheets up into modular units. Make all of your failing tests pass, while avoiding any new redundancy.

Sass Fundamentals Duration: 30 minutes
11:30
SassScript: Variables & Operators

Being able to store and re-use values is a game-changer, in terms of reducing redundancy and improving consistency and maintainability throughout your styles. We’ll discuss variable best practices, unit conversions and more!

Sass Fundamentals Duration: 30 minutes
12:00
EXERCISE 4 - Variable Math

Make the failing tests pass, by substituting literal values with SassScript expressions. Keep units in mind, and avoid any fudge factors!

Sass Fundamentals Duration: 60 minutes
12:30
Lunch

Break for lunch.

Sass Fundamentals Duration: 30 minutes
13:30
Built-in Functions

Sass has a treasure trove of built-in functions that allow us to expressively manipulate colors, numbers, lists, maps and more! We’ll look at what’s available, and then learn some best practices for practical and maintainable usage.

Sass Fundamentals Duration: 30 minutes
14:00
Mixins

Mixins allow us to re-use basic or parameterized chunks of style, via the @extend directive, without having to introduce tons of complexity into your HTML.

Sass Fundamentals Duration: 30 minutes
14:30
EXERCISE 5 - DRY Buttons

The .button class in our app is available in a variety of colors, but there’s a lot of repeated style between them. Using a combination of nested styles, color functions and mixins, design a means of generating a button of an arbitrary color (or set of colors).

Sass Fundamentals Duration: 30 minutes
15:00
Extensible Styles

The @extend directive is a powerful tool, we can use to “inherit” styles, but if over-used it has the potential to increase the size and complexity of the compiled CSS. We’ll take a look at all this feature of Sass can do, some limitations as to where and how it can be applied, and some patterns for responsible use.

Sass Fundamentals Duration: 30 minutes
15:30
EXERCISE 6 - Links as Buttons

Many UI frameworks represent links with a particular class and the <button> with similar visual styles. Refactor and make use of the @extend directive to accomplish this. Your change must result in a net reduction in LOC of Scss, and no more than a 2% increase in compressed CSS filesize.

Sass Fundamentals Duration: 45 minutes
16:00
Control Directives

One of the most powerful aspects of Sass is the ability to add control flow to our sales. With the @if, @for, @each and @while directives, we can create powerful, concise and expressive styles, which are far easier to maintain and tweak than their CSS counterparts.

Sass Fundamentals Duration: 30 minutes
16:45
EXERCISE 7 - Grid Generator

Using control directives, build a mixin that generates a grid with an arbitrary number of columns. As an extra challenge, try to make the grid responsive!

Sass Fundamentals Duration: 15 minutes
17:15
Wrap Up

We’ll recap everything we’ve learned today

Get your team trained!