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