Variables: $
Authors can define variables in any object and use them anywhere one or more primitive values are expected. Variable names must begin with a dollar-sign ($).
$button_width: 100px;
.button { width: $button_width; }
.button { width: 100px; }Authors can also use lists of primitive values or other variables as the values.
$standard_border: 5px solid #ccc;
$just_like_standard_border: $standard_border;
.uses_standard_border {
border: $standard_border;
}
.uses_just_like_standard_border {
border: $just_like_standard_border;
}
.uses_standard_border{
border: 5px solid #ccc;
}
.uses_just_like_standard_border {
border: 5px solid #ccc;
}Variables are scoped - if the variable is not found in the current object, the variable will be requested in the parent of the current object. If a variable is not found, or an object does not have a parent (such as the stylesheet itself), an empty string is returned. The most recent (last) declaration of a variable $name will be returned.
$background_color: #fff;
#body_id {
$background_color: #000;
.container_1 {
background-color: $background_color;
}
.container_2 {
$background-color: #aaa;
background-color: $background-color;
}
}
.container_3 {
background-color: $background_color;
}
#body_id .container_1 {
background-color: #000;
}
#body_id .container_2 {
background-color: #aaa;
}
.container_3 {
background-color: #fff;
}Variables are treated as properties of the objects they are defined in. Variables declared as properties of included or imported stylesheets are treated as properties of the host stylesheet. Defining a variable in the "global" scope in a stylesheet will make it global in any stylesheet that imports or includes it as well.
/* styles1.sss */
$text_color: #fff;
@include url(styles2.sss);
.example {
color: $color;
}/* styles2.sss */
$text_color: #000;.example {
color: #000;
}