Sass files use the .scss extention.

Creating variables

$variableColor : red

Using the variable

background: $variableColor

---

Nesting elements

In Sass, nested elements are represented by nesting elements inside their parent element's brackets.

header {
  color: black;
  button {
    color: blue;
  }
}

---

Using pseudo-selectors

To use pseudo-selectors like :hover, just nest them within the element's brackets with an &: symbol.

button {
    color: blue;
    &:hover { color: darkblue; }
  }
}

For selectors like :before and :after, use the &:: symbol (double colons).

---

Modularizing code with Sass

Say, you have a file _header.scss (the _, I believe, is for differentiating between the main file and the auxiliary files):


  header {
    // scss styles go here
  }

You can import the styles to another file, using

@import '/path/to/header' (extension not needed)

---

Creating mixins

Mixins are like functions which allow us to set a code block for repetitive code snippets to use wherever that code block is necessary.

@mixin mixinName {
  // scss style block here
}

Wherever you want to use the style block, say, in a div element, you can use the mixin:

div {
  @include mixinName();
}

Mixins are also available to be used in files which import the file where the mixin is defined.

Using parameters in mixins

To set up parameters in scss, use the syntax:

@mixin mixinName($direction) {
  flex-direction: $direction; // remaining scss style block
}

For using the mixin, you can 'call' it with the needed parameters:

div {
  @include mixinName(column);
}

Multiple parameters are also usable, of course.

---

Extensions

To inherit styles, you can extend the styles of another css selector. For example:

div {
  @extend .className;
}


The above will add to the div all the styles defined for the .className selector.

REMEMBER : Stylesheets work top-to-bottom. Styles defined lower will overload styles defined higher.

---

Calculations

Calculations of all kind are possible:

width: 100% - 20%

height: 100px - 50px