Changeset View
Changeset View
Standalone View
Standalone View
autotests/reference/highlight.scss.ref
- This file was added.
1 | <Comment>/**</Comment><br/> | ||||
---|---|---|---|---|---|
2 | <Comment> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</Comment><br/> | ||||
3 | <Comment> */</Comment><br/> | ||||
4 | <dsNormal></dsNormal><br/> | ||||
5 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"othersheet.css"</String><Function>)</Function><Normal Text> </Normal Text><Value>screen</Value><Normal Text>, tv</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
6 | <dsNormal></dsNormal><br/> | ||||
7 | <Selector Tag>body</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
8 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>15</Number><Unit>pt</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
9 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: Verdana</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Bitstream Vera Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
10 | <Normal Text> </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* yet another comment */</Comment><br/> | ||||
11 | <Normal Text> </Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
12 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
13 | <Normal Text> </Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
14 | <Normal Text>}</Normal Text><br/> | ||||
15 | <dsNormal></dsNormal><br/> | ||||
16 | <Selector Class>.something</Selector Class><br/> | ||||
17 | <Normal Text>{</Normal Text><br/> | ||||
18 | <Normal Text> </Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
19 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#cdd</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
20 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#AAFE04</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
21 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgb(</Function><Number>10</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Number>30</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Number>43</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
22 | <Normal Text> </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>maroon</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
23 | <Normal Text>}</Normal Text><br/> | ||||
24 | <dsNormal></dsNormal><br/> | ||||
25 | <Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
26 | <Normal Text>}</Normal Text><br/> | ||||
27 | <dsNormal></dsNormal><br/> | ||||
28 | <Selector Id>#header</Selector Id><Separator Symbol>,</Separator Symbol><br/> | ||||
29 | <Selector Tag>p</Selector Tag><Selector Class>.intro</Selector Class><Selector Pseudo>:first-letter</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/> | ||||
30 | <Selector Tag>p</Selector Tag><Selector Pseudo>:lang(nl)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/> | ||||
31 | <Selector Tag>img</Selector Tag><Selector Attribute>[align</Selector Attribute><Operator>=</Operator><String>"right"</String><Selector Attribute>]</Selector Attribute><br/> | ||||
32 | <Normal Text>{</Normal Text><br/> | ||||
33 | <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> Qt::</Normal Text><Color>red</Color><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><br/> | ||||
34 | <Normal Text> </Normal Text><Property>-moz-border-radius</Property><Normal Text>: </Normal Text><Number>15</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* unknown properties render italic */</Comment><br/> | ||||
35 | <Normal Text>}</Normal Text><br/> | ||||
36 | <dsNormal></dsNormal><br/> | ||||
37 | <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/> | ||||
38 | <dsNormal></dsNormal><br/> | ||||
39 | <Normal Text> </Normal Text><Selector Id>#header</Selector Id><br/> | ||||
40 | <Normal Text> {</Normal Text><br/> | ||||
41 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
42 | <Normal Text> }</Normal Text><br/> | ||||
43 | <dsNormal></dsNormal><br/> | ||||
44 | <Normal Text>}</Normal Text><br/> | ||||
45 | <dsNormal></dsNormal><br/> | ||||
46 | <Comment>/*</Comment><br/> | ||||
47 | <Alert Level 2>TODO</Alert Level 2><Comment>: add more tests, e.g. media</Comment><br/> | ||||
48 | <Comment>*/</Comment><br/> | ||||
49 | <dsNormal></dsNormal><br/> | ||||
50 | <dsNormal></dsNormal><br/> | ||||
51 | <Selector Class>.nice-look</Selector Class><Normal Text> {</Normal Text><br/> | ||||
52 | <Normal Text> </Normal Text><Property>font-variant-alternates</Property><Normal Text>: </Normal Text><Function>styleset(</Function><Normal Text>nice-style</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
53 | <Normal Text>}</Normal Text><br/> | ||||
54 | <dsNormal></dsNormal><br/> | ||||
55 | <Selector Tag>ul</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
56 | <Normal Text> </Normal Text><Property>list-style</Property><Normal Text>: thumbs</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
57 | <Normal Text>}</Normal Text><br/> | ||||
58 | <dsNormal></dsNormal><br/> | ||||
59 | <Comment>/* SVG <a> */</Comment><br/> | ||||
60 | <Selector Tag>svg</Selector Tag><Operator>|</Operator><Selector Tag>a</Selector Tag><Normal Text> {}</Normal Text><br/> | ||||
61 | <dsNormal></dsNormal><br/> | ||||
62 | <Comment>/* XHTML and SVG <a> */</Comment><br/> | ||||
63 | <Operator>*|</Operator><Selector Tag>a</Selector Tag><Normal Text> {}</Normal Text><br/> | ||||
64 | <dsNormal></dsNormal><br/> | ||||
65 | <Operator>*</Operator><Normal Text>{}</Normal Text><br/> | ||||
66 | <Selector Class>.class</Selector Class><Normal Text>{}</Normal Text><br/> | ||||
67 | <Selector Id>#id</Selector Id><Normal Text>{}</Normal Text><br/> | ||||
68 | <Selector Pseudo>:hover</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
69 | <Selector Pseudo>:lang(fr)</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
70 | <Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
71 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
72 | <Selector Tag>E</Selector Tag><Operator>></Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
73 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>></Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
74 | <Selector Tag>E</Selector Tag><Operator>~</Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
75 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>~</Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
76 | <Selector Tag>E</Selector Tag><Selector Pseudo>:first-child</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
77 | <Selector Tag>E</Selector Tag><Selector Pseudo>:visited</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
78 | <Selector Tag>E</Selector Tag><Selector Pseudo>::after</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
79 | <Selector Tag>E</Selector Tag><Selector Pseudo>:lang(c)</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
80 | <Selector Tag>E</Selector Tag><Selector Pseudo>:lang(fr-ca)</Selector Pseudo><Normal Text>{}</Normal Text><br/> | ||||
81 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
82 | <Selector Tag>E</Selector Tag><Operator>+</Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
83 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
84 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>=</Operator><String>warning</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
85 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
86 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>~=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
87 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>^=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
88 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>$=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
89 | <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>*=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
90 | <Selector Tag>E</Selector Tag><Selector Attribute>[lang</Selector Attribute><Operator>|=</Operator><String>"en"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/> | ||||
91 | <Selector Tag>DIV</Selector Tag><Selector Class>.warning</Selector Class><Normal Text>{}</Normal Text><br/> | ||||
92 | <Selector Tag>DIV</Selector Tag><Normal Text> </Normal Text><Selector Class>.warning</Selector Class><Normal Text>{}</Normal Text><br/> | ||||
93 | <Selector Tag>E</Selector Tag><Selector Id>#myid</Selector Id><Normal Text>{}</Normal Text><br/> | ||||
94 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Selector Id>#myid</Selector Id><Normal Text>{}</Normal Text><br/> | ||||
95 | <Selector Tag>E</Selector Tag><Separator Symbol>,</Separator Symbol><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
96 | <Selector Tag>E</Selector Tag><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
97 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Separator Symbol>,</Separator Symbol><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
98 | <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/> | ||||
99 | <dsNormal></dsNormal><br/> | ||||
100 | <Selector Tag>p</Selector Tag><Selector Pseudo>:nth-child(2)</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
101 | <Normal Text> </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
102 | <Normal Text>}</Normal Text><br/> | ||||
103 | <dsNormal></dsNormal><br/> | ||||
104 | <Comment>/* Elements that are not <div> or <span> elements */</Comment><br/> | ||||
105 | <Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Selector Tag>div</Selector Tag><Selector Pseudo>):not(</Selector Pseudo><Selector Tag>span</Selector Tag><Selector Pseudo>)</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
106 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
107 | <Normal Text>}</Normal Text><br/> | ||||
108 | <dsNormal></dsNormal><br/> | ||||
109 | <Comment>/* Elements that are not `.crazy` or `.fancy` */</Comment><br/> | ||||
110 | <Comment>/* Note that this syntax is not well supported yet. */</Comment><br/> | ||||
111 | <Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Selector Class>.crazy</Selector Class><Error>,</Error><Normal Text> </Normal Text><Selector Class>.fancy</Selector Class><Selector Pseudo>)</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
112 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
113 | <Normal Text>}</Normal Text><br/> | ||||
114 | <dsNormal></dsNormal><br/> | ||||
115 | <Selector Pseudo>:nth-child(odd)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
116 | <Selector Pseudo>:nth-child(even)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
117 | <Selector Pseudo>:nth-child(4)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
118 | <Selector Pseudo>:nth-child(4n)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
119 | <Selector Pseudo>:nth-child(3n+4)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
120 | <Selector Pseudo>:nth-child(-n+3)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
121 | <Selector Pseudo>:nth-child(n+8):nth-child(-n+15)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
122 | <dsNormal></dsNormal><br/> | ||||
123 | <Selector Class>.first</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-child(2n+1)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/> | ||||
124 | <Selector Class>.second</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-child(2n+1)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/> | ||||
125 | <Selector Class>.third</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-of-type(2n+1)</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
126 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
127 | <Normal Text> </Normal Text><Unknown Property>unknown-property</Unknown Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
128 | <Normal Text>}</Normal Text><br/> | ||||
129 | <dsNormal></dsNormal><br/> | ||||
130 | <Selector Pseudo>:root</Selector Pseudo><Normal Text>{</Normal Text><br/> | ||||
131 | <Normal Text> </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Function>if(</Function><Normal Text>x > </Normal Text><Number>5</Number><Function>)</Function><Normal Text> this</Normal Text><Number>.</Number><Normal Text>width = </Normal Text><Number>10</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* valid custom property, invalid in any normal property */</Comment><br/> | ||||
132 | <Normal Text>}</Normal Text><br/> | ||||
133 | <dsNormal></dsNormal><br/> | ||||
134 | <Selector Pseudo>:root</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/> | ||||
135 | <Selector Pseudo>:root:lang(en)</Selector Pseudo><Normal Text> {</Normal Text><Variable>--external-link</Variable><Normal Text>: </Normal Text><String>"external link"</String><Separator Symbol>;</Separator Symbol><Normal Text>}</Normal Text><br/> | ||||
136 | <Selector Pseudo>:root:lang(de)</Selector Pseudo><Normal Text> {</Normal Text><Variable>--external-link</Variable><Normal Text>: </Normal Text><String>"externer Link"</String><Separator Symbol>;</Separator Symbol><Normal Text>}</Normal Text><br/> | ||||
137 | <dsNormal></dsNormal><br/> | ||||
138 | <Selector Tag>a</Selector Tag><Selector Attribute>[href</Selector Attribute><Operator>^=</Operator><String>"http"</String><Selector Attribute>]</Selector Attribute><Selector Pseudo>::after</Selector Pseudo><Normal Text> {</Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>" ("</String><Normal Text> </Normal Text><Function>var(</Function><Variable>--external-link</Variable><Function>)</Function><Normal Text> </Normal Text><String>")"</String><Normal Text>}</Normal Text><br/> | ||||
139 | <dsNormal></dsNormal><br/> | ||||
140 | <Selector Tag>one</Selector Tag><Normal Text> { </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
141 | <Selector Tag>two</Selector Tag><Normal Text> { </Normal Text><Variable>--bar</Variable><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--foo</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
142 | <Selector Tag>three</Selector Tag><Normal Text> { </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--bar</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
143 | <Selector Class>.foo</Selector Class><Normal Text> {</Normal Text><br/> | ||||
144 | <Normal Text> </Normal Text><Variable>--gap</Variable><Normal Text>: </Normal Text><Number>20</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
145 | <Normal Text> </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Function>var(</Function><Variable>--gap</Variable><Function>)</Function><Normal Text>px</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/*20 px*/</Comment><br/> | ||||
146 | <Normal Text> </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--gap</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/*20px*/</Comment><br/> | ||||
147 | <Normal Text>}</Normal Text><br/> | ||||
148 | <dsNormal></dsNormal><br/> | ||||
149 | <Selector Tag>foo</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
150 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/> | ||||
151 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>-</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/> | ||||
152 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/> | ||||
153 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/> | ||||
154 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>-var(</Function><Operator>-</Operator><Normal Text>-a</Normal Text><Function>))</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/> | ||||
155 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>*-</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
156 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
157 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Operator>-</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
158 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text>(</Normal Text><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
159 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text>(</Normal Text><Function>var(</Function><Variable>--a</Variable><Function>)</Function><Normal Text>)</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
160 | <Normal Text>}</Normal Text><br/> | ||||
161 | <dsNormal></dsNormal><br/> | ||||
162 | <Selector Tag>sweet-alert</Selector Tag><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Pseudo>:focus::-moz-placeholder</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
163 | <Normal Text> </Normal Text><Property>-webkit-transition</Property><Normal Text>: opacity </Normal Text><Number>0.3</Number><Unit>s</Unit><Normal Text> </Normal Text><Number>0.03</Number><Unit>s</Unit><Normal Text> </Normal Text><Value>ease</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
164 | <Normal Text> </Normal Text><Property>transition</Property><Normal Text>: opacity </Normal Text><Number>0.3</Number><Unit>s</Unit><Normal Text> </Normal Text><Number>0.03</Number><Unit>s</Unit><Normal Text> </Normal Text><Value>ease</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
165 | <Normal Text> </Normal Text><Property>opacity</Property><Normal Text>: </Normal Text><Number>0.5</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
166 | <Normal Text>}</Normal Text><br/> | ||||
167 | <dsNormal></dsNormal><br/> | ||||
168 | <dsNormal></dsNormal><br/> | ||||
169 | <At Rule>@font-feature-values</At Rule><Normal Text> Font One {</Normal Text><br/> | ||||
170 | <Normal Text> </Normal Text><At Rule>@styleset</At Rule><Normal Text> {</Normal Text><br/> | ||||
171 | <Normal Text> </Normal Text><Unknown Property>nice-style</Unknown Property><Normal Text>: </Normal Text><Number>12</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
172 | <Normal Text> }</Normal Text><br/> | ||||
173 | <Normal Text>}</Normal Text><br/> | ||||
174 | <dsNormal></dsNormal><br/> | ||||
175 | <At Rule>@font-feature-values</At Rule><Normal Text> Font Two {</Normal Text><br/> | ||||
176 | <Normal Text> </Normal Text><At Rule>@styleset</At Rule><Normal Text> {</Normal Text><br/> | ||||
177 | <Normal Text> </Normal Text><Unknown Property>nice-style</Unknown Property><Normal Text>: </Normal Text><Number>4</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
178 | <Normal Text> }</Normal Text><br/> | ||||
179 | <Normal Text>}</Normal Text><br/> | ||||
180 | <dsNormal></dsNormal><br/> | ||||
181 | <At Rule>@counter-style</At Rule><Normal Text> thumbs {</Normal Text><br/> | ||||
182 | <Normal Text> </Normal Text><Unknown Property>system</Unknown Property><Normal Text>: cyclic</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
183 | <Normal Text> </Normal Text><Unknown Property>symbols</Unknown Property><Normal Text>: </Normal Text><String>"</String><SpecialChar>\1F44D</SpecialChar><String>"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
184 | <Normal Text> </Normal Text><Unknown Property>suffix</Unknown Property><Normal Text>: </Normal Text><String>" "</String><Separator Symbol>;</Separator Symbol><br/> | ||||
185 | <Normal Text>}</Normal Text><br/> | ||||
186 | <dsNormal></dsNormal><br/> | ||||
187 | <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/> | ||||
188 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Open Sans"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
189 | <Normal Text> </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/> | ||||
190 | <Normal Text> </Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
191 | <Normal Text>}</Normal Text><br/> | ||||
192 | <dsNormal></dsNormal><br/> | ||||
193 | <At Rule>@page</At Rule><Normal Text> {</Normal Text><br/> | ||||
194 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
195 | <Normal Text>}</Normal Text><br/> | ||||
196 | <dsNormal></dsNormal><br/> | ||||
197 | <At Rule>@page</At Rule><Normal Text> </Normal Text><Selector Pseudo>:first</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
198 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
199 | <Normal Text> </Normal Text><Comment>/* comments */</Comment><br/> | ||||
200 | <Normal Text> </Normal Text><Property>marks</Property><Normal Text>: </Normal Text><Value>crop</Value><Normal Text> </Normal Text><Value>cross</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
201 | <Normal Text>}</Normal Text><br/> | ||||
202 | <dsNormal></dsNormal><br/> | ||||
203 | <At Rule>@page</At Rule><Normal Text> </Normal Text><Selector Pseudo>:unknown</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
204 | <Normal Text> </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
205 | <Normal Text>}</Normal Text><br/> | ||||
206 | <dsNormal></dsNormal><br/> | ||||
207 | <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/> | ||||
208 | <Normal Text> </Normal Text><Unknown Property>unknown</Unknown Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
209 | <Normal Text> </Normal Text><Comment>/* comments */</Comment><br/> | ||||
210 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Bitstream Vera Serif Bold"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
211 | <Normal Text> </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
212 | <Normal Text>}</Normal Text><br/> | ||||
213 | <dsNormal></dsNormal><br/> | ||||
214 | <At Rule>@viewport</At Rule><Normal Text> {</Normal Text><br/> | ||||
215 | <Normal Text> </Normal Text><Property>zoom</Property><Normal Text>: </Normal Text><Number>0.75</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
216 | <Normal Text> </Normal Text><Comment>/* comments */</Comment><br/> | ||||
217 | <Normal Text> </Normal Text><Property>min-zoom</Property><Normal Text>: </Normal Text><Number>0.5</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
218 | <Normal Text> </Normal Text><Property>max-zoom</Property><Normal Text>: </Normal Text><Number>0.9</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
219 | <Normal Text>}</Normal Text><br/> | ||||
220 | <dsNormal></dsNormal><br/> | ||||
221 | <At Rule>@viewport</At Rule><Normal Text> {</Normal Text><br/> | ||||
222 | <Normal Text> </Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
223 | <Normal Text> </Normal Text><Comment>/* comments */</Comment><br/> | ||||
224 | <Normal Text> </Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
225 | <Normal Text>}</Normal Text><br/> | ||||
226 | <dsNormal></dsNormal><br/> | ||||
227 | <At Rule>@document</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"https://www.example.com/"</String><Function>)</Function><Normal Text> {</Normal Text><br/> | ||||
228 | <Normal Text> </Normal Text><Selector Tag>h1</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
229 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
230 | <Normal Text> }</Normal Text><br/> | ||||
231 | <Normal Text>}</Normal Text><br/> | ||||
232 | <dsNormal></dsNormal><br/> | ||||
233 | <At Rule>@supports</At Rule><Normal Text> (</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>grid</Value><Normal Text>) {</Normal Text><br/> | ||||
234 | <Normal Text> </Normal Text><Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
235 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: grid</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
236 | <Normal Text> }</Normal Text><br/> | ||||
237 | <Normal Text>}</Normal Text><br/> | ||||
238 | <dsNormal></dsNormal><br/> | ||||
239 | <At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/> | ||||
240 | <Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> | ||||
241 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
242 | <Normal Text> }</Normal Text><br/> | ||||
243 | <Normal Text>}</Normal Text><br/> | ||||
244 | <dsNormal></dsNormal><br/> | ||||
245 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"fineprint.css"</String><Function>)</Function><Normal Text> </Normal Text><Value>print</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
246 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>fineprint.css</String><Function>)</Function><Normal Text> </Normal Text><Value>print</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
247 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>'bluish.css'</String><Function>)</Function><Normal Text> </Normal Text><Value>speech</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
248 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'custom.css'</String><Separator Symbol>;</Separator Symbol><br/> | ||||
249 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"chrome://communicator/skin/"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
250 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"common.css"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
251 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>'landscape.css'</String><Function>)</Function><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>:</Normal Text><Value>landscape</Value><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
252 | <dsNormal></dsNormal><br/> | ||||
253 | <At Rule>@namespace</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>http://www.w3.org/1999/xhtml</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
254 | <At Rule>@namespace</At Rule><Normal Text> svg </Normal Text><Function>url(</Function><String>http://www.w3.org/2000/svg</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
255 | <dsNormal></dsNormal><br/> | ||||
256 | <At Rule>@keyframes</At Rule><Normal Text> important1 {</Normal Text><br/> | ||||
257 | <Normal Text> </Normal Text><Value>from</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
258 | <Normal Text> </Normal Text><Value>50%</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> } </Normal Text><Comment>/* ignored */</Comment><br/> | ||||
259 | <Normal Text> </Normal Text><Value>to</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
260 | <Normal Text>}</Normal Text><br/> | ||||
261 | <dsNormal></dsNormal><br/> | ||||
262 | <At Rule>@keyframes</At Rule><Normal Text> important2 {</Normal Text><br/> | ||||
263 | <Normal Text> </Normal Text><Value>from</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
264 | <Normal Text> </Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
265 | <Normal Text> </Normal Text><Value>to</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* ignored */</Comment><br/> | ||||
266 | <Normal Text> </Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
267 | <Normal Text>}</Normal Text><br/> | ||||
268 | <dsNormal></dsNormal><br/> | ||||
269 | <At Rule>@keyframes</At Rule><Normal Text> slidein {</Normal Text><br/> | ||||
270 | <Normal Text> </Normal Text><Value>from</Value><Normal Text> {</Normal Text><br/> | ||||
271 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
272 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
273 | <Normal Text> }</Normal Text><br/> | ||||
274 | <dsNormal></dsNormal><br/> | ||||
275 | <Normal Text> </Normal Text><Value>to</Value><Normal Text> {</Normal Text><br/> | ||||
276 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
277 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
278 | <Normal Text> }</Normal Text><br/> | ||||
279 | <Normal Text>}</Normal Text><br/> | ||||
280 | <dsNormal></dsNormal><br/> | ||||
281 | <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/> | ||||
282 | <Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Normal Text> }</Normal Text><br/> | ||||
283 | <Normal Text> </Normal Text><Comment>/* comments */</Comment><br/> | ||||
284 | <Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Normal Text> }</Normal Text><br/> | ||||
285 | <Normal Text>}</Normal Text><br/> | ||||
286 | <dsNormal></dsNormal><br/> | ||||
287 | <Comment>/**</Comment><br/> | ||||
288 | <Comment> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</Comment><br/> | ||||
289 | <Comment> */</Comment><br/> | ||||
290 | <dsNormal></dsNormal><br/> | ||||
291 | <Selector Id>#main</Selector Id><Normal Text> </Normal Text><Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
292 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
293 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>97</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
294 | <dsNormal></dsNormal><br/> | ||||
295 | <Normal Text> </Normal Text><Selector Class>.redbox</Selector Class><Normal Text> {</Normal Text><br/> | ||||
296 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#ff0000</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
297 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#000000</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
298 | <Normal Text> }</Normal Text><br/> | ||||
299 | <Normal Text>}</Normal Text><br/> | ||||
300 | <dsNormal></dsNormal><br/> | ||||
301 | <Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
302 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
303 | <Normal Text> </Normal Text><Property>text-decoration</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
304 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>text-decoration</Property><Normal Text>: </Normal Text><Value>underline</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
305 | <Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.firefox</Selector Class><Normal Text> </Normal Text><Operator>&</Operator><Normal Text> { </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>normal</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
306 | <Normal Text>}</Normal Text><br/> | ||||
307 | <dsNormal></dsNormal><br/> | ||||
308 | <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> | ||||
309 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
310 | <Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
311 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
312 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
313 | <Normal Text> }</Normal Text><br/> | ||||
314 | <Normal Text>}</Normal Text><br/> | ||||
315 | <dsNormal></dsNormal><br/> | ||||
316 | <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> | ||||
317 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
318 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Tag>-sidebar</Selector Tag><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
319 | <Normal Text>}</Normal Text><br/> | ||||
320 | <dsNormal></dsNormal><br/> | ||||
321 | <Selector Class>.funky</Selector Class><Normal Text> {</Normal Text><br/> | ||||
322 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: {</Normal Text><br/> | ||||
323 | <Normal Text> </Normal Text><Property>family</Property><Normal Text>: </Normal Text><Value>fantasy</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
324 | <Normal Text> </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>30</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
325 | <Normal Text> </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
326 | <Normal Text> }</Normal Text><br/> | ||||
327 | <Normal Text>}</Normal Text><br/> | ||||
328 | <dsNormal></dsNormal><br/> | ||||
329 | <Selector Class>.funky</Selector Class><Normal Text> {</Normal Text><br/> | ||||
330 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Operator>/</Operator><Number>24</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>fantasy</Value><Normal Text> {</Normal Text><br/> | ||||
331 | <Normal Text> </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
332 | <Normal Text> }</Normal Text><br/> | ||||
333 | <Normal Text>}</Normal Text><br/> | ||||
334 | <dsNormal></dsNormal><br/> | ||||
335 | <Comment>/* This comment is</Comment><br/> | ||||
336 | <Comment> * several lines long.</Comment><br/> | ||||
337 | <Comment> * since it uses the CSS comment syntax,</Comment><br/> | ||||
338 | <Comment> * it will appear in the CSS output. */</Comment><br/> | ||||
339 | <Selector Tag>body</Selector Tag><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
340 | <dsNormal></dsNormal><br/> | ||||
341 | <Comment>// These comments are only one line long each.</Comment><br/> | ||||
342 | <Comment>// They won't appear in the CSS output,</Comment><br/> | ||||
343 | <Comment>// since they use the single-line comment syntax.</Comment><br/> | ||||
344 | <Selector Tag>a</Selector Tag><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
345 | <dsNormal></dsNormal><br/> | ||||
346 | <Variable>$version</Variable><Normal Text>: </Normal Text><String>"1.2.3"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
347 | <Comment>/* This CSS is generated by My Snazzy Framework version #{$version}. */</Comment><br/> | ||||
348 | <dsNormal></dsNormal><br/> | ||||
349 | <Variable>$width</Variable><Normal Text>: </Normal Text><Number>5</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
350 | <dsNormal></dsNormal><br/> | ||||
351 | <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> | ||||
352 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
353 | <Normal Text>}</Normal Text><br/> | ||||
354 | <dsNormal></dsNormal><br/> | ||||
355 | <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> | ||||
356 | <Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>5</Number><Unit>em</Unit><Normal Text> </Normal Text><Annotation>!global</Annotation><Separator Symbol>;</Separator Symbol><br/> | ||||
357 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
358 | <Normal Text>}</Normal Text><br/> | ||||
359 | <dsNormal></dsNormal><br/> | ||||
360 | <Selector Id>#sidebar</Selector Id><Normal Text> {</Normal Text><br/> | ||||
361 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
362 | <Normal Text>}</Normal Text><br/> | ||||
363 | <dsNormal></dsNormal><br/> | ||||
364 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>firefox-message</Function><Normal Text>(</Normal Text><Variable>$selector</Variable><Normal Text>) {</Normal Text><br/> | ||||
365 | <Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.firefox</Selector Class><Normal Text> </Normal Text><Variable>#{$selector}</Variable><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
366 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Hi, Firefox users!"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
367 | <Normal Text> }</Normal Text><br/> | ||||
368 | <Normal Text>}</Normal Text><br/> | ||||
369 | <dsNormal></dsNormal><br/> | ||||
370 | <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>firefox-message(</Function><String>".header"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
371 | <dsNormal></dsNormal><br/> | ||||
372 | <Variable>$map</Variable><Normal Text>: (key1: value1</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key2: value2</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key3: value3)</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
373 | <dsNormal></dsNormal><br/> | ||||
374 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
375 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Plain CSS, no division</Comment><br/> | ||||
376 | <Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>1000</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
377 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses a variable, does division</Comment><br/> | ||||
378 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>round(</Function><Number>1.5</Number><Function>)</Function><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses a function, does division</Comment><br/> | ||||
379 | <Normal Text> </Normal Text><Property>height</Property><Normal Text>: (</Normal Text><Number>500</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses parentheses, does division</Comment><br/> | ||||
380 | <Normal Text> </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses +, does division</Comment><br/> | ||||
381 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: (</Normal Text><Value>italic</Value><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// In a list, parentheses don't count</Comment><br/> | ||||
382 | <Normal Text>}</Normal Text><br/> | ||||
383 | <dsNormal></dsNormal><br/> | ||||
384 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
385 | <Normal Text> </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
386 | <Normal Text> </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
387 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Variable>#{$font-size}</Variable><Operator>/</Operator><Variable>#{$line-height}</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
388 | <Normal Text>}</Normal Text><br/> | ||||
389 | <dsNormal></dsNormal><br/> | ||||
390 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
391 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#010203</Color><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Color>#040506</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
392 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
393 | <Normal Text>}</Normal Text><br/> | ||||
394 | <dsNormal></dsNormal><br/> | ||||
395 | <Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
396 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
397 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>opacify(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.3</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
398 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>transparentize(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.25</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
399 | <Normal Text>}</Normal Text><br/> | ||||
400 | <dsNormal></dsNormal><br/> | ||||
401 | <Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
402 | <Variable>$green</Variable><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
403 | <Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
404 | <Normal Text> </Normal Text><Property>filter</Property><Normal Text>: progid:DXImageTransform</Normal Text><Number>.</Number><Normal Text>Microsoft</Normal Text><Number>.</Number><Function>gradient(</Function><Normal Text>enabled=</Normal Text><String>'false'</String><Separator Symbol>,</Separator Symbol><Normal Text> startColorstr=</Normal Text><String>'</String><SpecialChar>#{</SpecialChar><Function>ie-hex-str(</Function><Variable>$green</Variable><Function>)</Function><SpecialChar>}</SpecialChar><String>'</String><Separator Symbol>,</Separator Symbol><Normal Text> endColorstr=</Normal Text><String>'</String><SpecialChar>#{</SpecialChar><Function>ie-hex-str(</Function><Variable>$translucent-red</Variable><Function>)</Function><SpecialChar>}</SpecialChar><String>'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
405 | <Normal Text>}</Normal Text><br/> | ||||
406 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
407 | <Normal Text> </Normal Text><Property>cursor</Property><Normal Text>: e </Normal Text><Operator>+</Operator><Normal Text> -resize</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
408 | <Normal Text>}</Normal Text><br/> | ||||
409 | <Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
410 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Foo "</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> Bar</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
411 | <Normal Text> </Normal Text><Property>font-family</Property><Normal Text>: sans- </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>"serif"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
412 | <Normal Text>}</Normal Text><br/> | ||||
413 | <Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
414 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate #{5 + 10} pies!"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
415 | <Normal Text>}</Normal Text><br/> | ||||
416 | <Variable>$value</Variable><Normal Text>: null</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
417 | <Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
418 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate #{$value} pies!"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
419 | <Normal Text>}</Normal Text><br/> | ||||
420 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
421 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
422 | <Normal Text>}</Normal Text><br/> | ||||
423 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
424 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>hsl(</Function><Variable>$hue</Variable><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$saturation</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$lightness</Variable><Normal Text>: </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
425 | <Normal Text>}</Normal Text><br/> | ||||
426 | <Variable>$name</Variable><Normal Text>: foo</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
427 | <Variable>$attr</Variable><Normal Text>: border</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
428 | <Selector Tag>p</Selector Tag><Selector Class>.</Selector Class><Variable>#{$name}</Variable><Normal Text> {</Normal Text><br/> | ||||
429 | <Normal Text> </Normal Text><Variable>#{$attr}</Variable><Unknown Property>-color</Unknown Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
430 | <Normal Text>}</Normal Text><br/> | ||||
431 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
432 | <Normal Text> </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
433 | <Normal Text> </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
434 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Variable>#{$font-size}</Variable><Operator>/</Operator><Variable>#{$line-height}</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
435 | <Normal Text>}</Normal Text><br/> | ||||
436 | <dsNormal></dsNormal><br/> | ||||
437 | <Selector Class>.foo.bar</Selector Class><Normal Text> </Normal Text><Selector Class>.baz.bang</Selector Class><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Class>.bip.qux</Selector Class><Normal Text> {</Normal Text><br/> | ||||
438 | <Normal Text> </Normal Text><Variable>$selector</Variable><Normal Text>: &</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
439 | <Normal Text>}</Normal Text><br/> | ||||
440 | <dsNormal></dsNormal><br/> | ||||
441 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>does-parent-exist</Function><Normal Text> {</Normal Text><br/> | ||||
442 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> & {</Normal Text><br/> | ||||
443 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
444 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
445 | <Normal Text> }</Normal Text><br/> | ||||
446 | <Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/> | ||||
447 | <Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
448 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
449 | <Normal Text> }</Normal Text><br/> | ||||
450 | <Normal Text> }</Normal Text><br/> | ||||
451 | <Normal Text>}</Normal Text><br/> | ||||
452 | <dsNormal></dsNormal><br/> | ||||
453 | <Variable>$content</Variable><Normal Text>: </Normal Text><String>"First content"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
454 | <Variable>$content</Variable><Normal Text>: </Normal Text><String>"Second content?"</String><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><br/> | ||||
455 | <Variable>$new_content</Variable><Normal Text>: </Normal Text><String>"First time reference"</String><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><br/> | ||||
456 | <dsNormal></dsNormal><br/> | ||||
457 | <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> | ||||
458 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$content</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
459 | <Normal Text> </Normal Text><Unknown Property>new-content</Unknown Property><Normal Text>: </Normal Text><Variable>$new_content</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
460 | <Normal Text>}</Normal Text><br/> | ||||
461 | <dsNormal></dsNormal><br/> | ||||
462 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo.css"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
463 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
464 | <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://foo.com/bar"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
465 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>foo</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
466 | <dsNormal></dsNormal><br/> | ||||
467 | <Variable>$family</Variable><Normal Text>: </Normal Text><Function>unquote(</Function><String>"Droid+Sans"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
468 | <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"http://fonts.googleapis.com/css?family=#{$family}"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
469 | <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/> | ||||
470 | <Normal Text> </Normal Text><At Rule>@import</At Rule><Normal Text> </Normal Text><String>"example"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
471 | <Normal Text>}</Normal Text><br/> | ||||
472 | <dsNormal></dsNormal><br/> | ||||
473 | <Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> | ||||
474 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
475 | <Normal Text> </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/> | ||||
476 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
477 | <Normal Text> }</Normal Text><br/> | ||||
478 | <Normal Text>}</Normal Text><br/> | ||||
479 | <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> {</Normal Text><br/> | ||||
480 | <Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> | ||||
481 | <Normal Text> </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/> | ||||
482 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
483 | <Normal Text> }</Normal Text><br/> | ||||
484 | <Normal Text> }</Normal Text><br/> | ||||
485 | <Normal Text>}</Normal Text><br/> | ||||
486 | <dsNormal></dsNormal><br/> | ||||
487 | <Variable>$media</Variable><Normal Text>: screen</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
488 | <Variable>$feature</Variable><Normal Text>: -webkit-min-device-pixel-ratio</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
489 | <Variable>$value</Variable><Normal Text>: </Normal Text><Number>1.5</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
490 | <dsNormal></dsNormal><br/> | ||||
491 | <At Rule>@media</At Rule><Normal Text> </Normal Text><Variable>#{$media}</Variable><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Variable>$feature</Variable><Normal Text>: </Normal Text><Variable>$value</Variable><Normal Text>) {</Normal Text><br/> | ||||
492 | <Normal Text> </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/> | ||||
493 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
494 | <Normal Text> }</Normal Text><br/> | ||||
495 | <Normal Text>}</Normal Text><br/> | ||||
496 | <dsNormal></dsNormal><br/> | ||||
497 | <Selector Class>.error</Selector Class><Normal Text> {</Normal Text><br/> | ||||
498 | <Normal Text> </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Color>#f00</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
499 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
500 | <Normal Text>}</Normal Text><br/> | ||||
501 | <Selector Class>.seriousError</Selector Class><Normal Text> {</Normal Text><br/> | ||||
502 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.error</Selector Class><Separator Symbol>;</Separator Symbol><br/> | ||||
503 | <Normal Text> </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
504 | <Normal Text>}</Normal Text><br/> | ||||
505 | <dsNormal></dsNormal><br/> | ||||
506 | <Selector Class>.hoverlink</Selector Class><Normal Text> {</Normal Text><br/> | ||||
507 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Separator Symbol>;</Separator Symbol><br/> | ||||
508 | <Normal Text>}</Normal Text><br/> | ||||
509 | <Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
510 | <Normal Text> </Normal Text><Property>text-decoration</Property><Normal Text>: </Normal Text><Value>underline</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
511 | <Normal Text>}</Normal Text><br/> | ||||
512 | <dsNormal></dsNormal><br/> | ||||
513 | <Selector Id>#context</Selector Id><Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Placeholder Selector>%extreme</Placeholder Selector><Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Normal Text> </Normal Text><Placeholder Selector>%extreme</Placeholder Selector><Normal Text> {</Normal Text><br/> | ||||
514 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
515 | <Normal Text> </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
516 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
517 | <Normal Text>}</Normal Text><br/> | ||||
518 | <Selector Class>.notice</Selector Class><Normal Text> {</Normal Text><br/> | ||||
519 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%extreme</Placeholder Selector><Separator Symbol>;</Separator Symbol><br/> | ||||
520 | <Normal Text>}</Normal Text><br/> | ||||
521 | <dsNormal></dsNormal><br/> | ||||
522 | <Selector Tag>a</Selector Tag><Selector Class>.important</Selector Class><Normal Text> {</Normal Text><br/> | ||||
523 | <Normal Text> </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.notice</Selector Class><Normal Text> !</Normal Text><Selector Tag>optional</Selector Tag><Separator Symbol>;</Separator Symbol><br/> | ||||
524 | <Normal Text>}</Normal Text><br/> | ||||
525 | <dsNormal></dsNormal><br/> | ||||
526 | <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/> | ||||
527 | <Normal Text> </Normal Text><Selector Class>.page</Selector Class><Normal Text> {</Normal Text><br/> | ||||
528 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>8</Number><Unit>in</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
529 | <Normal Text> </Normal Text><At Rule>@at-root</At Rule><Normal Text> (</Normal Text><Property>without</Property><Normal Text>: media) {</Normal Text><br/> | ||||
530 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
531 | <Normal Text> }</Normal Text><br/> | ||||
532 | <Normal Text> }</Normal Text><br/> | ||||
533 | <Normal Text>}</Normal Text><br/> | ||||
534 | <dsNormal></dsNormal><br/> | ||||
535 | <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>12</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
536 | <dsNormal></dsNormal><br/> | ||||
537 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/> | ||||
538 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> | ||||
539 | <Normal Text> </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming #{$x} to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
540 | <Normal Text> </Normal Text><Variable>$x</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
541 | <Normal Text> }</Normal Text><br/> | ||||
542 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> | ||||
543 | <Normal Text> </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming #{$y} to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/> | ||||
544 | <Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
545 | <Normal Text> }</Normal Text><br/> | ||||
546 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
547 | <Normal Text>}</Normal Text><br/> | ||||
548 | <dsNormal></dsNormal><br/> | ||||
549 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/> | ||||
550 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> | ||||
551 | <Normal Text> </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$x may not be unitless, was #{$x}."</String><Separator Symbol>;</Separator Symbol><br/> | ||||
552 | <Normal Text> }</Normal Text><br/> | ||||
553 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/> | ||||
554 | <Normal Text> </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$y may not be unitless, was #{$y}."</String><Separator Symbol>;</Separator Symbol><br/> | ||||
555 | <Normal Text> }</Normal Text><br/> | ||||
556 | <Normal Text> </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
557 | <Normal Text>}</Normal Text><br/> | ||||
558 | <dsNormal></dsNormal><br/> | ||||
559 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
560 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Number>2</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
561 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>5</Number><Normal Text> </Normal Text><Operator><</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>dotted</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
562 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>double</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
563 | <Normal Text>}</Normal Text><br/> | ||||
564 | <dsNormal></dsNormal><br/> | ||||
565 | <Variable>$type</Variable><Normal Text>: monster</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
566 | <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
567 | <Normal Text> </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> ocean {</Normal Text><br/> | ||||
568 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
569 | <Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> matador {</Normal Text><br/> | ||||
570 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
571 | <Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> monster {</Normal Text><br/> | ||||
572 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
573 | <Normal Text> } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/> | ||||
574 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
575 | <Normal Text> }</Normal Text><br/> | ||||
576 | <Normal Text>}</Normal Text><br/> | ||||
577 | <dsNormal></dsNormal><br/> | ||||
578 | <At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Number>3</Number><Normal Text> {</Normal Text><br/> | ||||
579 | <Normal Text> </Normal Text><Selector Class>.item-</Selector Class><Variable>#{$i}</Variable><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
580 | <Normal Text>}</Normal Text><br/> | ||||
581 | <dsNormal></dsNormal><br/> | ||||
582 | <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text> in puma, sea-slug, egret, salamander {</Normal Text><br/> | ||||
583 | <Normal Text> </Normal Text><Selector Class>.</Selector Class><Variable>#{$animal}</Variable><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
584 | <Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/#{$animal}.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
585 | <Normal Text> }</Normal Text><br/> | ||||
586 | <Normal Text>}</Normal Text><br/> | ||||
587 | <dsNormal></dsNormal><br/> | ||||
588 | <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text>, </Normal Text><Variable>$cursor</Variable><Normal Text> in (puma, </Normal Text><Color>black</Color><Normal Text>, </Normal Text><Value>default</Value><Normal Text>),</Normal Text><br/> | ||||
589 | <Normal Text> (sea-slug, </Normal Text><Color>blue</Color><Normal Text>, </Normal Text><Value>pointer</Value><Normal Text>),</Normal Text><br/> | ||||
590 | <Normal Text> (egret, </Normal Text><Color>white</Color><Normal Text>, </Normal Text><Value>move</Value><Normal Text>) {</Normal Text><br/> | ||||
591 | <Normal Text> </Normal Text><Selector Class>.</Selector Class><Variable>#{$animal}</Variable><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
592 | <Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/#{$animal}.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
593 | <Normal Text> </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Variable>$color</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
594 | <Normal Text> </Normal Text><Property>cursor</Property><Normal Text>: </Normal Text><Variable>$cursor</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
595 | <Normal Text> }</Normal Text><br/> | ||||
596 | <Normal Text>}</Normal Text><br/> | ||||
597 | <dsNormal></dsNormal><br/> | ||||
598 | <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$header</Variable><Normal Text>, </Normal Text><Variable>$size</Variable><Normal Text> in (h1: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text>, h2: </Normal Text><Number>1.5</Number><Unit>em</Unit><Normal Text>, h3: </Normal Text><Number>1.2</Number><Unit>em</Unit><Normal Text>) {</Normal Text><br/> | ||||
599 | <Normal Text> </Normal Text><Variable>#{$header}</Variable><Normal Text> {</Normal Text><br/> | ||||
600 | <Normal Text> </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
601 | <Normal Text> }</Normal Text><br/> | ||||
602 | <Normal Text>}</Normal Text><br/> | ||||
603 | <dsNormal></dsNormal><br/> | ||||
604 | <Variable>$i</Variable><Normal Text>: </Normal Text><Number>6</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
605 | <At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> > </Normal Text><Number>0</Number><Normal Text> {</Normal Text><br/> | ||||
606 | <Normal Text> </Normal Text><Selector Class>.item-</Selector Class><Variable>#{$i}</Variable><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
607 | <Normal Text> </Normal Text><Variable>$i</Variable><Normal Text>: </Normal Text><Variable>$i</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>2</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
608 | <Normal Text>}</Normal Text><br/> | ||||
609 | <dsNormal></dsNormal><br/> | ||||
610 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>large-text</Function><Normal Text> {</Normal Text><br/> | ||||
611 | <Normal Text> </Normal Text><Property>font</Property><Normal Text>: {</Normal Text><br/> | ||||
612 | <Normal Text> </Normal Text><Property>family</Property><Normal Text>: Arial</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
613 | <Normal Text> </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
614 | <Normal Text> </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
615 | <Normal Text> }</Normal Text><br/> | ||||
616 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#ff0000</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
617 | <Normal Text>}</Normal Text><br/> | ||||
618 | <dsNormal></dsNormal><br/> | ||||
619 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>clearfix</Function><Normal Text> {</Normal Text><br/> | ||||
620 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
621 | <Normal Text> </Normal Text><Operator>&</Operator><Selector Pseudo>:after</Selector Pseudo><Normal Text> {</Normal Text><br/> | ||||
622 | <Normal Text> </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"."</String><Separator Symbol>;</Separator Symbol><br/> | ||||
623 | <Normal Text> </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>block</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
624 | <Normal Text> </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>;</Separator Symbol><br/> | ||||
625 | <Normal Text> </Normal Text><Property>clear</Property><Normal Text>: </Normal Text><Value>both</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
626 | <Normal Text> </Normal Text><Property>visibility</Property><Normal Text>: </Normal Text><Value>hidden</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
627 | <Normal Text> }</Normal Text><br/> | ||||
628 | <Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Selector Tag>html</Selector Tag><Normal Text> </Normal Text><Operator>&</Operator><Normal Text> { </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> }</Normal Text><br/> | ||||
629 | <Normal Text>}</Normal Text><br/> | ||||
630 | <dsNormal></dsNormal><br/> | ||||
631 | <Selector Class>.page-title</Selector Class><Normal Text> {</Normal Text><br/> | ||||
632 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> large-text</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
633 | <Normal Text> </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
634 | <Normal Text> </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
635 | <Normal Text>}</Normal Text><br/> | ||||
636 | <dsNormal></dsNormal><br/> | ||||
637 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>compound</Function><Normal Text> {</Normal Text><br/> | ||||
638 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> highlighted-background</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
639 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> header-text</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
640 | <Normal Text>}</Normal Text><br/> | ||||
641 | <dsNormal></dsNormal><br/> | ||||
642 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>highlighted-background</Function><Normal Text> { </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fc0</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
643 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>header-text</Function><Normal Text> { </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
644 | <dsNormal></dsNormal><br/> | ||||
645 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>sexy-border</Function><Normal Text>(</Normal Text><Variable>$color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>) {</Normal Text><br/> | ||||
646 | <Normal Text> </Normal Text><Property>border</Property><Normal Text>: {</Normal Text><br/> | ||||
647 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
648 | <Normal Text> </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
649 | <Normal Text> </Normal Text><Property>style</Property><Normal Text>: </Normal Text><Value>dashed</Value><Separator Symbol>;</Separator Symbol><br/> | ||||
650 | <Normal Text> }</Normal Text><br/> | ||||
651 | <Normal Text>}</Normal Text><br/> | ||||
652 | <dsNormal></dsNormal><br/> | ||||
653 | <Selector Tag>p</Selector Tag><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>sexy-border(</Function><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>1</Number><Unit>in</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
654 | <dsNormal></dsNormal><br/> | ||||
655 | <Selector Tag>p</Selector Tag><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>sexy-border(</Function><Variable>$color</Variable><Normal Text>: </Normal Text><Color>blue</Color><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
656 | <Selector Tag>h1</Selector Tag><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>sexy-border(</Function><Variable>$color</Variable><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>2</Number><Unit>in</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> | ||||
657 | <dsNormal></dsNormal><br/> | ||||
658 | <dsNormal></dsNormal><br/> | ||||
659 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>colors</Function><Normal Text>(</Normal Text><Variable>$text</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$background</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$border</Variable><Normal Text>) {</Normal Text><br/> | ||||
660 | <Normal Text> </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$text</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
661 | <Normal Text> </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$background</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
662 | <Normal Text> </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Variable>$border</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
663 | <Normal Text>}</Normal Text><br/> | ||||
664 | <dsNormal></dsNormal><br/> | ||||
665 | <Variable>$values</Variable><Normal Text>: </Normal Text><Color>#ff0000</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>#00ff00</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>#0000ff</Color><Separator Symbol>;</Separator Symbol><br/> | ||||
666 | <Selector Class>.primary</Selector Class><Normal Text> {</Normal Text><br/> | ||||
667 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>colors(</Function><Variable>$values</Variable><Number>...</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
668 | <Normal Text>}</Normal Text><br/> | ||||
669 | <dsNormal></dsNormal><br/> | ||||
670 | <Variable>$value-map</Variable><Normal Text>: (</Normal Text><Value>text</Value><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>background</Color><Normal Text>: </Normal Text><Color>#0000ff</Color><Separator Symbol>,</Separator Symbol><Normal Text> border: </Normal Text><Color>#ff0000</Color><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/> | ||||
671 | <Selector Class>.secondary</Selector Class><Normal Text> {</Normal Text><br/> | ||||
672 | <Normal Text> </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>colors(</Function><Variable>$value-map</Variable><Number>...</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
673 | <Normal Text>}</Normal Text><br/> | ||||
674 | <dsNormal></dsNormal><br/> | ||||
675 | <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>apply-to-ie6-only</Function><Normal Text> {</Normal Text><br/> | ||||
676 | <Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Selector Tag>html</Selector Tag><Normal Text> {</Normal Text><br/> | ||||
677 | <Normal Text> </Normal Text><At Rule>@content</At Rule><Separator Symbol>;</Separator Symbol><br/> | ||||
678 | <Normal Text> }</Normal Text><br/> | ||||
679 | <Normal Text>}</Normal Text><br/> | ||||
680 | <At Rule>@include</At Rule><Normal Text> apply-to-ie6-only {</Normal Text><br/> | ||||
681 | <Normal Text> </Normal Text><Selector Id>#logo</Selector Id><Normal Text> {</Normal Text><br/> | ||||
682 | <Normal Text> </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>/logo.gif</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/> | ||||
683 | <Normal Text> }</Normal Text><br/> | ||||
684 | <Normal Text>}</Normal Text><br/> | ||||
685 | <dsNormal></dsNormal><br/> | ||||
686 | <Variable>$grid-width</Variable><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
687 | <Variable>$gutter-width</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/> | ||||
688 | <dsNormal></dsNormal><br/> | ||||
689 | <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>grid-width</Function><Normal Text>(</Normal Text><Variable>$n</Variable><Normal Text>) {</Normal Text><br/> | ||||
690 | <Normal Text> </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$grid-width</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text>) </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$gutter-width</Variable><Separator Symbol>;</Separator Symbol><br/> | ||||
691 | <Normal Text>}</Normal Text><br/> | ||||
692 | <dsNormal></dsNormal><br/> | ||||
693 | <Selector Id>#sidebar</Selector Id><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>grid-width(</Function><Number>5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/> |