Sass 101 - A newb's guide: 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