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