Sass 101 - A newb's guide: variables

sass_variables.md

The most straightforward way to use SassScript is to use variables. Variables begin with dollar signs, and are set like CSS properties.

Variables are only available within the level of nested selectors where they’re defined.

.block {
  $var: red;
  background-color: $var;
}

.bar {
  $var: green;
  color: $var;
}

If they’re defined outside of any nested selectors, they’re available everywhere.

$width: 800px;
$padding: 30px;
$border-width: 1px;

.box {
  box-sizing: border-box;
  width: $width;
  padding: $padding;
  border: $border-width solid black;
  .no-boxsizing & {
    width: $width - ($padding * 2 + $border-width * 2);
  }
}

SassMeister Gist

sass_variables.scss

// Scoped variables
.block {
  $var: red;
  background-color: $var;
}

.bar {
  $var: green;
  color: $var;
}

// Global variables
$width: 800px;
$padding: 30px;
$border-width: 1px;

.box {
  box-sizing: border-box;
  width: $width;
  padding: $padding;
  border: $border-width solid black;
  .no-boxsizing & {
    width: $width - ($padding * 2 + $border-width * 2);
  }
}