Visit the main site

Category:

  • Extension language

Progression

ID Status Learning Item Type Related Project Date Completed
1 Up next Getting Sassy With CSS Course
2 Complete Sass Basics Official Docs Portfolio 12/15/20
3 Complete Learn Sass In 20 Minutes Video Portfolio 12/15/20

Variables

Prefix variables with a $ symbol:

$textColor: black;

Structure

Sass allows for nesting elements.

body {
  background: red;
  p {
    background: blue;
    &:hover {
      background: yellow;
    }
  }
}

This is the equivalent of:

body {
  background: red;
}

body p {
  background: blue;
}

body p :hover {
  background: yellow;
}

Importing

Sass files can be broken out into individual files and imported.

Prefix your files with an underscore like _{filename}.scss, which is referred to as a “partial.” In your main Sass file, this can now be imported as:

@import './{filename}';

Extending

If we want to reuse rules from an existing class, we can extend the class we want to replicate:

@extends 'header';

From there, we can override those styles locally, as Sass still cascades top to bottom just like regular CSS.

The classes we extend can be in the same file, imported, or use a special placeholder class with the % symbol:

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
  color: #AAA;
}

Mixins

Mixins are prepackaged chunks of CSS that was can easily include in multiple places! Think of them like functions in JavaScript.

@mixin is used to declare the template content, and @include is used to import it into the CSS rule.

@mixin flexCenter {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

p {
  @include flexCenter();
}

But what makes mixins really powerful is in the function-like capabilities. If we add variables as properties to flexCenter, we can pass CSS values into the mixin:

@mixin flexCenter($direction, $background) {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
  background: $background;
}

p {
  @include flexCenter(column, blue);
}

Operators

Sass supports standard math operators +, -, *, /, and %.

img {
  float: left;
  width: 600px / 960px * 100%;
}

Resources