SASS mixins: the basics

SASS mixins

SASS mixins look like this:

@mixin theme(){
  background-color: lightgrey;
  margin: 20px;
}

.App {
  @include theme;
  font-family: sans-serif;
  text-align: center;
}

You can pass in variables to the mixin as well. In this case, it has a default value of lightgrey.

@mixin theme($bg_color: lightgrey){
  background-color: $bg_color;
  margin: 20px;
}

.App {
  @include theme(purple);
  font-family: sans-serif;
  text-align: center;
}

You can also add some global variables.

$defaultBackgroundColor: lightgrey;

@mixin theme($bg_color: $defaultBackgroundColor){
  background-color: $bg_color;
  margin: 20px;
}

.App {
  @include theme(purple);
  font-family: sans-serif;
  text-align: center;
}

You can divide this in to files which can be imported. You can use and underscore to indicate that it is a partial.

A partial file for variables.

// _variables.scss
$defaultBackgroundColor: lightgrey;

A partial file for the theme.

// _theme.scss
@import "variables.scss"
@mixin theme($bg_color: $defaultBackgroundColor){
  background-color: $bg_color;
  margin: 20px;
}

The partial files are included into the App.scss file.

// App.scss
@import "theme.scss"

.App {
  @include theme(purple);
  font-family: sans-serif;
  text-align: center;
}