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