<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Inheritance: 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="inheritance" 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>Inheritance: <code>@inherit</code></h2>
<p>Inhertiance allows a style rule to gain all the visual behavior of one or more style rules through selector manipulation. Selectors specified in the <code>@inherit</code> directive will match rules declared previously in the stylesheet.</p>
<div class="example">
<pre class="input"><code>.box {
border: 1px solid #f00;
padding: 10px;
margin-bottom: 5px;
font-size: 125%;
clear: both;
}
.box_like {
@inherit .box;
border-color: #000;
}</code></pre>
<pre class="output"><code>.box,
.box_like {
border: 1px solid #f00;
padding: 10px;
margin-bottom: 5px;
font-size: 125%;
clear: both;
}
.box_like {
border-color: #000;
}</code></pre>
</div>
<p>For each selector specified by a <code>@inherit</code> directive, the <em>entire</em> selector will be match <em>anywhere</em> in previous selectors. This ensures that in all cases, the inheriting rule is rendered just like the rule it inherits from in addition to any child elements.</p>
<div class="example">
<pre class="input"><code>.box {
border: 1px solid #f00;
padding: 10px;
margin-bottom: 5px;
font-size: 125%;
clear: both;
}
#body_id .box {
background-color: #ccc;
}
.box p em {
font-weight: bold;
}
#body_id .box p em {
color: red;
}
.box_like {
@inherit .box;
border-color: #000;
}</code></pre>
<pre class="output"><code>.box,
.box_like {
border: 1px solid #f00;
padding: 10px;
margin-bottom: 5px;
font-size: 125%;
clear: both;
}
#body_id .box,
#body_id .box_like {
background-color: #ccc;
}
.box p em,
.box_like p em {
font-weight: bold;
}
#body_id .box p em,
#body_id .box_like p em {
color: red;
}
.box_like {
border-color: #000;
}</code></pre>
</div>
<p><code>@inherit</code> can be declared anywhere inside a style rule. Multiple inheritance can be indicated by providing a comma-separated list of selectors, using multiple <code>@inherit</code> rules, or both. Note that subsequent <code>@inherit</code> directive do not replace previous ones!</p>
<p>To specifically address rules inside other rules (rules that use automatic selector prepending), authors must use the entire calculated selector.</p>
<div class="example">
<pre class="input"><code>.item {
color: #000;
}
.list {
.item {
border: 1px solid #fff;
}
}
.vauge_item {
@inherit .item; /* will inherit all rules with .item */
}
.specific_item {
@inherit .list .item; /* will inherit only .list .item rules */
}</code></pre>
<pre class="output"><code>.item,
.vauge_item {
color: #000;
}
.list .item,
.list .vauge_item,
.list .specific_item {
border: 1px solid #fff;
}
.list { }
.specific_item { }</code></pre>
</div>
<h3>Using <code>@inherit</code> with imported stylesheets</h3>
<p>Selectors specified in an <code>@inherit</code> directive will match and modify selectors of rules that are imported into a stylesheet (using <code>@import</code>), however, since these rules <em>will not</em> be output with the host stylesheet, the result may not be what an author intended. It's best to inherit from rules that are declared or are included (using <code>@include</code>) into the current style sheet.</p>
</body>
</html>
