<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>prop(): 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="property_lookup" 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>Property Look-up: <code>prop( <span class="parameter">property</span>[, <span class="parameter">selector</span>] )<code></h2>
<p>Retrieves the value of the property for a given selector (up until that point in the stylesheet). <code>prop()</code> will return the last value given for <code class="parameter">property</code> in all rules with selector matching <code class="parameter">selector</code>, or an empty string if the property cannot be found.</p>
<div class="example">
<pre class="input"><code>body {
border: 1px solid #f00;
}
#example {
border: prop( border, body );
}</code></pre>
<pre class="output"><code>body {
border: 1px solid #f00;
}
#example {
border: 1px solid #f00;
}</code></pre>
</div>
<p>If no selector is given, the property will be looked up in the current rule. If the property is not found, then it will be looked up using the selector of the current rule as if it had been specified as the second argument.</p>
<div class="example">
<pre class="input"><code>.example {
font-size: 1.5em;
}
.example {
background-color: #00f;
border-color: prop( background-color ); /* property declared in the current rule */
line-height: prop( font-size ); /* property declared in the previous rule... */
/* the same as prop( font-size, .example ) */
}</code></pre>
<pre class="output"><code>.example {
font-size: 1.5em;
}
.example {
background-color: #00f;
border-color: #00f;
line-height: 1.5em;
}</code></pre>
</div>
<p class="not_implemented">The parser should be able to reference properties that were declared in shorthand.</p>
<div class="example">
<pre class="input"><code>body {
border: 1px solid #f00;
}
#example {
border-color: prop( border-color, body );
}</code></pre>
<pre class="output"><code>body {
border: 1px solid #f00;
}
#example {
border-color: #f00;
}</code></pre>
</div>
<p>If no rule with a given selector can be found an empty string is returned.</p>
<div class="example">
<pre class="input"><code>.example {
background: prop( background, .not_in_stylesheet );
}</code></pre>
<pre class="output"><code>.example {
background: ;
}</code></pre>
</div>
<p>Since variables are interpreted as properties of other rules, authors can look up variable values in other rules.</p>
<div class="example"><pre class="input"><code>body {
$top_text_offset: eval( prop(top) + prop(padding-top) + (prop(line-height) - prop(font-size) ) );
}
.example {
top: prop( $top_text_offset, body );
}</code></pre>
</div>
</div>
</body>
</html>
