Menu ▾ ▴

[r7]: / docs / copy.html  Maximize  Restore  History

Download this file

47 lines (45 with data), 2.6 kB 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

	<head>

		<title>@copy - Property Duplication: 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="copy" 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>Copy Directive: <code>@copy</code></span></h2>

			<p>The Copy directive (<code>@copy</code>) is powerful in that it allows authors to give a group one or more properties a name -- a name that can  be used to add properties to other objects. So as variables can be used to name and share values, using <code>@copy</code> allows authors to name and share properties.</p>



			<p>Unlike inheritance in which the selectors of previous rules are modified, <code>@copy</code> directly duplicates the properties from one or more rules to another. Authors identify which properties should be duplicated by providing one or more selectors. <code>@copy</code> will duplicate the properties of all previous rules that exactly match the given selectors. Only properties will be duplicated, nested rules and directives will not be duplicated.</p>

			<div class="example">

				<pre class="input"><code>.box { width: 100px; }

.box_2 { border: 1px solid #f00; }

.box { line-height: 1.5em; }

.box_props { @copy .box, .box_2; }

</code></pre>

				<pre class="output"><code>.box { width: 100px; }

.box_2 { border: 1px solid #f00; }

.box_props { width: 100px; line-height: 1.5em; border: 1px solid #f00; }

</code></pre>

			</div>

			<p>There is no guarantee which order properties will be applied. In the example above, line-height was added before .box_2 properties even though it came earlier in the stylesheet.</p>

		</div>

	</body>

</html>
MongoDB Logo MongoDB