<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Variables: Switch</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link type="text/css" rel="stylesheet" title="Default Stylesheet" href="global.css" />
</head>
<body id="variables" class="documentation">
<div id="header">
</div>
<div id="localNav">
<h2>Switch</h2>
<ul id="extensionsNav">
<li><a href="install_mac.html">Installation (Mac)</a></li>
<li><a href="install_windows.html">Installation (Windows)</a></li>
<li><a href="variables.html">Variables</a></li>
<li><a href="constants.html">Constants</a></li>
<li><a href="includes.html">Includes</a></li>
<li><a href="comments.html">Comments</a></li>
<li><a href="ignore.html">Ignore</a>
<li><a href="auto_prepending.html">Automatic Selector Prepending</a></li>
<li><a href="inheritance.html">Inheritance</a></li>
<li><a href="copy.html">Property Duplication</a></li>
<li><a href="property_lookup.html">Property Look-ups</a></li>
</ul>
</div>
<div id="mainContent">
<h2>Variables: <code>$</code></h2>
<p>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 (<code>$</code>).<p>
<div class="example">
<pre class="input"><code>$button_width: 100px;
.button { width: $button_width; }
</code></pre>
<pre class="output"><code>.button { width: 100px; }</code></pre>
</div>
<p>Authors can also use lists of primitive values or other variables as the values.</p>
<div class="example">
<pre class="input"><code>$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;
}
</code></pre>
<pre class="output"><code>.uses_standard_border{
border: 5px solid #ccc;
}
.uses_just_like_standard_border {
border: 5px solid #ccc;
}</code></pre>
</div>
<p>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.</p>
<div class="example">
<pre class="input"><code>$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;
}
</code></pre>
<pre class="output"><code>#body_id .container_1 {
background-color: #000;
}
#body_id .container_2 {
background-color: #aaa;
}
.container_3 {
background-color: #fff;
}</code></pre>
</div>
<p>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.</p>
<div class="example">
<pre class="input"><code>/* styles1.sss */
$text_color: #fff;
@include url(styles2.sss);
.example {
color: $color;
}</code></pre>
<pre class="input"><code>/* styles2.sss */
$text_color: #000;</code></pre>
<pre class="output"><code>.example {
color: #000;
}</code></pre>
</div>
<h3>See also:</h3>
<ul>
<li><a href="constants.html">Constants</a></li>
<li><a href="property_lookup.html">prop()</a></li>
</ul>
</div>
</body>
</html>
