File indexing completed on 2024-05-12 04:02:07
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> handheld { 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">"s"</span>); <span style="color:#27aeae">@{s}</span> = <span style="color:#7f8c8d">calc</span>(<span style="color:#f44f4f">"dddd"</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">"../img"</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">"</span><span style="color:#27aeae">@{images}</span><span style="color:#f44f4f">/white-sand.png"</span>); 0084 } 0085 0086 <span style="color:#27aeae">@themes:</span> <span style="color:#f44f4f">"../../src/themes"</span>; 0087 0088 <span style="color:#27ae60">@import</span> <span style="color:#f44f4f">"</span><span style="color:#27aeae">@{themes}</span><span style="color:#f44f4f">/tidal-wave.less"</span>; 0089 0090 <span style="color:#27aeae">@property:</span> <span style="color:#f67400">color</span>; 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">"I am fnord."</span>; 0100 <span style="color:#27aeae">@var:</span> <span style="color:#f44f4f">"fnord"</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">"library.less"</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 &<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 &<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">"identifier"</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">"identifier"</span><span style="color:#0099ff;font-weight:bold">]</span>) {} 0209 0210 <span style="color:#7a7c7d">// Extend "all"</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 &<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 &<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 &<span style="color:#c45b00">:extend</span>(<span style="color:#8e44ad">.my-inline-block</span>); 0266 } 0267 <span style="color:#8e44ad">.thing2</span> { 0268 &<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 &<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> > <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> > <span style="color:#8e44ad">.inner</span>; 0321 <span style="color:#27ae60;font-weight:bold">#outer</span> > <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;font-style:italic">-webkit-border-radius</span>: <span style="color:#27aeae">@radius</span>; 0361 <span style="font-weight:bold;font-style:italic">-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;font-style:italic">-webkit-border-radius</span>: <span style="color:#27aeae">@radius</span>; 0374 <span style="font-weight:bold;font-style:italic">-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-style:italic">text-wrap</span>: <span style="color:#f67400">wrap</span>; 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-style:italic">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;font-style:italic">-webkit-box-shadow</span>: <span style="color:#27aeae">@arguments</span>; 0423 <span style="font-weight:bold;font-style:italic">-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>(<span style="color:#f67400">dark</span>; <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">// "call" the mixin</span> 0475 <span style="font-weight:bold">padding</span>: <span style="color:#27aeae">@average</span>; <span style="color:#7a7c7d">// use its "return" 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> & { <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> tv { 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> (<span style="color:#f67400">optional</span>, reference) <span style="color:#f44f4f">"foo.less"</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>) >= <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>) < <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> = <span style="color:#f67400">true</span>) { } 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> > <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> < <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> > <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> > <span style="color:#f67400">10</span>), (<span style="color:#27aeae">@a</span> < <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> > <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> = <span style="color:#f67400">true</span>) { 0586 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">white</span>; 0587 0588 & <span style="color:#fdbc4b;font-weight:bold">when </span>(<span style="color:#27aeae">@my-option</span> = <span style="color:#f67400">true</span>) { 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> > <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 &<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 &-ok { 0640 <span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"ok.png"</span>); 0641 } 0642 &-cancel { 0643 <span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"cancel.png"</span>); 0644 } 0645 0646 &-custom { 0647 <span style="font-weight:bold">background-image</span>: <span style="color:#7f8c8d">url</span>(<span style="color:#f44f4f">"custom.png"</span>); 0648 } 0649 } 0650 0651 <span style="color:#8e44ad">.link</span> { 0652 & + & { 0653 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>; 0654 } 0655 0656 & & { 0657 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">green</span>; 0658 } 0659 0660 && { 0661 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>; 0662 } 0663 0664 &, &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 & > & { 0672 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">red</span>; 0673 } 0674 0675 & & { 0676 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">green</span>; 0677 } 0678 0679 && { 0680 <span style="font-weight:bold">color</span>: <span style="color:#27aeae;font-weight:bold">blue</span>; 0681 } 0682 0683 &, &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> & { 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 & + & { 0705 <span style="font-weight:bold">border-top</span>: <span style="color:#f67400">0</span>; 0706 } 0707 } 0708 </pre></body></html>