Intro to SASS

Module 4 | CSS » Preprocessors

Lesson Goals

Students should be able to:

  • articulate what Sass is and why it's useful
  • write Sass in a semantic way

Intro to Sass

Sass stands for Syntactically Awesome StyleSheets. Sass allows you to add more advanced syntax - like variables and functions - to your stylesheets. It is a CSS preprocessor that converts SCSS (Sassy CSS) into vanilla CSS.

A pre-processor is a tool that will process your code and compile it to a new format that adheres to the requirements of your environment. Think babel - this compiles our fancy ES6 syntax back down to ES5 so that it can be supported in older browsers.

Sass vs. SCSS vs. CSS

Sass was originally part of another preprocessor called Haml. It used no curly braces or semi-colons, and the syntax adhered to strict spacing and indentation rules. Like so:

Developers liked the additional control we had over writing our stylesheets, but wanted a syntax more similar to vanilla CSS. This is where SCSS comes in.

Practice

Take a look at the SCSS in this codepen. Write down any syntactical similarities and differences you notice between SCSS and the plain CSS you're familiar with.

Although both Sass and SCSS are both still viable languages to use, movement has shifted significantly toward SCSS for several reasons:

  • All modern CSS is valid SCSS. That means that you can rename an entire .css file .scss and nothing will yell at you. Such is not the case for Sass.
  • There are no strict rules about indentation. There are still best practices, and if your indentation is all over the place you’ll make Jhun cry, BUT even through the tears your stylesheet will still function properly.

Why would we use Sass?

CSS in large apps can get crazy. Making changes to these large apps is tedious and extremely error prone. Sass makes it easier to change colors, fonts, and other properties by keeping your code DRY.

Some of the cool tricks include defining variables that can be peppered across multiple CSS files, nesting elements to visibly reflect the HTML element relationships, using math equations to adjust sizes and values, adjusting colors using more intuitive language like “darken” and “lighten”, and bundling groups of styles together to easily reference throughout your CSS…to name a few.

Features

Variables

One of the most obvious and immediately useful features of Sass is the ability to define variables.

As developers we strive to write DRY, clean code, and storing values for CSS styles as variables contributes to that. This means we can make color changes in one place, and the change will be reflected anywhere that the variable is referenced.

Variables are defined by a $ immediately preceding the name of the variable (like jQuery!), and a colon separating the name of the variable from the value. For example: $favorite-text-color: chartreuse;

Nesting

Color Functions

Math Functions

Mixins

Extend

Control Directives

Advantages & Disadvantages

Downsides pretty minimal but there's this big list anyway: https://adamsilver.io/articles/the-disadvantages-of-css-preprocessors/

Checks for Understanding

  • What is a preprocessor?
  • What are three features of SASS that can make your code more DRY?
  • What are considered some disadvantages of using a CSS preprocessor?

Further Reading & Resources

Instructor Resources