SCSS / SASS Basics

Nestings

Declaring variables

$variable-name: some-value

Extending

.some-class {
    @extend .class-name
}

Mixins

@mixin some-name($param-name) {
    ...
    @content;
    ...
}

@mixin some-name($param-name: some-default-value) {
    ...
    @content;
    ...
}

Usage:

@include some-name(50px);

List functions

length($list-name);

// if you select a negative nuber
// you start from the end of the array
// ex. nth($list-name, -1); // is the last element
nth($list-name, $one-base-index);

index($list-name, $value-to-search);

Color functions

    color: saturate($color: #9923FF, $amount: 50%);
    color: lighten($color: #9923FF, $amount: 10%);
    color: darken($color: #9923FF, $amount: 20%);
    color: adjust-hue($color: #9923FF, $degrees: 70deg);

@at-root

@media print {
    @at-root (with: media) {
        .bar {
            color: red;
        }
    }
}
// will produce
@media print {
  .bar {
    color: red;
  }
}

@media print {
    @at-root (without: media) {
        .bar {
            color: red;
        }
    }
}
// will produce
  .bar {
    color: red;
  }

@if a==b
    // ...
@else if a==c
    // ...
@elseif a==d
    // ...
@else
    // ...

Ternary operator

if(a == b, "they are equal", "they are NOT equal");

not (!) operator

@if not $bool {
    // We get in there
}

boolean functions (unitless and *-exists functions)

$value1: 42em;
$value2: 42;
$unitless: unitless($value1); // false
$unitless: unitless($value2); // true

$unicorn: 'rainbow';
$variable-exists: variable-exists('unicorn'); // true

Nested media queries

@media (min-width: 42em) {
    .foo {
      color: red;
  
      @media (max-width: 50em) {
        color: blue;
      }
    }
  }
// will produce
@media (min-width: 42em) {
  .foo {
    color: red;
  }
}
@media (min-width: 42em) and (max-width: 50em) {
  .foo {
    color: blue;
  }
}

@extend (!optional flag)

Use

@extend .bar !optional

if the parent class (.bar) might not be defined.

Functions' keywords arguments (named arguments)

// I know who to do it (like in C#)

Functions: unknown number of arguments

@function my-function($specific-argument, $extra-arguments...) { ... }

type-of()

You can check an object's type by doing type-of($object-dentifier).

@at-root