[Sass] Variable

Variable Declaration +Use

$base: #777777;   /*Define a variable name*/

.sidebar{
  border:1px solid $base;
    p {
     color: $base;   
    }
}

 

 

Default flag:

 

 

Vairable can be any type:

color, string (with or without quotes), list (10px 0 10px 100px), null

 

Scope:

Variable set inside a declaration (within {}) aren't usable outside that block.

Setting new values to variables set outside a declaration changes future instances.

/**  OK  */
$color-base: #464646;

.sidebar{
  $color-base: #222222;
  background: $color-base;  
}
p{
    color: $color-base
}

 

/** Wrong **/

p{
    $border: #ccc;
    border-top: 1px solid $border;
}
h1{
    border-top: 1px solid $border;
}

 

Interpolation:

Use the Ruby-esque #{$variable} to shim variables into selectors, property names, and strings:

$side: top;

sup{
    position: relative;
    #{$side}: -0.5em;
}

.callout-#{$side}{
    background: #777;
}

 

Assembly Tip:

Be considerate of variable naming. $color-base gets a lot more mileage than $color-blue.