Differential D23278 Diff 64182 autotests/html/highlight.less.html

Changeset View

Standalone View

View Options

autotests/html/highlight.less.html

Show All 14 Lines
15<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">2</span>) { 15​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">2</span>) {
16 <span style="font-style:italic;">colorr</span>: <span style="color:#0057ae;">@color</span>; 16​ <span style="font-style:italic;">colorr</span>: <span style="color:#0057ae;">@color</span>;
17 padding-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>; 17​ padding-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>;
18 <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span>; 18​ <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span>;
19} 19​}
20 20​
21<span style="color:#0057ae;">@my-ruleset:</span> { 21​<span style="color:#0057ae;">@my-ruleset:</span> {
22 <span style="color:#644a9b;">.my-selector</span> { 22​ <span style="color:#644a9b;">.my-selector</span> {
23 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">black</span>; 23​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
24 } 24​ }
25}; 25​};
26 26​
27<span style="color:#0057ae;">@bacon:</span> <span style="color:#b08000;">red</span>; 27​<span style="color:#0057ae;">@bacon:</span> <span style="color:#aa5500;">red</span>;
28<span style="color:#0057ae;">@beacon:</span> background-color; 28​<span style="color:#0057ae;">@beacon:</span> background-color;
29<span style="color:#0057ae;">@baecon:</span> <span style="color:#0057ae;">@{w}</span> + <span style="color:#0057ae;">@w</span>; 29​<span style="color:#0057ae;">@baecon:</span> <span style="color:#0057ae;">@{w}</span> + <span style="color:#0057ae;">@w</span>;
30 30​
31<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.class</span> <span style="color:#006e28;font-weight:bold;">#sh</span><span style="color:#b08000;">:extend</span>(<span style="color:#006e28;font-weight:bold;">#hhh</span>) ) {} 31​<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.class</span> <span style="color:#006e28;font-weight:bold;">#sh</span><span style="color:#b08000;">:extend</span>(<span style="color:#006e28;font-weight:bold;">#hhh</span>) ) {}
32<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:nth-child</span>(w: <span style="color:#b08000;">red</span>) {} 32​<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:nth-child</span>(w: <span style="color:#aa5500;">red</span>) {}
33 33​
34<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#0057ae;">@width2</span>) <span style="font-weight:bold;">and</span> <span style="color:#b08000;">handheld</span> { 34​<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#0057ae;">@width2</span>) <span style="font-weight:bold;">and</span> <span style="color:#b08000;">handheld</span> {
35 <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">auto</span>; 35​ <span style="font-weight:bold;">height</span>: <span style="color:#644a9b;font-weight:bold;">auto</span>;
36} 36​}
37 37​
38<span style="color:#644a9b;">.test</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@color</span> = <span style="color:#b08000;">blue</span>) <span style="color:#644a9b;">.ffff</span> {<span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>;} 38​<span style="color:#644a9b;">.test</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@color</span> = <span style="color:#aa5500;">blue</span>) <span style="color:#644a9b;">.ffff</span> {<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;}
39 39​
40<span style="color:#644a9b;">.foo</span> (<span style="color:#0057ae;">@bg</span>: <span style="color:#b08000;">#f5f5f5</span>, <span style="color:#0057ae;">@color</span>: <span style="color:#b08000;">#900</span>) { 40​<span style="color:#644a9b;">.foo</span> (<span style="color:#0057ae;">@bg</span>: <span style="color:#aa5500;">#f5f5f5</span>, <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#900</span>) {
41 <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@bg</span>; 41​ <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@bg</span>;
42 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span>; 42​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span>;
43 43​
44 <span style="color:#644a9b;">.x</span> { 44​ <span style="color:#644a9b;">.x</span> {
45 <span style="font-style:italic;">x</span>: <span style="color:#0057ae;">@nn</span>; 45​ <span style="font-style:italic;">x</span>: <span style="color:#0057ae;">@nn</span>;
46 <span style="font-style:italic;">a</span>: <span style="color:#b08000;">white</span> <span style="color:#0057ae;">@{nn@{ww}}</span>; 46​ <span style="font-style:italic;">a</span>: <span style="color:#aa5500;">white</span> <span style="color:#0057ae;">@{nn@{ww}}</span>;
47 <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">red</span>; 47​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>;
48 } 48​ }
49} 49​}
50 50​
51<span style="color:#898887;">// Variables</span> 51​<span style="color:#898887;">// Variables</span>
52 52​
53<span style="color:#0057ae;">@link-color:</span> <span style="color:#b08000;">#428bca</span>; <span style="color:#898887;">// sea blue</span> 53​<span style="color:#0057ae;">@link-color:</span> <span style="color:#aa5500;">#428bca</span>; <span style="color:#898887;">// sea blue</span>
54<span style="color:#0057ae;">@link-color-hover:</span> <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@link-color</span>, <span style="color:#b08000;">10%</span>); 54​<span style="color:#0057ae;">@link-color-hover:</span> <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@link-color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);
55 55​
56a, <span style="color:#644a9b;">.link</span> { 56​a, <span style="color:#644a9b;">.link</span> {
57 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@link-color</span>; 57​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@link-color</span>;
58} 58​}
59 59​
60a<span style="color:#b08000;">:hover</span> { 60​a<span style="color:#b08000;">:hover</span> {
61 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@link-color-hover</span>; 61​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@link-color-hover</span>;
62} 62​}
63 63​
64<span style="color:#644a9b;">.widget</span> { 64​<span style="color:#644a9b;">.widget</span> {
65 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">#fff</span>; 65​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#fff</span>;
66 <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@link-color</span>; 66​ <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@link-color</span>;
67} 67​}
68 68​
69<span style="color:#898887;">// Variable interpolation</span> 69​<span style="color:#898887;">// Variable interpolation</span>
70 70​
71<span style="color:#0057ae;">@my-selector:</span> banner; 71​<span style="color:#0057ae;">@my-selector:</span> banner;
72 72​
73<span style="color:#644a9b;">.</span><span style="color:#0057ae;">@{my-selector}</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@s</span> = <span style="color:#644a9b;font-weight:bold;">calc</span>(<span style="color:#bf0303;">&quot;s&quot;</span>); <span style="color:#0057ae;">@{s}</span> = <span style="color:#644a9b;font-weight:bold;">calc</span>(<span style="color:#bf0303;">&quot;dddd&quot;</span>)) { 73​<span style="color:#644a9b;">.</span><span style="color:#0057ae;">@{my-selector}</span> <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@s</span> = <span style="color:#644a9b;font-weight:bold;">calc</span>(<span style="color:#bf0303;">&quot;s&quot;</span>); <span style="color:#0057ae;">@{s}</span> = <span style="color:#644a9b;font-weight:bold;">calc</span>(<span style="color:#bf0303;">&quot;dddd&quot;</span>)) {
74 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>; 74​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
75 <span style="font-weight:bold;">line-height</span>+: <span style="color:#b08000;">40px</span>; 75​ <span style="font-weight:bold;">line-height</span>+: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>;
76 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">auto</span>; 76​ <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#644a9b;font-weight:bold;">auto</span>;
77} 77​}
78 78​
79<span style="color:#0057ae;">@images:</span> <span style="color:#bf0303;">&quot;../img&quot;</span>; 79​<span style="color:#0057ae;">@images:</span> <span style="color:#bf0303;">&quot;../img&quot;</span>;
80 80​
81body { 81​body {
82 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">#444</span>; 82​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#444</span>;
83 <span style="font-weight:bold;">background</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;</span><span style="color:#0057ae;">@{images}</span><span style="color:#bf0303;">/white-sand.png&quot;</span>); 83​ <span style="font-weight:bold;">background</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;</span><span style="color:#0057ae;">@{images}</span><span style="color:#bf0303;">/white-sand.png&quot;</span>);
84} 84​}
85 85​
86<span style="color:#0057ae;">@themes:</span> <span style="color:#bf0303;">&quot;../../src/themes&quot;</span>; 86​<span style="color:#0057ae;">@themes:</span> <span style="color:#bf0303;">&quot;../../src/themes&quot;</span>;
87 87​
88<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;</span><span style="color:#0057ae;">@{themes}</span><span style="color:#bf0303;">/tidal-wave.less&quot;</span>; 88​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;</span><span style="color:#0057ae;">@{themes}</span><span style="color:#bf0303;">/tidal-wave.less&quot;</span>;
89 89​
90<span style="color:#0057ae;">@property:</span> color; 90​<span style="color:#0057ae;">@property:</span> color;
91 91​
92<span style="color:#644a9b;">.widget</span> { 92​<span style="color:#644a9b;">.widget</span> {
93 <span style="color:#0057ae;">@{property}</span>: <span style="color:#b08000;">#0ee</span>; 93​ <span style="color:#0057ae;">@{property}</span>: <span style="color:#aa5500;">#0ee</span>;
94 <span style="font-style:italic;">background-</span><span style="color:#0057ae;">@{property}</span>: <span style="color:#b08000;">#999</span>; 94​ <span style="font-style:italic;">background-</span><span style="color:#0057ae;">@{property}</span>: <span style="color:#aa5500;">#999</span>;
95} 95​}
96 96​
97<span style="color:#898887;">// Variable names</span> 97​<span style="color:#898887;">// Variable names</span>
98 98​
99<span style="color:#0057ae;">@fnord:</span> <span style="color:#bf0303;">&quot;I am fnord.&quot;</span>; 99​<span style="color:#0057ae;">@fnord:</span> <span style="color:#bf0303;">&quot;I am fnord.&quot;</span>;
100<span style="color:#0057ae;">@var:</span> <span style="color:#bf0303;">&quot;fnord&quot;</span>; 100​<span style="color:#0057ae;">@var:</span> <span style="color:#bf0303;">&quot;fnord&quot;</span>;
101 101​
102<span style="color:#644a9b;">.variable-names-example</span> { 102​<span style="color:#644a9b;">.variable-names-example</span> {
103 <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">@@var</span>; 103​ <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">@@var</span>;
104} 104​}
105 105​
106<span style="color:#898887;">// Lazy Evaluation</span> 106​<span style="color:#898887;">// Lazy Evaluation</span>
107 107​
108<span style="color:#644a9b;">.lazy-eval</span> { 108​<span style="color:#644a9b;">.lazy-eval</span> {
109 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">@var</span>; 109​ <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">@var</span>;
110} 110​}
111 111​
112<span style="color:#0057ae;">@var:</span> <span style="color:#0057ae;">@a</span>; 112​<span style="color:#0057ae;">@var:</span> <span style="color:#0057ae;">@a</span>;
113<span style="color:#0057ae;">@a:</span> <span style="color:#b08000;">9%</span>; 113​<span style="color:#0057ae;">@a:</span> <span style="color:#b08000;">9</span><span style="color:#0057ae;">%</span>;
114 114​
115<span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">0</span>; 115​<span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">0</span>;
116<span style="color:#644a9b;">.class</span> { 116​<span style="color:#644a9b;">.class</span> {
117 <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">1</span>; 117​ <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">1</span>;
118 <span style="color:#644a9b;">.brass</span> { 118​ <span style="color:#644a9b;">.brass</span> {
119 <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">2</span>; 119​ <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">2</span>;
120 <span style="font-style:italic;">three</span>: <span style="color:#0057ae;">@var</span>; 120​ <span style="font-style:italic;">three</span>: <span style="color:#0057ae;">@var</span>;
121 <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">3</span>; 121​ <span style="color:#0057ae;">@var:</span> <span style="color:#b08000;">3</span>;
122 } 122​ }
123 <span style="font-style:italic;">one</span>: <span style="color:#0057ae;">@var</span>; 123​ <span style="font-style:italic;">one</span>: <span style="color:#0057ae;">@var</span>;
124} 124​}
125 125​
126<span style="color:#898887;">// Default Variables</span> 126​<span style="color:#898887;">// Default Variables</span>
127 127​
128<span style="color:#0057ae;">@base-color:</span> <span style="color:#b08000;">green</span>; 128​<span style="color:#0057ae;">@base-color:</span> <span style="color:#aa5500;">green</span>;
129<span style="color:#0057ae;">@dark-color:</span> <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@base-color</span>, <span style="color:#b08000;">10%</span>); 129​<span style="color:#0057ae;">@dark-color:</span> <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@base-color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);
130 130​
131<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;library.less&quot;</span>; 131​<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;library.less&quot;</span>;
132<span style="color:#0057ae;">@base-color:</span> <span style="color:#b08000;">red</span>; 132​<span style="color:#0057ae;">@base-color:</span> <span style="color:#aa5500;">red</span>;
133 133​
134<span style="color:#898887;">// Extend</span> 134​<span style="color:#898887;">// Extend</span>
135 135​
136nav ul { 136​nav ul {
137 &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.inline</span>); 137​ &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.inline</span>);
138 <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">blue</span>; 138​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">blue</span>;
139} 139​}
140<span style="color:#644a9b;">.inline</span> { 140​<span style="color:#644a9b;">.inline</span> {
141 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 141​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
142} 142​}
143 143​
144<span style="color:#898887;">// Extend Syntax</span> 144​<span style="color:#898887;">// Extend Syntax</span>
145 145​
146<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.f</span>) {} 146​<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.f</span>) {}
147<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.g</span>) {} 147​<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.g</span>) {}
148 148​
149<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.f</span>, <span style="color:#644a9b;">.g</span>) {} 149​<span style="color:#644a9b;">.e</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.f</span>, <span style="color:#644a9b;">.g</span>) {}
Show All 14 Lines
164 164​
165pre<span style="color:#b08000;">:hover:extend</span>(div pre), 165​pre<span style="color:#b08000;">:hover:extend</span>(div pre),
166<span style="color:#644a9b;">.some-class</span><span style="color:#b08000;">:extend</span>(div pre) {} 166​<span style="color:#644a9b;">.some-class</span><span style="color:#b08000;">:extend</span>(div pre) {}
167 167​
168<span style="color:#898887;">// Extending Nested Selectors</span> 168​<span style="color:#898887;">// Extending Nested Selectors</span>
169 169​
170<span style="color:#644a9b;">.bucket</span> { 170​<span style="color:#644a9b;">.bucket</span> {
171 tr { 171​ tr {
172 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 172​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
173 } 173​ }
174} 174​}
175<span style="color:#644a9b;">.some-class</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span> tr) {} 175​<span style="color:#644a9b;">.some-class</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span> tr) {}
176 176​
177<span style="color:#898887;">// Exact Matching with Extend</span> 177​<span style="color:#898887;">// Exact Matching with Extend</span>
178 178​
179*<span style="color:#644a9b;">.class</span> { 179​*<span style="color:#644a9b;">.class</span> {
180 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 180​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
181} 181​}
182<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.class</span>) {} 182​<span style="color:#644a9b;">.noStar</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.class</span>) {}
183 183​
184link<span style="color:#b08000;">:hover:visited</span> { 184​link<span style="color:#b08000;">:hover:visited</span> {
185 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 185​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
186} 186​}
187<span style="color:#644a9b;">.selector</span><span style="color:#b08000;">:extend</span>(link<span style="color:#b08000;">:visited:hover</span>) {} 187​<span style="color:#644a9b;">.selector</span><span style="color:#b08000;">:extend</span>(link<span style="color:#b08000;">:visited:hover</span>) {}
188 188​
189<span style="color:#898887;">// nth Expression</span> 189​<span style="color:#898887;">// nth Expression</span>
190 190​
191<span style="color:#b08000;">:nth-child</span>(<span style="color:#b08000;">1</span>n<span style="color:#b08000;">+3</span>) { 191​<span style="color:#b08000;">:nth-child</span>(<span style="color:#b08000;">1</span>n<span style="color:#b08000;">+3</span>) {
192 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 192​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
193} 193​}
194<span style="color:#644a9b;">.child</span><span style="color:#b08000;">:extend</span>(<span style="color:#b08000;">:nth-child</span>(n+3)) {} 194​<span style="color:#644a9b;">.child</span><span style="color:#b08000;">:extend</span>(<span style="color:#b08000;">:nth-child</span>(n+3)) {}
195 195​
196<span style="color:#0095ff;font-weight:bold;">[title=identifier]</span> { 196​<span style="color:#0095ff;font-weight:bold;">[title=identifier]</span> {
197 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 197​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
198} 198​}
199<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">'identifier'</span><span style="color:#0095ff;font-weight:bold;">]</span> { 199​<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">'identifier'</span><span style="color:#0095ff;font-weight:bold;">]</span> {
200 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 200​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
201} 201​}
202<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">&quot;identifier&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> { 202​<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">&quot;identifier&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
203 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 203​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
204} 204​}
205 205​
206<span style="color:#644a9b;">.noQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=identifier]</span>) {} 206​<span style="color:#644a9b;">.noQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=identifier]</span>) {}
207<span style="color:#644a9b;">.singleQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">'identifier'</span><span style="color:#0095ff;font-weight:bold;">]</span>) {} 207​<span style="color:#644a9b;">.singleQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">'identifier'</span><span style="color:#0095ff;font-weight:bold;">]</span>) {}
208<span style="color:#644a9b;">.doubleQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">&quot;identifier&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>) {} 208​<span style="color:#644a9b;">.doubleQuote</span><span style="color:#b08000;">:extend</span>(<span style="color:#0095ff;font-weight:bold;">[title=</span><span style="color:#bf0303;">&quot;identifier&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>) {}
209 209​
210<span style="color:#898887;">// Extend &quot;all&quot;</span> 210​<span style="color:#898887;">// Extend &quot;all&quot;</span>
211 211​
212<span style="color:#644a9b;">.a.b.test</span>, 212​<span style="color:#644a9b;">.a.b.test</span>,
213<span style="color:#644a9b;">.test.c</span> { 213​<span style="color:#644a9b;">.test.c</span> {
214 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">orange</span>; 214​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">orange</span>;
215} 215​}
216<span style="color:#644a9b;">.test</span> { 216​<span style="color:#644a9b;">.test</span> {
217 &amp;<span style="color:#b08000;">:hover</span> { 217​ &amp;<span style="color:#b08000;">:hover</span> {
218 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">green</span>; 218​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
219 } 219​ }
220} 220​}
221 221​
222<span style="color:#644a9b;">.replacement</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.test</span> all) {} 222​<span style="color:#644a9b;">.replacement</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.test</span> all) {}
223 223​
224<span style="color:#898887;">// Selector Interpolation with Extend</span> 224​<span style="color:#898887;">// Selector Interpolation with Extend</span>
225 225​
226<span style="color:#644a9b;">.bucket</span> { 226​<span style="color:#644a9b;">.bucket</span> {
227 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 227​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
228} 228​}
229<span style="color:#0057ae;">@{variable}</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span>) {} 229​<span style="color:#0057ae;">@{variable}</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.bucket</span>) {}
230<span style="color:#0057ae;">@variable:</span> <span style="color:#b08000;">.</span>selector; 230​<span style="color:#0057ae;">@variable:</span> <span style="color:#b08000;">.</span>selector;
231 231​
232<span style="color:#898887;">// Scoping / Extend Inside @media</span> 232​<span style="color:#898887;">// Scoping / Extend Inside @media</span>
233 233​
234<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 234​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
235 <span style="color:#644a9b;">.screenClass</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.selector</span>) {} 235​ <span style="color:#644a9b;">.screenClass</span><span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.selector</span>) {}
236 <span style="color:#644a9b;">.selector</span> { 236​ <span style="color:#644a9b;">.selector</span> {
237 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">black</span>; 237​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
238 } 238​ }
239} 239​}
240<span style="color:#644a9b;">.selector</span> { 240​<span style="color:#644a9b;">.selector</span> {
241 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 241​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
242} 242​}
243<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> { 243​<span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> {
244 <span style="color:#644a9b;">.selector</span> { 244​ <span style="color:#644a9b;">.selector</span> {
245 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 245​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
246 } 246​ }
247} 247​}
248 248​
249<span style="color:#898887;">// Use Cases for Extend</span> 249​<span style="color:#898887;">// Use Cases for Extend</span>
250 250​
251<span style="color:#644a9b;">.animal</span> { 251​<span style="color:#644a9b;">.animal</span> {
252 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">black</span>; 252​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
253 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">white</span>; 253​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">white</span>;
254} 254​}
255<span style="color:#644a9b;">.bear</span> { 255​<span style="color:#644a9b;">.bear</span> {
256 &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.animal</span>); 256​ &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.animal</span>);
257 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">brown</span>; 257​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">brown</span>;
258} 258​}
259 259​
260<span style="color:#644a9b;">.my-inline-block</span> { 260​<span style="color:#644a9b;">.my-inline-block</span> {
261 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>; 261​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>;
262 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">0</span>; 262​ <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">0</span>;
263} 263​}
264<span style="color:#644a9b;">.thing1</span> { 264​<span style="color:#644a9b;">.thing1</span> {
265 &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.my-inline-block</span>); 265​ &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.my-inline-block</span>);
266} 266​}
267<span style="color:#644a9b;">.thing2</span> { 267​<span style="color:#644a9b;">.thing2</span> {
268 &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.my-inline-block</span>); 268​ &amp;<span style="color:#b08000;">:extend</span>(<span style="color:#644a9b;">.my-inline-block</span>);
269} 269​}
270 270​
271<span style="color:#898887;">// Mixins</span> 271​<span style="color:#898887;">// Mixins</span>
272 272​
273<span style="color:#644a9b;">.a</span>, <span style="color:#006e28;font-weight:bold;">#b</span> { 273​<span style="color:#644a9b;">.a</span>, <span style="color:#006e28;font-weight:bold;">#b</span> {
274 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 274​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
275} 275​}
276<span style="color:#644a9b;">.mixin-class</span> { 276​<span style="color:#644a9b;">.mixin-class</span> {
277 <span style="color:#644a9b;">.a</span>(); 277​ <span style="color:#644a9b;">.a</span>();
278} 278​}
279<span style="color:#644a9b;">.mixin-id</span> { 279​<span style="color:#644a9b;">.mixin-id</span> {
280 <span style="color:#006e28;font-weight:bold;">#b</span>(); 280​ <span style="color:#006e28;font-weight:bold;">#b</span>();
281} 281​}
282 282​
283<span style="color:#898887;">// Not Outputting the Mixin</span> 283​<span style="color:#898887;">// Not Outputting the Mixin</span>
284 284​
285<span style="color:#644a9b;">.my-mixin</span> { 285​<span style="color:#644a9b;">.my-mixin</span> {
286 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">black</span>; 286​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
287} 287​}
288<span style="color:#644a9b;">.my-other-mixin</span>() { 288​<span style="color:#644a9b;">.my-other-mixin</span>() {
289 <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">white</span>; 289​ <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">white</span>;
290} 290​}
291<span style="color:#644a9b;">.class</span> { 291​<span style="color:#644a9b;">.class</span> {
292 <span style="color:#644a9b;">.my-mixin</span>; 292​ <span style="color:#644a9b;">.my-mixin</span>;
293 <span style="color:#644a9b;">.my-other-mixin</span>; 293​ <span style="color:#644a9b;">.my-other-mixin</span>;
294} 294​}
295 295​
296<span style="color:#898887;">// Selectors in Mixins</span> 296​<span style="color:#898887;">// Selectors in Mixins</span>
297 297​
298<span style="color:#644a9b;">.my-hover-mixin</span>() { 298​<span style="color:#644a9b;">.my-hover-mixin</span>() {
299 &amp;<span style="color:#b08000;">:hover</span> { 299​ &amp;<span style="color:#b08000;">:hover</span> {
300 <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1px</span> <span style="color:#b08000;">solid</span> <span style="color:#b08000;">red</span>; 300​ <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">red</span>;
301 } 301​ }
302} 302​}
303button { 303​button {
304 <span style="color:#644a9b;">.my-hover-mixin</span>(); 304​ <span style="color:#644a9b;">.my-hover-mixin</span>();
305} 305​}
306 306​
307<span style="color:#898887;">// Namespaces</span> 307​<span style="color:#898887;">// Namespaces</span>
308 308​
309<span style="color:#006e28;font-weight:bold;">#outer</span> { 309​<span style="color:#006e28;font-weight:bold;">#outer</span> {
310 <span style="color:#644a9b;">.inner</span> { 310​ <span style="color:#644a9b;">.inner</span> {
311 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 311​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
312 } 312​ }
313} 313​}
314 314​
315<span style="color:#644a9b;">.c</span> { 315​<span style="color:#644a9b;">.c</span> {
316 <span style="color:#006e28;font-weight:bold;">#outer</span> &gt; <span style="color:#644a9b;">.inner</span>; 316​ <span style="color:#006e28;font-weight:bold;">#outer</span> &gt; <span style="color:#644a9b;">.inner</span>;
317} 317​}
318 318​
319<span style="color:#644a9b;">.d</span> { 319​<span style="color:#644a9b;">.d</span> {
Show All 18 Lines
338<span style="color:#006e28;font-weight:bold;">#sp_1</span> <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) { 338​<span style="color:#006e28;font-weight:bold;">#sp_1</span> <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) {
339 <span style="color:#006e28;font-weight:bold;">#sp_2</span> <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) { 339​ <span style="color:#006e28;font-weight:bold;">#sp_2</span> <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) {
340 <span style="color:#644a9b;">.mixin</span>() <span style="font-weight:bold;">when not</span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) { <span style="color:#898887;">/* */</span> } 340​ <span style="color:#644a9b;">.mixin</span>() <span style="font-weight:bold;">when not</span>(<span style="color:#644a9b;font-weight:bold;">default</span>()) { <span style="color:#898887;">/* */</span> }
341 } 341​ }
342} 342​}
343 343​
344<span style="color:#898887;">// The !important keyword</span> 344​<span style="color:#898887;">// The !important keyword</span>
345 345​
346<span style="color:#644a9b;">.foo</span> (<span style="color:#0057ae;">@bg</span>: <span style="color:#b08000;">#f5f5f5</span>, <span style="color:#0057ae;">@color</span>: <span style="color:#b08000;">#900</span>) { 346​<span style="color:#644a9b;">.foo</span> (<span style="color:#0057ae;">@bg</span>: <span style="color:#aa5500;">#f5f5f5</span>, <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#900</span>) {
347 <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@bg</span>; 347​ <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">@bg</span>;
348 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span> <span style="color:#0057ae;">!important</span>; 348​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span> <span style="color:#0057ae;">!important</span>;
349} 349​}
350<span style="color:#644a9b;">.unimportant</span> { 350​<span style="color:#644a9b;">.unimportant</span> {
351 <span style="color:#644a9b;">.foo</span>(); 351​ <span style="color:#644a9b;">.foo</span>();
352} 352​}
353<span style="color:#644a9b;">.important</span> { 353​<span style="color:#644a9b;">.important</span> {
354 <span style="color:#644a9b;">.foo</span>() <span style="color:#0057ae;">!important</span>; 354​ <span style="color:#644a9b;">.foo</span>() <span style="color:#0057ae;">!important</span>;
355} 355​}
356 356​
357<span style="color:#898887;">// Parametric Mixins</span> 357​<span style="color:#898887;">// Parametric Mixins</span>
358 358​
359<span style="color:#644a9b;">.border-radius</span>(<span style="color:#0057ae;">@radius</span>) { 359​<span style="color:#644a9b;">.border-radius</span>(<span style="color:#0057ae;">@radius</span>) {
360 <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">@radius</span>; 360​ <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
361 <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">@radius</span>; 361​ <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
362 <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">@radius</span>; 362​ <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">@radius</span>;
363} 363​}
364 364​
365<span style="color:#006e28;font-weight:bold;">#header</span> { 365​<span style="color:#006e28;font-weight:bold;">#header</span> {
366 <span style="color:#644a9b;">.border-radius</span>(<span style="color:#b08000;">4px</span>); 366​ <span style="color:#644a9b;">.border-radius</span>(<span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span>);
367} 367​}
368<span style="color:#644a9b;">.button</span> { 368​<span style="color:#644a9b;">.button</span> {
369 <span style="color:#644a9b;">.border-radius</span>(<span style="color:#b08000;">6px</span>); 369​ <span style="color:#644a9b;">.border-radius</span>(<span style="color:#b08000;">6</span><span style="color:#0057ae;">px</span>);
370} 370​}
371 371​
372<span style="color:#644a9b;">.border-radius</span>(<span style="color:#0057ae;">@radius</span>: <span style="color:#b08000;">5px</span>) { 372​<span style="color:#644a9b;">.border-radius</span>(<span style="color:#0057ae;">@radius</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>) {
373 <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">@radius</span>; 373​ <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
374 <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">@radius</span>; 374​ <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">@radius</span>;
375 <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">@radius</span>; 375​ <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">@radius</span>;
376} 376​}
377 377​
378<span style="color:#644a9b;">.wrap</span>() { 378​<span style="color:#644a9b;">.wrap</span>() {
379 <span style="font-weight:bold;">text-wrap</span>: wrap; 379​ <span style="font-weight:bold;">text-wrap</span>: wrap;
380 <span style="font-weight:bold;">white-space</span>: -moz-pre-wrap; 380​ <span style="font-weight:bold;">white-space</span>: -moz-pre-wrap;
Show All 13 Lines392<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">2</span>) {
394 padding-2<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>; 394​ padding-2<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>;
395} 395​}
396<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">2</span>) { 396​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>; <span style="color:#0057ae;">@padding</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">2</span>) {
397 color-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@color</span>; 397​ color-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@color</span>;
398 padding-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>; 398​ padding-3<span style="color:#b08000;">:</span> <span style="color:#ff5500;">@padding</span>;
399 <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span>; 399​ <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span> <span style="color:#0057ae;">@margin</span>;
400} 400​}
401<span style="color:#644a9b;">.some</span> <span style="color:#644a9b;">.selector</span> div { 401​<span style="color:#644a9b;">.some</span> <span style="color:#644a9b;">.selector</span> div {
402 <span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">#008000</span>); 402​ <span style="color:#644a9b;">.mixin</span>(<span style="color:#aa5500;">#008000</span>);
403} 403​}
404 404​
405<span style="color:#898887;">// Named parameters</span> 405​<span style="color:#898887;">// Named parameters</span>
406 406​
407<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>: <span style="color:#b08000;">black</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">10px</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">20px</span>) { 407​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">black</span>; <span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>) {
408 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span>; 408​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@color</span>;
409 <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span>; 409​ <span style="font-weight:bold;">margin</span>: <span style="color:#0057ae;">@margin</span>;
410 <span style="font-weight:bold;">padding</span>: <span style="color:#0057ae;">@padding</span>; 410​ <span style="font-weight:bold;">padding</span>: <span style="color:#0057ae;">@padding</span>;
411} 411​}
412<span style="color:#644a9b;">.class1</span> { 412​<span style="color:#644a9b;">.class1</span> {
413 <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">20px</span>; <span style="color:#0057ae;">@color</span>: <span style="color:#b08000;">#33acfe</span>); 413​ <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@margin</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>; <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#33acfe</span>);
414} 414​}
415<span style="color:#644a9b;">.class2</span> { 415​<span style="color:#644a9b;">.class2</span> {
416 <span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">#efca44</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">40px</span>); 416​ <span style="color:#644a9b;">.mixin</span>(<span style="color:#aa5500;">#efca44</span>; <span style="color:#0057ae;">@padding</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>);
417} 417​}
418 418​
419<span style="color:#898887;">// The @arguments Variable</span> 419​<span style="color:#898887;">// The @arguments Variable</span>
420 420​
421<span style="color:#644a9b;">.box-shadow</span>(<span style="color:#0057ae;">@x</span>: <span style="color:#b08000;">0</span>; <span style="color:#0057ae;">@y</span>: <span style="color:#b08000;">0</span>; <span style="color:#0057ae;">@blur</span>: <span style="color:#b08000;">1px</span>; <span style="color:#0057ae;">@color</span>: <span style="color:#b08000;">#000</span>) { 421​<span style="color:#644a9b;">.box-shadow</span>(<span style="color:#0057ae;">@x</span>: <span style="color:#b08000;">0</span>; <span style="color:#0057ae;">@y</span>: <span style="color:#b08000;">0</span>; <span style="color:#0057ae;">@blur</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>; <span style="color:#0057ae;">@color</span>: <span style="color:#aa5500;">#000</span>) {
422 <span style="font-weight:bold;">-webkit-box-shadow</span>: <span style="color:#0057ae;">@arguments</span>; 422​ <span style="font-weight:bold;">-webkit-box-shadow</span>: <span style="color:#0057ae;">@arguments</span>;
423 <span style="font-weight:bold;">-moz-box-shadow</span>: <span style="color:#0057ae;">@arguments</span>; 423​ <span style="font-weight:bold;">-moz-box-shadow</span>: <span style="color:#0057ae;">@arguments</span>;
424 <span style="font-weight:bold;">box-shadow</span>: <span style="color:#0057ae;">@arguments</span>; 424​ <span style="font-weight:bold;">box-shadow</span>: <span style="color:#0057ae;">@arguments</span>;
425} 425​}
426<span style="color:#644a9b;">.big-block</span> { 426​<span style="color:#644a9b;">.big-block</span> {
427 <span style="color:#644a9b;">.box-shadow</span>(<span style="color:#b08000;">2px</span>; <span style="color:#b08000;">5px</span>); 427​ <span style="color:#644a9b;">.box-shadow</span>(<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>; <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>);
428} 428​}
429 429​
430<span style="color:#898887;">// Advanced Arguments and the @rest Variable</span> 430​<span style="color:#898887;">// Advanced Arguments and the @rest Variable</span>
431 431​
432<span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 0-N arguments</span> 432​<span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 0-N arguments</span>
433<span style="color:#644a9b;">.mixin</span>() {} <span style="color:#898887;">// matches exactly 0 arguments</span> 433​<span style="color:#644a9b;">.mixin</span>() {} <span style="color:#898887;">// matches exactly 0 arguments</span>
434<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>: <span style="color:#b08000;">1</span>) {} <span style="color:#898887;">// matches 0-1 arguments</span> 434​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>: <span style="color:#b08000;">1</span>) {} <span style="color:#898887;">// matches 0-1 arguments</span>
435<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>: <span style="color:#b08000;">1</span>; <span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 0-N arguments</span> 435​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>: <span style="color:#b08000;">1</span>; <span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 0-N arguments</span>
436<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>; <span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 1-N arguments</span> 436​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>; <span style="color:#b08000;">...</span>) {} <span style="color:#898887;">// matches 1-N arguments</span>
437 437​
438<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@rest</span><span style="color:#b08000;">...</span>) { 438​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@rest</span><span style="color:#b08000;">...</span>) {
439 <span style="color:#898887;">// @rest is bound to arguments after @a</span> 439​ <span style="color:#898887;">// @rest is bound to arguments after @a</span>
440 <span style="color:#898887;">// @arguments is bound to all arguments</span> 440​ <span style="color:#898887;">// @arguments is bound to all arguments</span>
441} 441​}
442 442​
443<span style="color:#898887;">// Pattern-matching</span> 443​<span style="color:#898887;">// Pattern-matching</span>
444 444​
445<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@s</span>; <span style="color:#0057ae;">@color</span>) { <span style="color:#644a9b;">...</span> } 445​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@s</span>; <span style="color:#0057ae;">@color</span>) { <span style="color:#644a9b;">...</span> }
446 446​
447<span style="color:#644a9b;">.class</span> { 447​<span style="color:#644a9b;">.class</span> {
448 <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@switch</span>; <span style="color:#b08000;">#888</span>); 448​ <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@switch</span>; <span style="color:#aa5500;">#888</span>);
449} 449​}
450 450​
451<span style="color:#644a9b;">.mixin</span>(dark; <span style="color:#0057ae;">@color</span>) { 451​<span style="color:#644a9b;">.mixin</span>(dark; <span style="color:#0057ae;">@color</span>) {
452 <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@color</span>, <span style="color:#b08000;">10%</span>); 452​ <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;font-weight:bold;">darken</span>(<span style="color:#0057ae;">@color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);
453} 453​}
454<span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">light</span>; <span style="color:#0057ae;">@color</span>) { 454​<span style="color:#644a9b;">.mixin</span>(<span style="color:#b08000;">light</span>; <span style="color:#0057ae;">@color</span>) {
455 <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;font-weight:bold;">lighten</span>(<span style="color:#0057ae;">@color</span>, <span style="color:#b08000;">10%</span>); 455​ <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;font-weight:bold;">lighten</span>(<span style="color:#0057ae;">@color</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>);
456} 456​}
457<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@_</span>; <span style="color:#0057ae;">@color</span>) { 457​<span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@_</span>; <span style="color:#0057ae;">@color</span>) {
458 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>; 458​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>;
459} 459​}
460 460​
461<span style="color:#0057ae;">@switch:</span> <span style="color:#b08000;">light</span>; 461​<span style="color:#0057ae;">@switch:</span> <span style="color:#b08000;">light</span>;
462 462​
463<span style="color:#644a9b;">.class</span> { 463​<span style="color:#644a9b;">.class</span> {
464 <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@switch</span>; <span style="color:#b08000;">#888</span>); 464​ <span style="color:#644a9b;">.mixin</span>(<span style="color:#0057ae;">@switch</span>; <span style="color:#aa5500;">#888</span>);
465} 465​}
466 466​
467<span style="color:#898887;">// Mixins as Functions</span> 467​<span style="color:#898887;">// Mixins as Functions</span>
468 468​
469<span style="color:#644a9b;">.average</span>(<span style="color:#0057ae;">@x</span>, <span style="color:#0057ae;">@y</span>) { 469​<span style="color:#644a9b;">.average</span>(<span style="color:#0057ae;">@x</span>, <span style="color:#0057ae;">@y</span>) {
470 <span style="color:#0057ae;">@average:</span> ((<span style="color:#0057ae;">@x</span> + <span style="color:#0057ae;">@y</span>) / <span style="color:#b08000;">2</span>); 470​ <span style="color:#0057ae;">@average:</span> ((<span style="color:#0057ae;">@x</span> + <span style="color:#0057ae;">@y</span>) / <span style="color:#b08000;">2</span>);
471} 471​}
472 472​
473div { 473​div {
474 <span style="color:#644a9b;">.average</span>(<span style="color:#b08000;">16px</span>, <span style="color:#b08000;">50px</span>); <span style="color:#898887;">// &quot;call&quot; the mixin</span> 474​ <span style="color:#644a9b;">.average</span>(<span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>); <span style="color:#898887;">// &quot;call&quot; the mixin</span>
475 <span style="font-weight:bold;">padding</span>: <span style="color:#0057ae;">@average</span>; <span style="color:#898887;">// use its &quot;return&quot; value</span> 475​ <span style="font-weight:bold;">padding</span>: <span style="color:#0057ae;">@average</span>; <span style="color:#898887;">// use its &quot;return&quot; value</span>
476} 476​}
477 477​
478<span style="color:#898887;">// Passing Rulesets to Mixins</span> 478​<span style="color:#898887;">// Passing Rulesets to Mixins</span>
479 479​
480<span style="color:#898887;">// declare detached ruleset</span> 480​<span style="color:#898887;">// declare detached ruleset</span>
481<span style="color:#0057ae;">@detached-ruleset:</span> { <span style="font-weight:bold;">background</span>: <span style="color:#b08000;">red</span>; }; 481​<span style="color:#0057ae;">@detached-ruleset:</span> { <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>; };
482 482​
483<span style="color:#898887;">// use detached ruleset</span> 483​<span style="color:#898887;">// use detached ruleset</span>
484<span style="color:#644a9b;">.top</span> { 484​<span style="color:#644a9b;">.top</span> {
485 <span style="color:#ff5500;">@detached-ruleset</span>(); 485​ <span style="color:#ff5500;">@detached-ruleset</span>();
486} 486​}
487 487​
488<span style="color:#644a9b;">.desktop-and-old-ie</span>(<span style="color:#0057ae;">@rules</span>) { 488​<span style="color:#644a9b;">.desktop-and-old-ie</span>(<span style="color:#0057ae;">@rules</span>) {
489 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">1200px</span>) { <span style="color:#ff5500;">@rules</span>(); } 489​ <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">1200</span><span style="color:#0057ae;">px</span>) { <span style="color:#ff5500;">@rules</span>(); }
490 html<span style="color:#644a9b;">.lt-ie9</span> &amp; { <span style="color:#ff5500;">@rules</span>(); } 490​ html<span style="color:#644a9b;">.lt-ie9</span> &amp; { <span style="color:#ff5500;">@rules</span>(); }
491} 491​}
492 492​
493header { 493​header {
494 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">blue</span>; 494​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">blue</span>;
495 495​
496 <span style="color:#644a9b;">.desktop-and-old-ie</span>({ 496​ <span style="color:#644a9b;">.desktop-and-old-ie</span>({
497 background-color: <span style="color:#b08000;">red</span>; 497​ background-color: <span style="color:#aa5500;">red</span>;
498 }); 498​ });
499} 499​}
500 500​
501<span style="color:#0057ae;">@my-ruleset:</span> { 501​<span style="color:#0057ae;">@my-ruleset:</span> {
502 <span style="color:#644a9b;">.my-selector</span> { 502​ <span style="color:#644a9b;">.my-selector</span> {
503 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">black</span>; 503​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
504 } 504​ }
505}; 505​};
506 506​
507<span style="color:#0057ae;">@my-ruleset:</span> { 507​<span style="color:#0057ae;">@my-ruleset:</span> {
508 <span style="color:#644a9b;">.my-selector</span> { 508​ <span style="color:#644a9b;">.my-selector</span> {
509 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">tv</span> { 509​ <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">tv</span> {
510 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">black</span>; 510​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
511 } 511​ }
512 } 512​ }
513 }; 513​ };
514<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">portrait</span>) { 514​<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">portrait</span>) {
515 <span style="color:#ff5500;">@my-ruleset</span>(); 515​ <span style="color:#ff5500;">@my-ruleset</span>();
516} 516​}
517 517​
518<span style="color:#898887;">// Scoping</span> 518​<span style="color:#898887;">// Scoping</span>
Show All 23 Lines
542<span style="color:#898887;">multiple: include the file multiple times</span> 542​<span style="color:#898887;">multiple: include the file multiple times</span>
543<span style="color:#898887;">optional: continue compiling when file is not found</span> 543​<span style="color:#898887;">optional: continue compiling when file is not found</span>
544<span style="color:#898887;"> */</span> 544​<span style="color:#898887;"> */</span>
545 545​
546<span style="color:#ff5500;">@import</span> (optional, reference) <span style="color:#bf0303;">&quot;foo.less&quot;</span>; 546​<span style="color:#ff5500;">@import</span> (optional, reference) <span style="color:#bf0303;">&quot;foo.less&quot;</span>;
547 547​
548<span style="color:#898887;">// Mixin Guards</span> 548​<span style="color:#898887;">// Mixin Guards</span>
549 549​
550<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">lightness</span>(<span style="color:#0057ae;">@a</span>) &gt;= <span style="color:#b08000;">50%</span>) { 550​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">lightness</span>(<span style="color:#0057ae;">@a</span>) &gt;= <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>) {
551 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">black</span>; 551​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">black</span>;
552} 552​}
553<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">lightness</span>(<span style="color:#0057ae;">@a</span>) &lt; <span style="color:#b08000;">50%</span>) { 553​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">lightness</span>(<span style="color:#0057ae;">@a</span>) &lt; <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>) {
554 <span style="font-weight:bold;">background-color</span>: <span style="color:#b08000;">white</span>; 554​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">white</span>;
555} 555​}
556<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) { 556​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) {
557 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@a</span>; 557​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">@a</span>;
558} 558​}
559 559​
560<span style="color:#898887;">// Guard Comparison Operators</span> 560​<span style="color:#898887;">// Guard Comparison Operators</span>
561 561​
562<span style="color:#644a9b;">.truth</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span>) { } 562​<span style="color:#644a9b;">.truth</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span>) { }
Show All 12 Lines
575 575​
576<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">isnumber</span>(<span style="color:#0057ae;">@a</span>)) and (<span style="color:#0057ae;">@a</span> &gt; <span style="color:#b08000;">0</span>) { } 576​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">isnumber</span>(<span style="color:#0057ae;">@a</span>)) and (<span style="color:#0057ae;">@a</span> &gt; <span style="color:#b08000;">0</span>) { }
577<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span> &gt; <span style="color:#b08000;">10</span>), (<span style="color:#0057ae;">@a</span> &lt; <span style="color:#b08000;">-10</span>) { } 577​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@a</span> &gt; <span style="color:#b08000;">10</span>), (<span style="color:#0057ae;">@a</span> &lt; <span style="color:#b08000;">-10</span>) { }
578<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@b</span>) <span style="font-weight:bold;">when not</span> (<span style="color:#0057ae;">@b</span> &gt; <span style="color:#b08000;">0</span>) { } 578​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@b</span>) <span style="font-weight:bold;">when not</span> (<span style="color:#0057ae;">@b</span> &gt; <span style="color:#b08000;">0</span>) { }
579 579​
580<span style="color:#898887;">// Type Checking Functions</span> 580​<span style="color:#898887;">// Type Checking Functions</span>
581 581​
582<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>: <span style="color:#b08000;">0</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">isnumber</span>(<span style="color:#0057ae;">@b</span>)) { } 582​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>: <span style="color:#b08000;">0</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">isnumber</span>(<span style="color:#0057ae;">@b</span>)) { }
583<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>: <span style="color:#b08000;">black</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">iscolor</span>(<span style="color:#0057ae;">@b</span>)) {} 583​<span style="color:#644a9b;">.mixin</span> (<span style="color:#0057ae;">@a</span>; <span style="color:#0057ae;">@b</span>: <span style="color:#aa5500;">black</span>) <span style="font-weight:bold;">when </span>(<span style="color:#644a9b;font-weight:bold;">iscolor</span>(<span style="color:#0057ae;">@b</span>)) {}
584 584​
585button <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@my-option</span> = true) { 585​button <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@my-option</span> = true) {
586 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">white</span>; 586​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">white</span>;
587 587​
588 &amp; <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@my-option</span> = true) { 588​ &amp; <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@my-option</span> = true) {
589 button { 589​ button {
590 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">white</span>; 590​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">white</span>;
591 } 591​ }
592 a { 592​ a {
593 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 593​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
594 } 594​ }
595} 595​}
596} 596​}
597 597​
598<span style="color:#898887;">// Loops</span> 598​<span style="color:#898887;">// Loops</span>
599 599​
600<span style="color:#644a9b;">.loop</span>(<span style="color:#0057ae;">@counter</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@counter</span> &gt; <span style="color:#b08000;">0</span>) { 600​<span style="color:#644a9b;">.loop</span>(<span style="color:#0057ae;">@counter</span>) <span style="font-weight:bold;">when </span>(<span style="color:#0057ae;">@counter</span> &gt; <span style="color:#b08000;">0</span>) {
601 <span style="color:#644a9b;">.loop</span>((<span style="color:#0057ae;">@counter</span> - <span style="color:#b08000;">1</span>)); <span style="color:#898887;">// next iteration</span> 601​ <span style="color:#644a9b;">.loop</span>((<span style="color:#0057ae;">@counter</span> - <span style="color:#b08000;">1</span>)); <span style="color:#898887;">// next iteration</span>
602 <span style="font-weight:bold;">width</span>: (<span style="color:#b08000;">10px</span> * <span style="color:#0057ae;">@counter</span>); <span style="color:#898887;">// code for each iteration</span> 602​ <span style="font-weight:bold;">width</span>: (<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> * <span style="color:#0057ae;">@counter</span>); <span style="color:#898887;">// code for each iteration</span>
603} 603​}
604 604​
605div { 605​div {
606 <span style="color:#644a9b;">.loop</span>(<span style="color:#b08000;">5</span>); <span style="color:#898887;">// launch the loop</span> 606​ <span style="color:#644a9b;">.loop</span>(<span style="color:#b08000;">5</span>); <span style="color:#898887;">// launch the loop</span>
607} 607​}
608 608​
609<span style="color:#898887;">// Merge</span> 609​<span style="color:#898887;">// Merge</span>
610 610​
611<span style="color:#644a9b;">.mixin</span>() { 611​<span style="color:#644a9b;">.mixin</span>() {
612 <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#b08000;">inset</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">10px</span> <span style="color:#b08000;">#555</span>; 612​ <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#b08000;">inset</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">#555</span>;
613} 613​}
614<span style="color:#644a9b;">.myclass</span> { 614​<span style="color:#644a9b;">.myclass</span> {
615 <span style="color:#644a9b;">.mixin</span>(); 615​ <span style="color:#644a9b;">.mixin</span>();
616 <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">20px</span> <span style="color:#b08000;">black</span>; 616​ <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">black</span>;
617} 617​}
618 618​
619<span style="color:#898887;">// Space</span> 619​<span style="color:#898887;">// Space</span>
620 620​
621<span style="color:#644a9b;">.mixin</span>() { 621​<span style="color:#644a9b;">.mixin</span>() {
622 <span style="font-weight:bold;">transform</span>+_: scale(<span style="color:#b08000;">2</span>); 622​ <span style="font-weight:bold;">transform</span>+_: <span style="color:#644a9b;font-weight:bold;">scale</span>(<span style="color:#b08000;">2</span>);
623} 623​}
624<span style="color:#644a9b;">.myclass</span> { 624​<span style="color:#644a9b;">.myclass</span> {
625 <span style="color:#644a9b;">.mixin</span>(); 625​ <span style="color:#644a9b;">.mixin</span>();
626 <span style="font-weight:bold;">transform</span>+_: rotate(<span style="color:#b08000;">15deg</span>); 626​ <span style="font-weight:bold;">transform</span>+_: <span style="color:#644a9b;font-weight:bold;">rotate</span>(<span style="color:#b08000;">15</span><span style="color:#0057ae;">deg</span>);
627} 627​}
628 628​
629<span style="color:#898887;">// Parent Selectors</span> 629​<span style="color:#898887;">// Parent Selectors</span>
630 630​
631a { 631​a {
632 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 632​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
633 &amp;<span style="color:#b08000;">:hover</span> { 633​ &amp;<span style="color:#b08000;">:hover</span> {
634 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">green</span>; 634​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
635 } 635​ }
636} 636​}
637 637​
638<span style="color:#644a9b;">.button</span> { 638​<span style="color:#644a9b;">.button</span> {
639 &amp;-ok { 639​ &amp;-ok {
640 <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;ok.png&quot;</span>); 640​ <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;ok.png&quot;</span>);
641 } 641​ }
642 &amp;-cancel { 642​ &amp;-cancel {
643 <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;cancel.png&quot;</span>); 643​ <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;cancel.png&quot;</span>);
644 } 644​ }
645 645​
646 &amp;-custom { 646​ &amp;-custom {
647 <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;custom.png&quot;</span>); 647​ <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">&quot;custom.png&quot;</span>);
648 } 648​ }
649} 649​}
650 650​
651<span style="color:#644a9b;">.link</span> { 651​<span style="color:#644a9b;">.link</span> {
652 &amp; + &amp; { 652​ &amp; + &amp; {
653 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 653​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
654 } 654​ }
655 655​
656 &amp; &amp; { 656​ &amp; &amp; {
657 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">green</span>; 657​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
658 } 658​ }
659 659​
660 &amp;&amp; { 660​ &amp;&amp; {
661 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 661​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
662 } 662​ }
663 663​
664 &amp;, &amp;ish { 664​ &amp;, &amp;ish {
665 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">cyan</span>; 665​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">cyan</span>;
666 } 666​ }
667} 667​}
668 668​
669<span style="color:#644a9b;">.grand</span> { 669​<span style="color:#644a9b;">.grand</span> {
670 <span style="color:#644a9b;">.parent</span> { 670​ <span style="color:#644a9b;">.parent</span> {
671 &amp; &gt; &amp; { 671​ &amp; &gt; &amp; {
672 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">red</span>; 672​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
673 } 673​ }
674 674​
675 &amp; &amp; { 675​ &amp; &amp; {
676 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">green</span>; 676​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
677 } 677​ }
678 678​
679 &amp;&amp; { 679​ &amp;&amp; {
680 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">blue</span>; 680​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
681 } 681​ }
682 682​
683 &amp;, &amp;ish { 683​ &amp;, &amp;ish {
684 <span style="font-weight:bold;">color</span>: <span style="color:#b08000;">cyan</span>; 684​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">cyan</span>;
685 } 685​ }
686 } 686​ }
687} 687​}
688 688​
689<span style="color:#898887;">// Changing Selector Order</span> 689​<span style="color:#898887;">// Changing Selector Order</span>
690 690​
691<span style="color:#644a9b;">.header</span> { 691​<span style="color:#644a9b;">.header</span> {
692 <span style="color:#644a9b;">.menu</span> { 692​ <span style="color:#644a9b;">.menu</span> {
693 <span style="font-weight:bold;">border-radius</span>: <span style="color:#b08000;">5px</span>; 693​ <span style="font-weight:bold;">border-radius</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>;
694 <span style="color:#644a9b;">.no-borderradius</span> &amp; { 694​ <span style="color:#644a9b;">.no-borderradius</span> &amp; {
695 <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">'images/button-background.png'</span>); 695​ <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;font-weight:bold;">url</span>(<span style="color:#bf0303;">'images/button-background.png'</span>);
696 } 696​ }
697 } 697​ }
698} 698​}
699 699​
700<span style="color:#898887;">// Combinatorial Explosion</span> 700​<span style="color:#898887;">// Combinatorial Explosion</span>
701 701​
702p, a, ul, li { 702​p, a, ul, li {
703 <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">2px</span> <span style="color:#b08000;">dotted</span> <span style="color:#b08000;">#366</span>; 703​ <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">dotted</span> <span style="color:#aa5500;">#366</span>;
704 &amp; + &amp; { 704​ &amp; + &amp; {
705 <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">0</span>; 705​ <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">0</span>;
706 } 706​ }
707} 707​}
708</pre></body></html> 708​</pre></body></html>