SASS

Overview

SASS is a preprocessing language that compile into CSS files. It has two different extensions: .sass and .scss they're fairly similar, but use different technical syntaxes.

In our projects, we use SCSS to write our CSS rules. Being a more modern way on SASS than the .sass extension and language, it's made to be a superset of CSS, meaning that any valid CSS is valid SCSS.

If you want to learn more about SASS and SCSS, head over to their site.

Highlights

• Variables
• Partials
• Nesting
• Mixins & arguments
• Placeholders
• Functions

Variables

As in any other language, save often called values into variables, to call them by name each time you need it. Particularly good for colors!.

// Variable declaration
$m-300: #f0438e;

// Use of variable
.awesome-class {
  background-color: $m-300;
}

Partials

This lets you clean up your files by creating a different file for each chunk of code (a partial) that you can afterwards import in a final file that will get compiled. This way, you can keep your project organized, with separated files, but just worrying about one inclusion, and one HTTP request in your site.

Partials file name must start with an underscore _my-partial.scss and must be included via the @import directive in the main SCSS file that will get compiled into CSS. This is extremely helpul in conjunction with BEM and Atomic Design principles in our projects.

// _theme-colors.scss file contents
$m-300: #f0438e;

// _my-partial.scss file contents
.awesome-class {
  background-color: $m-300
}

// main.scss file contents
@import 'theme-colors';
@import 'my-partial';

// Compiled main.css file
.awesome-class {
  background-color: #f0438e;
}

Nesting

You can nest elements by opening their tag inside the parent one.

.awesome-parent {
  background-color: #c0ffd7;

  .awesome-child {
    background-color: #2ff1b1;
  }
}

.awesome-parent {
  background-color: #c0ffd7;
}
.awesome-parent .awesome-child {
  background-color: #2ff1b1;
}

This admits the use of the ampersand selector ( &) to take the parents name as a variable and concatenate it with new texts. In a BEM environment, this is extremely helpful.

.block {
  background-color: #0ced4a;

  &__element {
    background-color: #eeca25;

    &--modifier {
      background-color: #e7c035;
    }
  }

  &--modifier {
    background-color: #4f2502;
  }
}

.block {
  background-color: #0ced4a;
}
.block__element {
  background-color: #eeca25;
}
.block__element--modifier {
  background-color: #e7c035;
}
.block--modifier {
  background-color: #4f2502;
}

👁 Take into consideration
Try to limit the nesting. The linter will warn you at a maximum of 4 classes or 2 attributes.

Mixins

Sometimes we need a repeating pattern throughout a lot of components or classes. In these situations we can make use of mixins to write the code once and reuse it with a simple call whenever we need it. Additionaly, we can arguments, making it useful for modifiable components.

// We declare our mixin
@mixin button-color($color: grey) {
  background-color: $color
}

// And make use of it (use this along with partials and you got your system on fire!)
.button {
  @include button-color();
}

.button--green {
  @include button-color(green);
}

.button--red {
  @include button-color(red);
}

.button {
  background-color: grey;
}

.button--green {
  background-color: green;
}

.button--red {
  background-color: red;
}

Placeholders

Also used for shared code, where mixins assign properties to individual classes (along with the specifics of that class), placeholders consolidate mutually-shared properties.

%placeholder {
  box-shadow: 3px 3px 5px 6px #ccc;
}

.card {
  @extend %placeholder;
  border: 1px solid black;
}

.element {
  @extend %placeholder;
  background-color: #1239a9;
}

.card, .element {
  box-shadow: 3px 3px 5px 6px #ccc;
}

.card {
  border: 1px solid black;
}

.element {
  background-color: #1239a9;
}

👁 Caution!
Only use @extend to extend placeholders never other selectors!.

Functions

Even though the mixins are somehow a function there are a lot of interesting pre-built functions into SCSS that we can profit for our code, as well as very interesting and "complex" stuff that we can achieve with them.

Prebuilt functions

lighten($color, $amount) : Makes a color lighterdarken($color, $amount) : Makes a color darker
adjust-hue($color, $degrees) : Changes the hue of a color
mix($color1, $color2, [$weight]) : Mixes colors + weight of first
// also below return values of a color to use for conditionals
hue($color) : Gets the hue component of a color
saturation($color) : Gets the saturation component of a color
lightness($color) : Gets the lightness component of a color

Custom functions

We can build our own functions to get custom data from variables or choose the correct value depending on the environmental situation of an element:

// Given a parameter, it will return the correct color value
@function main-or-white($color) {
  @if ($color != $n-000) {
    @return $n-000;
  } @else {
    @return $m-300;
  }
}