Differential D14603 Diff 39067 autotests/html/highlight.scss.html

Changeset View

Standalone View

View Options

autotests/html/highlight.scss.html

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