UX Design and Development course

Variables

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

Variables are not scoped ... yet

When using global variables, it is important to note that as variables are redefined within the cascade, this will in turn effect the value passed into the preceding variables.

$border-radius: 5px !default;

.block-01 {
  border-radius: $border-radius;
}

.block-02 {
  $border-radius: 10px;
  border-radius: $border-radius;
}

.block-03 {
  border-radius: $border-radius;
}

SassMeister Gist