autotests/html/highlight.less.dark.html

0001 <!DOCTYPE html>
0002 <html><head>
0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
0004 <title>highlight.less</title>
0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (LESSCSS) - Theme (Breeze Dark)"/>
0006 </head><body style="background-color:#232629;color:#cfcfc2"><pre>
0007 <span style="color:#7a7c7d;">/**</span>
0008 <span style="color:#7a7c7d;"> * Less syntax highlighting test file</span>
0009 <span style="color:#7a7c7d;"> *</span>
0010 <span style="color:#7a7c7d;"> * Based on the Less documentation ((c) 2017 Alexis Sellier, the Less Core Team, Contributors, The MIT License)</span>
0011 <span style="color:#7a7c7d;"> *</span>
0012 <span style="color:#7a7c7d;"> * @see http://lesscss.org/features/</span>
0013 <span style="color:#7a7c7d;"> */</span>
0014
0015 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@color</span>; <span style="color:#27aeae;">@padding</span>; <span style="color:#27aeae;">@margin</span>: <span style="color:#f67400;">2</span>) {
0016   <span style="font-style:italic;">colorr</span>: <span style="color:#27aeae;">@color</span>;
0017   padding-3<span style="color:#c45b00;">:</span> <span style="color:#27ae60;">@padding</span>;
0018   <span style="font-weight:bold;">margin</span>: <span style="color:#27aeae;">@margin</span> <span style="color:#27aeae;">@margin</span> <span style="color:#27aeae;">@margin</span> <span style="color:#27aeae;">@margin</span>;
0019 }
0020
0021 <span style="color:#27aeae;">@my-ruleset:</span> {
0022   <span style="color:#8e44ad;">.my-selector</span> {
0023     <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0024   }
0025 };
0026
0027 <span style="color:#27aeae;">@bacon:</span> <span style="color:#27aeae;font-weight:bold;">red</span>;
0028 <span style="color:#27aeae;">@beacon:</span> background-color;
0029 <span style="color:#27aeae;">@baecon:</span> <span style="color:#27aeae;">@{w}</span> + <span style="color:#27aeae;">@w</span>;
0030
0031 <span style="color:#8e44ad;">.noStar</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.class</span> <span style="color:#27ae60;font-weight:bold;">#sh</span><span style="color:#c45b00;">:extend</span>(<span style="color:#27ae60;font-weight:bold;">#hhh</span>) ) {}
0032 <span style="color:#8e44ad;">.noStar</span><span style="color:#c45b00;">:nth-child</span>(w: <span style="color:#27aeae;font-weight:bold;">red</span>) {}
0033
0034 <span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#27aeae;">@width2</span>) <span style="color:#fdbc4b;font-weight:bold;">and</span> <span style="color:#f67400;">handheld</span> {
0035   <span style="font-weight:bold;">height</span>: <span style="color:#7f8c8d;">auto</span>;
0036 }
0037
0038 <span style="color:#8e44ad;">.test</span> <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@color</span> = <span style="color:#27aeae;font-weight:bold;">blue</span>) <span style="color:#8e44ad;">.ffff</span> {<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;}
0039
0040 <span style="color:#8e44ad;">.foo</span> (<span style="color:#27aeae;">@bg</span>: <span style="color:#27aeae;font-weight:bold;">#f5f5f5</span>, <span style="color:#27aeae;">@color</span>: <span style="color:#27aeae;font-weight:bold;">#900</span>) {
0041   <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;">@bg</span>;
0042   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">@color</span>;
0043
0044   <span style="color:#8e44ad;">.x</span> {
0045     <span style="font-style:italic;">x</span>: <span style="color:#27aeae;">@nn</span>;
0046     <span style="font-style:italic;">a</span>: <span style="color:#27aeae;font-weight:bold;">white</span> <span style="color:#27aeae;">@{nn@{ww}}</span>;
0047     <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0048   }
0049 }
0050
0051 <span style="color:#7a7c7d;">// Variables</span>
0052
0053 <span style="color:#27aeae;">@link-color:</span>        <span style="color:#27aeae;font-weight:bold;">#428bca</span>; <span style="color:#7a7c7d;">// sea blue</span>
0054 <span style="color:#27aeae;">@link-color-hover:</span>  <span style="color:#7f8c8d;">darken</span>(<span style="color:#27aeae;">@link-color</span>, <span style="color:#f67400;">10</span><span style="color:#2980b9;">%</span>);
0055
0056 a, <span style="color:#8e44ad;">.link</span> {
0057   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">@link-color</span>;
0058 }
0059
0060 a<span style="color:#c45b00;">:hover</span> {
0061   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">@link-color-hover</span>;
0062 }
0063
0064 <span style="color:#8e44ad;">.widget</span> {
0065   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#fff</span>;
0066   <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;">@link-color</span>;
0067 }
0068
0069 <span style="color:#7a7c7d;">// Variable interpolation</span>
0070
0071 <span style="color:#27aeae;">@my-selector:</span> banner;
0072
0073 <span style="color:#8e44ad;">.</span><span style="color:#27aeae;">@{my-selector}</span> <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@s</span> = <span style="color:#7f8c8d;">calc</span>(<span style="color:#f44f4f;">&quot;s&quot;</span>); <span style="color:#27aeae;">@{s}</span> = <span style="color:#7f8c8d;">calc</span>(<span style="color:#f44f4f;">&quot;dddd&quot;</span>)) {
0074   <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
0075   <span style="font-weight:bold;">line-height</span>+: <span style="color:#f67400;">40</span><span style="color:#2980b9;">px</span>;
0076   <span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">0</span> <span style="color:#7f8c8d;">auto</span>;
0077 }
0078
0079 <span style="color:#27aeae;">@images:</span> <span style="color:#f44f4f;">&quot;../img&quot;</span>;
0080
0081 body {
0082   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#444</span>;
0083   <span style="font-weight:bold;">background</span>: <span style="color:#7f8c8d;">url</span>(<span style="color:#f44f4f;">&quot;</span><span style="color:#27aeae;">@{images}</span><span style="color:#f44f4f;">/white-sand.png&quot;</span>);
0084 }
0085
0086 <span style="color:#27aeae;">@themes:</span> <span style="color:#f44f4f;">&quot;../../src/themes&quot;</span>;
0087
0088 <span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;</span><span style="color:#27aeae;">@{themes}</span><span style="color:#f44f4f;">/tidal-wave.less&quot;</span>;
0089
0090 <span style="color:#27aeae;">@property:</span> color;
0091
0092 <span style="color:#8e44ad;">.widget</span> {
0093   <span style="color:#27aeae;">@{property}</span>: <span style="color:#27aeae;font-weight:bold;">#0ee</span>;
0094   <span style="font-style:italic;">background-</span><span style="color:#27aeae;">@{property}</span>: <span style="color:#27aeae;font-weight:bold;">#999</span>;
0095 }
0096
0097 <span style="color:#7a7c7d;">// Variable names</span>
0098
0099 <span style="color:#27aeae;">@fnord:</span>  <span style="color:#f44f4f;">&quot;I am fnord.&quot;</span>;
0100 <span style="color:#27aeae;">@var:</span>    <span style="color:#f44f4f;">&quot;fnord&quot;</span>;
0101
0102 <span style="color:#8e44ad;">.variable-names-example</span> {
0103   <span style="font-weight:bold;">content</span>: <span style="color:#27aeae;">@@var</span>;
0104 }
0105
0106 <span style="color:#7a7c7d;">// Lazy Evaluation</span>
0107
0108 <span style="color:#8e44ad;">.lazy-eval</span> {
0109   <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">@var</span>;
0110 }
0111
0112 <span style="color:#27aeae;">@var:</span> <span style="color:#27aeae;">@a</span>;
0113 <span style="color:#27aeae;">@a:</span> <span style="color:#f67400;">9</span><span style="color:#2980b9;">%</span>;
0114
0115 <span style="color:#27aeae;">@var:</span> <span style="color:#f67400;">0</span>;
0116 <span style="color:#8e44ad;">.class</span> {
0117   <span style="color:#27aeae;">@var:</span> <span style="color:#f67400;">1</span>;
0118   <span style="color:#8e44ad;">.brass</span> {
0119     <span style="color:#27aeae;">@var:</span> <span style="color:#f67400;">2</span>;
0120     <span style="font-style:italic;">three</span>: <span style="color:#27aeae;">@var</span>;
0121     <span style="color:#27aeae;">@var:</span> <span style="color:#f67400;">3</span>;
0122   }
0123   <span style="font-style:italic;">one</span>: <span style="color:#27aeae;">@var</span>;
0124 }
0125
0126 <span style="color:#7a7c7d;">// Default Variables</span>
0127
0128 <span style="color:#27aeae;">@base-color:</span> <span style="color:#27aeae;font-weight:bold;">green</span>;
0129 <span style="color:#27aeae;">@dark-color:</span> <span style="color:#7f8c8d;">darken</span>(<span style="color:#27aeae;">@base-color</span>, <span style="color:#f67400;">10</span><span style="color:#2980b9;">%</span>);
0130
0131 <span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;library.less&quot;</span>;
0132 <span style="color:#27aeae;">@base-color:</span> <span style="color:#27aeae;font-weight:bold;">red</span>;
0133
0134 <span style="color:#7a7c7d;">// Extend</span>
0135
0136 nav ul {
0137   &amp;<span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.inline</span>);
0138   <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0139 }
0140 <span style="color:#8e44ad;">.inline</span> {
0141   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0142 }
0143
0144 <span style="color:#7a7c7d;">// Extend Syntax</span>
0145
0146 <span style="color:#8e44ad;">.e</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.f</span>) {}
0147 <span style="color:#8e44ad;">.e</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.g</span>) {}
0148
0149 <span style="color:#8e44ad;">.e</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.f</span>, <span style="color:#8e44ad;">.g</span>) {}
0150
0151 <span style="color:#7a7c7d;">// Extend Attached to Selector</span>
0152
0153 <span style="color:#8e44ad;">.big-division</span>,
0154 <span style="color:#8e44ad;">.big-bag</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.bag</span>),
0155 <span style="color:#8e44ad;">.big-bucket</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.bucket</span>) {
0156 }
0157
0158 <span style="color:#7a7c7d;">// Extend Inside Ruleset</span>
0159
0160 pre<span style="color:#c45b00;">:hover</span>,
0161 <span style="color:#8e44ad;">.some-class</span> {
0162   &amp;<span style="color:#c45b00;">:extend</span>(div pre);
0163 }
0164
0165 pre<span style="color:#c45b00;">:hover:extend</span>(div pre),
0166 <span style="color:#8e44ad;">.some-class</span><span style="color:#c45b00;">:extend</span>(div pre) {}
0167
0168 <span style="color:#7a7c7d;">// Extending Nested Selectors</span>
0169
0170 <span style="color:#8e44ad;">.bucket</span> {
0171   tr {
0172     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0173   }
0174 }
0175 <span style="color:#8e44ad;">.some-class</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.bucket</span> tr) {}
0176
0177 <span style="color:#7a7c7d;">// Exact Matching with Extend</span>
0178
0179 *<span style="color:#8e44ad;">.class</span> {
0180   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0181 }
0182 <span style="color:#8e44ad;">.noStar</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.class</span>) {}
0183
0184 link<span style="color:#c45b00;">:hover:visited</span> {
0185   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0186 }
0187 <span style="color:#8e44ad;">.selector</span><span style="color:#c45b00;">:extend</span>(link<span style="color:#c45b00;">:visited:hover</span>) {}
0188
0189 <span style="color:#7a7c7d;">// nth Expression</span>
0190
0191 <span style="color:#c45b00;">:nth-child</span>(<span style="color:#f67400;">1</span>n<span style="color:#f67400;">+3</span>) {
0192   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0193 }
0194 <span style="color:#8e44ad;">.child</span><span style="color:#c45b00;">:extend</span>(<span style="color:#c45b00;">:nth-child</span>(n+3)) {}
0195
0196 <span style="color:#0099ff;font-weight:bold;">[title=identifier]</span> {
0197   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0198 }
0199 <span style="color:#0099ff;font-weight:bold;">[title=</span><span style="color:#f44f4f;">'identifier'</span><span style="color:#0099ff;font-weight:bold;">]</span> {
0200   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0201 }
0202 <span style="color:#0099ff;font-weight:bold;">[title=</span><span style="color:#f44f4f;">&quot;identifier&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
0203   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0204 }
0205
0206 <span style="color:#8e44ad;">.noQuote</span><span style="color:#c45b00;">:extend</span>(<span style="color:#0099ff;font-weight:bold;">[title=identifier]</span>) {}
0207 <span style="color:#8e44ad;">.singleQuote</span><span style="color:#c45b00;">:extend</span>(<span style="color:#0099ff;font-weight:bold;">[title=</span><span style="color:#f44f4f;">'identifier'</span><span style="color:#0099ff;font-weight:bold;">]</span>) {}
0208 <span style="color:#8e44ad;">.doubleQuote</span><span style="color:#c45b00;">:extend</span>(<span style="color:#0099ff;font-weight:bold;">[title=</span><span style="color:#f44f4f;">&quot;identifier&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>) {}
0209
0210 <span style="color:#7a7c7d;">// Extend &quot;all&quot;</span>
0211
0212 <span style="color:#8e44ad;">.a.b.test</span>,
0213 <span style="color:#8e44ad;">.test.c</span> {
0214   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">orange</span>;
0215 }
0216 <span style="color:#8e44ad;">.test</span> {
0217   &amp;<span style="color:#c45b00;">:hover</span> {
0218     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
0219   }
0220 }
0221
0222 <span style="color:#8e44ad;">.replacement</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.test</span> all) {}
0223
0224 <span style="color:#7a7c7d;">// Selector Interpolation with Extend</span>
0225
0226 <span style="color:#8e44ad;">.bucket</span> {
0227   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0228 }
0229 <span style="color:#27aeae;">@{variable}</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.bucket</span>) {}
0230 <span style="color:#27aeae;">@variable:</span> <span style="color:#f67400;">.</span>selector;
0231
0232 <span style="color:#7a7c7d;">// Scoping / Extend Inside @media</span>
0233
0234 <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
0235   <span style="color:#8e44ad;">.screenClass</span><span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.selector</span>) {}
0236   <span style="color:#8e44ad;">.selector</span> {
0237     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0238   }
0239 }
0240 <span style="color:#8e44ad;">.selector</span> {
0241   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0242 }
0243 <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> {
0244   <span style="color:#8e44ad;">.selector</span> {
0245     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0246   }
0247 }
0248
0249 <span style="color:#7a7c7d;">// Use Cases for Extend</span>
0250
0251 <span style="color:#8e44ad;">.animal</span> {
0252   <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0253   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">white</span>;
0254 }
0255 <span style="color:#8e44ad;">.bear</span> {
0256   &amp;<span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.animal</span>);
0257   <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">brown</span>;
0258 }
0259
0260 <span style="color:#8e44ad;">.my-inline-block</span> {
0261   <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">inline-block</span>;
0262   <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">0</span>;
0263 }
0264 <span style="color:#8e44ad;">.thing1</span> {
0265   &amp;<span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.my-inline-block</span>);
0266 }
0267 <span style="color:#8e44ad;">.thing2</span> {
0268   &amp;<span style="color:#c45b00;">:extend</span>(<span style="color:#8e44ad;">.my-inline-block</span>);
0269 }
0270
0271 <span style="color:#7a7c7d;">// Mixins</span>
0272
0273 <span style="color:#8e44ad;">.a</span>, <span style="color:#27ae60;font-weight:bold;">#b</span> {
0274   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0275 }
0276 <span style="color:#8e44ad;">.mixin-class</span> {
0277   <span style="color:#8e44ad;">.a</span>();
0278 }
0279 <span style="color:#8e44ad;">.mixin-id</span> {
0280   <span style="color:#27ae60;font-weight:bold;">#b</span>();
0281 }
0282
0283 <span style="color:#7a7c7d;">// Not Outputting the Mixin</span>
0284
0285 <span style="color:#8e44ad;">.my-mixin</span> {
0286   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0287 }
0288 <span style="color:#8e44ad;">.my-other-mixin</span>() {
0289   <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">white</span>;
0290 }
0291 <span style="color:#8e44ad;">.class</span> {
0292   <span style="color:#8e44ad;">.my-mixin</span>;
0293   <span style="color:#8e44ad;">.my-other-mixin</span>;
0294 }
0295
0296 <span style="color:#7a7c7d;">// Selectors in Mixins</span>
0297
0298 <span style="color:#8e44ad;">.my-hover-mixin</span>() {
0299   &amp;<span style="color:#c45b00;">:hover</span> {
0300     <span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> <span style="color:#27aeae;font-weight:bold;">red</span>;
0301   }
0302 }
0303 button {
0304   <span style="color:#8e44ad;">.my-hover-mixin</span>();
0305 }
0306
0307 <span style="color:#7a7c7d;">// Namespaces</span>
0308
0309 <span style="color:#27ae60;font-weight:bold;">#outer</span> {
0310   <span style="color:#8e44ad;">.inner</span> {
0311     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0312   }
0313 }
0314
0315 <span style="color:#8e44ad;">.c</span> {
0316   <span style="color:#27ae60;font-weight:bold;">#outer</span> &gt; <span style="color:#8e44ad;">.inner</span>;
0317 }
0318
0319 <span style="color:#8e44ad;">.d</span> {
0320   <span style="color:#27ae60;font-weight:bold;">#outer</span> &gt; <span style="color:#8e44ad;">.inner</span>;
0321   <span style="color:#27ae60;font-weight:bold;">#outer</span> &gt; <span style="color:#8e44ad;">.inner</span>();
0322   <span style="color:#27ae60;font-weight:bold;">#outer</span> <span style="color:#8e44ad;">.inner</span>;
0323   <span style="color:#27ae60;font-weight:bold;">#outer</span> <span style="color:#8e44ad;">.inner</span>();
0324   <span style="color:#27ae60;font-weight:bold;">#outer</span><span style="color:#8e44ad;">.inner</span>;
0325   <span style="color:#27ae60;font-weight:bold;">#outer</span><span style="color:#8e44ad;">.inner</span>();
0326 }
0327
0328 <span style="color:#7a7c7d;">// Guarded Namespaces</span>
0329
0330 <span style="color:#27ae60;font-weight:bold;">#namespace</span> <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@mode</span>=huge) {
0331   <span style="color:#8e44ad;">.mixin</span>() { <span style="color:#7a7c7d;">/* */</span> }
0332 }
0333
0334 <span style="color:#27ae60;font-weight:bold;">#namespace</span> {
0335   <span style="color:#8e44ad;">.mixin</span>() <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@mode</span>=huge) { <span style="color:#7a7c7d;">/* */</span> }
0336 }
0337
0338 <span style="color:#27ae60;font-weight:bold;">#sp_1</span> <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">default</span>()) {
0339   <span style="color:#27ae60;font-weight:bold;">#sp_2</span> <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">default</span>()) {
0340     <span style="color:#8e44ad;">.mixin</span>() <span style="color:#fdbc4b;font-weight:bold;">when not</span>(<span style="color:#7f8c8d;">default</span>()) { <span style="color:#7a7c7d;">/* */</span> }
0341   }
0342 }
0343
0344 <span style="color:#7a7c7d;">// The !important keyword</span>
0345
0346 <span style="color:#8e44ad;">.foo</span> (<span style="color:#27aeae;">@bg</span>: <span style="color:#27aeae;font-weight:bold;">#f5f5f5</span>, <span style="color:#27aeae;">@color</span>: <span style="color:#27aeae;font-weight:bold;">#900</span>) {
0347   <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;">@bg</span>;
0348   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">@color</span> <span style="color:#2980b9;">!important</span>;
0349 }
0350 <span style="color:#8e44ad;">.unimportant</span> {
0351   <span style="color:#8e44ad;">.foo</span>();
0352 }
0353 <span style="color:#8e44ad;">.important</span> {
0354   <span style="color:#8e44ad;">.foo</span>() <span style="color:#2980b9;">!important</span>;
0355 }
0356
0357 <span style="color:#7a7c7d;">// Parametric Mixins</span>
0358
0359 <span style="color:#8e44ad;">.border-radius</span>(<span style="color:#27aeae;">@radius</span>) {
0360   <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#27aeae;">@radius</span>;
0361      <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#27aeae;">@radius</span>;
0362           <span style="font-weight:bold;">border-radius</span>: <span style="color:#27aeae;">@radius</span>;
0363 }
0364
0365 <span style="color:#27ae60;font-weight:bold;">#header</span> {
0366   <span style="color:#8e44ad;">.border-radius</span>(<span style="color:#f67400;">4</span><span style="color:#2980b9;">px</span>);
0367 }
0368 <span style="color:#8e44ad;">.button</span> {
0369   <span style="color:#8e44ad;">.border-radius</span>(<span style="color:#f67400;">6</span><span style="color:#2980b9;">px</span>);
0370 }
0371
0372 <span style="color:#8e44ad;">.border-radius</span>(<span style="color:#27aeae;">@radius</span>: <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>) {
0373   <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#27aeae;">@radius</span>;
0374      <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#27aeae;">@radius</span>;
0375           <span style="font-weight:bold;">border-radius</span>: <span style="color:#27aeae;">@radius</span>;
0376 }
0377
0378 <span style="color:#8e44ad;">.wrap</span>() {
0379   <span style="font-weight:bold;">text-wrap</span>: wrap;
0380   <span style="font-weight:bold;">white-space</span>: -moz-pre-wrap;
0381   <span style="font-weight:bold;">white-space</span>: <span style="color:#f67400;">pre-wrap</span>;
0382   <span style="font-weight:bold;">word-wrap</span>: <span style="color:#f67400;">break-word</span>;
0383 }
0384
0385 pre { <span style="color:#8e44ad;">.wrap</span> }
0386
0387 <span style="color:#7a7c7d;">// Mixins with Multiple Parameters</span>
0388
0389 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@color</span>) {
0390   color-1<span style="color:#c45b00;">:</span> <span style="color:#27ae60;">@color</span>;
0391 }
0392 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@color</span>; <span style="color:#27aeae;">@padding</span>: <span style="color:#f67400;">2</span>) {
0393   color-2<span style="color:#c45b00;">:</span> <span style="color:#27ae60;">@color</span>;
0394   padding-2<span style="color:#c45b00;">:</span> <span style="color:#27ae60;">@padding</span>;
0395 }
0396 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@color</span>; <span style="color:#27aeae;">@padding</span>; <span style="color:#27aeae;">@margin</span>: <span style="color:#f67400;">2</span>) {
0397   color-3<span style="color:#c45b00;">:</span> <span style="color:#27ae60;">@color</span>;
0398   padding-3<span style="color:#c45b00;">:</span> <span style="color:#27ae60;">@padding</span>;
0399   <span style="font-weight:bold;">margin</span>: <span style="color:#27aeae;">@margin</span> <span style="color:#27aeae;">@margin</span> <span style="color:#27aeae;">@margin</span> <span style="color:#27aeae;">@margin</span>;
0400 }
0401 <span style="color:#8e44ad;">.some</span> <span style="color:#8e44ad;">.selector</span> div {
0402   <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;font-weight:bold;">#008000</span>);
0403 }
0404
0405 <span style="color:#7a7c7d;">// Named parameters</span>
0406
0407 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>; <span style="color:#27aeae;">@margin</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>; <span style="color:#27aeae;">@padding</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>) {
0408   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">@color</span>;
0409   <span style="font-weight:bold;">margin</span>: <span style="color:#27aeae;">@margin</span>;
0410   <span style="font-weight:bold;">padding</span>: <span style="color:#27aeae;">@padding</span>;
0411 }
0412 <span style="color:#8e44ad;">.class1</span> {
0413   <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@margin</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>; <span style="color:#27aeae;">@color</span>: <span style="color:#27aeae;font-weight:bold;">#33acfe</span>);
0414 }
0415 <span style="color:#8e44ad;">.class2</span> {
0416   <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;font-weight:bold;">#efca44</span>; <span style="color:#27aeae;">@padding</span>: <span style="color:#f67400;">40</span><span style="color:#2980b9;">px</span>);
0417 }
0418
0419 <span style="color:#7a7c7d;">// The @arguments Variable</span>
0420
0421 <span style="color:#8e44ad;">.box-shadow</span>(<span style="color:#27aeae;">@x</span>: <span style="color:#f67400;">0</span>; <span style="color:#27aeae;">@y</span>: <span style="color:#f67400;">0</span>; <span style="color:#27aeae;">@blur</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span>; <span style="color:#27aeae;">@color</span>: <span style="color:#27aeae;font-weight:bold;">#000</span>) {
0422   <span style="font-weight:bold;">-webkit-box-shadow</span>: <span style="color:#27aeae;">@arguments</span>;
0423      <span style="font-weight:bold;">-moz-box-shadow</span>: <span style="color:#27aeae;">@arguments</span>;
0424           <span style="font-weight:bold;">box-shadow</span>: <span style="color:#27aeae;">@arguments</span>;
0425 }
0426 <span style="color:#8e44ad;">.big-block</span> {
0427   <span style="color:#8e44ad;">.box-shadow</span>(<span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>; <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>);
0428 }
0429
0430 <span style="color:#7a7c7d;">// Advanced Arguments and the @rest Variable</span>
0431
0432 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#f67400;">...</span>) {}        <span style="color:#7a7c7d;">// matches 0-N arguments</span>
0433 <span style="color:#8e44ad;">.mixin</span>() {}           <span style="color:#7a7c7d;">// matches exactly 0 arguments</span>
0434 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@a</span>: <span style="color:#f67400;">1</span>) {}      <span style="color:#7a7c7d;">// matches 0-1 arguments</span>
0435 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@a</span>: <span style="color:#f67400;">1</span>; <span style="color:#f67400;">...</span>) {} <span style="color:#7a7c7d;">// matches 0-N arguments</span>
0436 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@a</span>; <span style="color:#f67400;">...</span>) {}    <span style="color:#7a7c7d;">// matches 1-N arguments</span>
0437
0438 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@a</span>; <span style="color:#27aeae;">@rest</span><span style="color:#f67400;">...</span>) {
0439    <span style="color:#7a7c7d;">// @rest is bound to arguments after @a</span>
0440    <span style="color:#7a7c7d;">// @arguments is bound to all arguments</span>
0441 }
0442
0443 <span style="color:#7a7c7d;">// Pattern-matching</span>
0444
0445 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@s</span>; <span style="color:#27aeae;">@color</span>) { <span style="color:#8e44ad;">...</span> }
0446
0447 <span style="color:#8e44ad;">.class</span> {
0448   <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@switch</span>; <span style="color:#27aeae;font-weight:bold;">#888</span>);
0449 }
0450
0451 <span style="color:#8e44ad;">.mixin</span>(dark; <span style="color:#27aeae;">@color</span>) {
0452   <span style="font-weight:bold;">color</span>: <span style="color:#7f8c8d;">darken</span>(<span style="color:#27aeae;">@color</span>, <span style="color:#f67400;">10</span><span style="color:#2980b9;">%</span>);
0453 }
0454 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#f67400;">light</span>; <span style="color:#27aeae;">@color</span>) {
0455   <span style="font-weight:bold;">color</span>: <span style="color:#7f8c8d;">lighten</span>(<span style="color:#27aeae;">@color</span>, <span style="color:#f67400;">10</span><span style="color:#2980b9;">%</span>);
0456 }
0457 <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@_</span>; <span style="color:#27aeae;">@color</span>) {
0458   <span style="font-weight:bold;">display</span>: <span style="color:#f67400;">block</span>;
0459 }
0460
0461 <span style="color:#27aeae;">@switch:</span> <span style="color:#f67400;">light</span>;
0462
0463 <span style="color:#8e44ad;">.class</span> {
0464   <span style="color:#8e44ad;">.mixin</span>(<span style="color:#27aeae;">@switch</span>; <span style="color:#27aeae;font-weight:bold;">#888</span>);
0465 }
0466
0467 <span style="color:#7a7c7d;">// Mixins as Functions</span>
0468
0469 <span style="color:#8e44ad;">.average</span>(<span style="color:#27aeae;">@x</span>, <span style="color:#27aeae;">@y</span>) {
0470   <span style="color:#27aeae;">@average:</span> ((<span style="color:#27aeae;">@x</span> + <span style="color:#27aeae;">@y</span>) / <span style="color:#f67400;">2</span>);
0471 }
0472
0473 div {
0474   <span style="color:#8e44ad;">.average</span>(<span style="color:#f67400;">16</span><span style="color:#2980b9;">px</span>, <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>); <span style="color:#7a7c7d;">// &quot;call&quot; the mixin</span>
0475   <span style="font-weight:bold;">padding</span>: <span style="color:#27aeae;">@average</span>;    <span style="color:#7a7c7d;">// use its &quot;return&quot; value</span>
0476 }
0477
0478 <span style="color:#7a7c7d;">// Passing Rulesets to Mixins</span>
0479
0480 <span style="color:#7a7c7d;">// declare detached ruleset</span>
0481 <span style="color:#27aeae;">@detached-ruleset:</span> { <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">red</span>; };
0482
0483 <span style="color:#7a7c7d;">// use detached ruleset</span>
0484 <span style="color:#8e44ad;">.top</span> {
0485     <span style="color:#27ae60;">@detached-ruleset</span>();
0486 }
0487
0488 <span style="color:#8e44ad;">.desktop-and-old-ie</span>(<span style="color:#27aeae;">@rules</span>) {
0489   <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="color:#fdbc4b;font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#f67400;">1200</span><span style="color:#2980b9;">px</span>) { <span style="color:#27ae60;">@rules</span>(); }
0490   html<span style="color:#8e44ad;">.lt-ie9</span> &amp;                         { <span style="color:#27ae60;">@rules</span>(); }
0491 }
0492
0493 header {
0494   <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0495
0496   <span style="color:#8e44ad;">.desktop-and-old-ie</span>({
0497     background-color: <span style="color:#27aeae;font-weight:bold;">red</span>;
0498   });
0499 }
0500
0501 <span style="color:#27aeae;">@my-ruleset:</span> {
0502   <span style="color:#8e44ad;">.my-selector</span> {
0503     <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0504   }
0505 };
0506
0507 <span style="color:#27aeae;">@my-ruleset:</span> {
0508     <span style="color:#8e44ad;">.my-selector</span> {
0509       <span style="color:#27ae60;">@media</span> <span style="color:#f67400;">tv</span> {
0510         <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0511       }
0512     }
0513   };
0514 <span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#f67400;">portrait</span>) {
0515     <span style="color:#27ae60;">@my-ruleset</span>();
0516 }
0517
0518 <span style="color:#7a7c7d;">// Scoping</span>
0519
0520 <span style="color:#27aeae;">@detached-ruleset:</span> {
0521   <span style="font-style:italic;">caller-variable</span>: <span style="color:#27aeae;">@caller-variable</span>; <span style="color:#7a7c7d;">// variable is undefined here</span>
0522   <span style="color:#8e44ad;">.caller-mixin</span>(); <span style="color:#7a7c7d;">// mixin is undefined here</span>
0523 };
0524
0525 selector {
0526   <span style="color:#7a7c7d;">// use detached ruleset</span>
0527   <span style="color:#27ae60;">@detached-ruleset</span>();
0528
0529   <span style="color:#7a7c7d;">// define variable and mixin needed inside the detached ruleset</span>
0530   <span style="color:#27aeae;">@caller-variable:</span> value;
0531   <span style="color:#8e44ad;">.caller-mixin</span>() {
0532     <span style="font-style:italic;">variable</span>: declaration;
0533   }
0534 }
0535
0536 <span style="color:#7a7c7d;">/*</span>
0537 <span style="color:#7a7c7d;"> * reference: use a Less file but do not output it</span>
0538 <span style="color:#7a7c7d;">inline: include the source file in the output but do not process it</span>
0539 <span style="color:#7a7c7d;">less: treat the file as a Less file, no matter what the file extension</span>
0540 <span style="color:#7a7c7d;">css: treat the file as a CSS file, no matter what the file extension</span>
0541 <span style="color:#7a7c7d;">once: only include the file once (this is default behavior)</span>
0542 <span style="color:#7a7c7d;">multiple: include the file multiple times</span>
0543 <span style="color:#7a7c7d;">optional: continue compiling when file is not found</span>
0544 <span style="color:#7a7c7d;"> */</span>
0545
0546 <span style="color:#27ae60;">@import</span> (optional, reference) <span style="color:#f44f4f;">&quot;foo.less&quot;</span>;
0547
0548 <span style="color:#7a7c7d;">// Mixin Guards</span>
0549
0550 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">lightness</span>(<span style="color:#27aeae;">@a</span>) &gt;= <span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span>) {
0551   <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">black</span>;
0552 }
0553 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">lightness</span>(<span style="color:#27aeae;">@a</span>) &lt; <span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span>) {
0554   <span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">white</span>;
0555 }
0556 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) {
0557   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;">@a</span>;
0558 }
0559
0560 <span style="color:#7a7c7d;">// Guard Comparison Operators</span>
0561
0562 <span style="color:#8e44ad;">.truth</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@a</span>) { }
0563 <span style="color:#8e44ad;">.truth</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@a</span> = true) { }
0564
0565 <span style="color:#7a7c7d;">// </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span><span style="color:#7a7c7d;">: @media as variable</span>
0566 <span style="color:#27aeae;">@media:</span> mobile;
0567
0568 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@media</span> = mobile) { }
0569 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@media</span> = desktop) { }
0570
0571 <span style="color:#8e44ad;">.max</span> (<span style="color:#27aeae;">@a</span>; <span style="color:#27aeae;">@b</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@a</span> &gt; <span style="color:#27aeae;">@b</span>) { <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">@a</span> }
0572 <span style="color:#8e44ad;">.max</span> (<span style="color:#27aeae;">@a</span>; <span style="color:#27aeae;">@b</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@a</span> &lt; <span style="color:#27aeae;">@b</span>) { <span style="font-weight:bold;">width</span>: <span style="color:#27aeae;">@b</span> }
0573
0574 <span style="color:#7a7c7d;">// Guard Logical Operators</span>
0575
0576 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">isnumber</span>(<span style="color:#27aeae;">@a</span>)) and (<span style="color:#27aeae;">@a</span> &gt; <span style="color:#f67400;">0</span>) {  }
0577 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@a</span> &gt; <span style="color:#f67400;">10</span>), (<span style="color:#27aeae;">@a</span> &lt; <span style="color:#f67400;">-10</span>) {  }
0578 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@b</span>) <span style="color:#fdbc4b;font-weight:bold;">when not</span> (<span style="color:#27aeae;">@b</span> &gt; <span style="color:#f67400;">0</span>) { }
0579
0580 <span style="color:#7a7c7d;">// Type Checking Functions</span>
0581
0582 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>; <span style="color:#27aeae;">@b</span>: <span style="color:#f67400;">0</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">isnumber</span>(<span style="color:#27aeae;">@b</span>)) { }
0583 <span style="color:#8e44ad;">.mixin</span> (<span style="color:#27aeae;">@a</span>; <span style="color:#27aeae;">@b</span>: <span style="color:#27aeae;font-weight:bold;">black</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#7f8c8d;">iscolor</span>(<span style="color:#27aeae;">@b</span>)) {}
0584
0585 button <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@my-option</span> = true) {
0586   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">white</span>;
0587
0588   &amp; <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@my-option</span> = true) {
0589   button {
0590     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">white</span>;
0591   }
0592   a {
0593     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0594   }
0595 }
0596 }
0597
0598 <span style="color:#7a7c7d;">// Loops</span>
0599
0600 <span style="color:#8e44ad;">.loop</span>(<span style="color:#27aeae;">@counter</span>) <span style="color:#fdbc4b;font-weight:bold;">when </span>(<span style="color:#27aeae;">@counter</span> &gt; <span style="color:#f67400;">0</span>) {
0601   <span style="color:#8e44ad;">.loop</span>((<span style="color:#27aeae;">@counter</span> - <span style="color:#f67400;">1</span>));    <span style="color:#7a7c7d;">// next iteration</span>
0602   <span style="font-weight:bold;">width</span>: (<span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> * <span style="color:#27aeae;">@counter</span>); <span style="color:#7a7c7d;">// code for each iteration</span>
0603 }
0604
0605 div {
0606   <span style="color:#8e44ad;">.loop</span>(<span style="color:#f67400;">5</span>); <span style="color:#7a7c7d;">// launch the loop</span>
0607 }
0608
0609 <span style="color:#7a7c7d;">// Merge</span>
0610
0611 <span style="color:#8e44ad;">.mixin</span>() {
0612   <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#f67400;">inset</span> <span style="color:#f67400;">0</span> <span style="color:#f67400;">0</span> <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span> <span style="color:#27aeae;font-weight:bold;">#555</span>;
0613 }
0614 <span style="color:#8e44ad;">.myclass</span> {
0615   <span style="color:#8e44ad;">.mixin</span>();
0616   <span style="font-weight:bold;">box-shadow</span>+: <span style="color:#f67400;">0</span> <span style="color:#f67400;">0</span> <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span> <span style="color:#27aeae;font-weight:bold;">black</span>;
0617 }
0618
0619 <span style="color:#7a7c7d;">// Space</span>
0620
0621 <span style="color:#8e44ad;">.mixin</span>() {
0622   <span style="font-weight:bold;">transform</span>+_: <span style="color:#7f8c8d;">scale</span>(<span style="color:#f67400;">2</span>);
0623 }
0624 <span style="color:#8e44ad;">.myclass</span> {
0625   <span style="color:#8e44ad;">.mixin</span>();
0626   <span style="font-weight:bold;">transform</span>+_: <span style="color:#7f8c8d;">rotate</span>(<span style="color:#f67400;">15</span><span style="color:#2980b9;">deg</span>);
0627 }
0628
0629 <span style="color:#7a7c7d;">// Parent Selectors</span>
0630
0631 a {
0632   <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0633   &amp;<span style="color:#c45b00;">:hover</span> {
0634     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
0635   }
0636 }
0637
0638 <span style="color:#8e44ad;">.button</span> {
0639   &amp;-ok {
0640     <span style="font-weight:bold;">background-image</span>: <span style="color:#7f8c8d;">url</span>(<span style="color:#f44f4f;">&quot;ok.png&quot;</span>);
0641   }
0642   &amp;-cancel {
0643     <span style="font-weight:bold;">background-image</span>: <span style="color:#7f8c8d;">url</span>(<span style="color:#f44f4f;">&quot;cancel.png&quot;</span>);
0644   }
0645
0646   &amp;-custom {
0647     <span style="font-weight:bold;">background-image</span>: <span style="color:#7f8c8d;">url</span>(<span style="color:#f44f4f;">&quot;custom.png&quot;</span>);
0648   }
0649 }
0650
0651 <span style="color:#8e44ad;">.link</span> {
0652   &amp; + &amp; {
0653     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0654   }
0655
0656   &amp; &amp; {
0657     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
0658   }
0659
0660   &amp;&amp; {
0661     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0662   }
0663
0664   &amp;, &amp;ish {
0665     <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">cyan</span>;
0666   }
0667 }
0668
0669 <span style="color:#8e44ad;">.grand</span> {
0670   <span style="color:#8e44ad;">.parent</span> {
0671     &amp; &gt; &amp; {
0672       <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
0673     }
0674
0675     &amp; &amp; {
0676       <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
0677     }
0678
0679     &amp;&amp; {
0680       <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
0681     }
0682
0683     &amp;, &amp;ish {
0684       <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">cyan</span>;
0685     }
0686   }
0687 }
0688
0689 <span style="color:#7a7c7d;">// Changing Selector Order</span>
0690
0691 <span style="color:#8e44ad;">.header</span> {
0692   <span style="color:#8e44ad;">.menu</span> {
0693     <span style="font-weight:bold;">border-radius</span>: <span style="color:#f67400;">5</span><span style="color:#2980b9;">px</span>;
0694     <span style="color:#8e44ad;">.no-borderradius</span> &amp; {
0695       <span style="font-weight:bold;">background-image</span>: <span style="color:#7f8c8d;">url</span>(<span style="color:#f44f4f;">'images/button-background.png'</span>);
0696     }
0697   }
0698 }
0699
0700 <span style="color:#7a7c7d;">// Combinatorial Explosion</span>
0701
0702 p, a, ul, li {
0703   <span style="font-weight:bold;">border-top</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">dotted</span> <span style="color:#27aeae;font-weight:bold;">#366</span>;
0704   &amp; + &amp; {
0705     <span style="font-weight:bold;">border-top</span>: <span style="color:#f67400;">0</span>;
0706   }
0707 }
0708 </pre></body></html>