SASS/SCSS cheat sheet

SASS is a preprocessor scripting language that is interpreted or compiled into CSS.

SCSS reads SCSS files and compiles those into CSS files but not SCSS files beginning with an underscore as these are called partials and only contain code parts. SASS is compiled to CSS with NodeJS, Gulp, VSCode Live and so on.

In SASS it is possible to nest, use variables and so on. CSS has introduced variables so for that is SCSS unnecessary.

There are two syntaxes in SASS, indented which uses .sass files and SCSS which uses .scss files, where the latter is the most common because regular CSS syntax works together with the SASS syntax in this variant.

Functions and mixins are similar, but functions should be used to compute values where mixins define styles.

$variable_color: "red"; <-- a variable

$map_example: ( <-- a map, some kind of array
  "acolor": "orange",
  "bcolor": "blue"
);

@function example_function($example_argument) { <-- a function

  @if $example_argument { <-- an if
    ...
  }

  @return $example_argument;
}

@mixin example_mixin($example_argument) { <-- a mixin, the (...) is optional
  font-size: 10px;
  padding: $example_argument;
}

.regular_class {

  .subclass_of_one { <-- becomes .regular_class .subclass {...}
  }

  &_extra { <-- becomes .regular_class_extra {...} (& is an alias for the parent)
  }

  #{&}_extra { <-- becomes .regular_class .regular_class_extra {...} (called interpolation)
  }

  color: $variable_color; <-- becomes color: red;

  background-color: map-get($map_example, acolor); <-- becomes background-color: orange

  border: example_function(none); <-- becomes border: none;

  @include example_mixin(1px); <-- becomes font-size: 10px; padding: 1px;

  width: calc(20% - 10%); <-- calculate width to 10%, calc(...) around it is optional
}

@import 'example' <-- import a partial file named _example.scss

.regular_class_more {
  @extend .regular_class <-- include the contents of .regular_class
}

Reference: https://www.youtube.com/watch?v=_a5j7KoflTs