Sass/SCSS Variables

$primary-color: #3498db; # define variable
$font-stack: Arial, sans-serif;
$base-padding: 1rem;

.button {
    background-color: $primary-color; # use variable
    font-family: $font-stack;
    padding: $base-padding;
}

$global-var: blue; # global variable
.container {
    $local-var: red; # local to container
    color: $local-var;
}

$color: red !default; # use this value if not already set

$name: primary;
.alert-#{$name} { # interpolate in selector
    background: blue;
}