Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

// 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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment