Differential D23245 Diff 63987 autotests/html/highlight.scss.html

Changeset View

Standalone View

View Options

autotests/html/highlight.scss.html

Show First 20 Lines • Show All 107 Lines • ▼ Show 20 Line(s)
108} 108​}
109 109​
110<span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span> 110​<span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
111body <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> { 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>; 112​ <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
113} 113​}
114 114​
115<span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span> 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> 116​<span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span>
117body <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> { 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>; 118​ <span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span>;
119} 119​}
120 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>; } 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>; } 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>; } 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>; } 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>; } 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>; } 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>; } 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 128​
129<span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>, 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>, 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> { 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>; 132​ <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span>;
133 unknown-property: <span style="color:#aa5500;">lime</span>; 133​ unknown-property: <span style="color:#aa5500;">lime</span>;
134} 134​}
135 135​
136<span style="color:#b08000;font-style:italic;">:root</span>{ 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> 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.width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
138} 138​}
139 139​
140<span style="color:#b08000;font-style:italic;">:root</span>, 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>;} 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>;} 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 143​
144a<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>} 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 145​
▲ Show 20 Lines • Show All 186 Lines • ▼ Show 20 Line(s)327<span style="color:#644a9b;">.funky</span> {
332 } 332​ }
333} 333​}
334 334​
335<span style="color:#644a9b;">.funky</span> { 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> { 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>; 337​ <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>;
338 } 338​ }
339} 339​}
340 340​
341<span style="color:#898887;">/* This comment is</span> 341​<span style="color:#898887;">/* This comment is</span>
342<span style="color:#898887;"> * several lines long.</span> 342​<span style="color:#898887;"> * several lines long.</span>
343<span style="color:#898887;"> * since it uses the CSS comment syntax,</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> 344​<span style="color:#898887;"> * it will appear in the CSS output. */</span>
345body { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>; } 345​body { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>; }
346 346​
347<span style="color:#898887;">// These comments are only one line long each.</span> 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> 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> 349​<span style="color:#898887;">// since they use the single-line comment syntax.</span>
350a { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>; } 350​a { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>; }
351 351​
352<span style="color:#0057ae;">$version</span>: <span style="color:#bf0303;">&quot;1.2.3&quot;</span>; 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> 353​<span style="color:#898887;">/* This CSS is generated by My Snazzy Framework version #{$version}. */</span>
354 354​
355<span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">em</span>; 355​<span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">em</span>;
356 356​
357<span style="color:#006e28;font-weight:bold;">#main</span> { 357​<span style="color:#006e28;font-weight:bold;">#main</span> {
358 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>; 358​ <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>;
359} 359​}
360 360​
▲ Show 20 Lines • Show All 41 Lines • ▼ Show 20 Line(s)
402p { 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>; 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>; 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} 405​}
406 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>; 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>; 408​<span style="color:#0057ae;">$green</span>: <span style="color:#aa5500;">#00ff00</span>;
409div { 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:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$green</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span>, endColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$translucent-red</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span><span style="color:#644a9b;">)</span>; 410​ <span style="font-weight:bold;">filter</span>: progid:DXImageTransform.Microsoft.<span style="color:#644a9b;">gradient(</span>enabled=<span style="color:#bf0303;">'false'</span>, startColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$green</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span>, endColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$translucent-red</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span><span style="color:#644a9b;">)</span>;
411} 411​}
412p { 412​p {
413 <span style="font-weight:bold;">cursor</span>: e + -resize; 413​ <span style="font-weight:bold;">cursor</span>: e + -resize;
414} 414​}
415p<span style="color:#b08000;font-style:italic;">:before</span> { 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; 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>; 417​ <span style="font-weight:bold;">font-family</span>: sans- + <span style="color:#bf0303;">&quot;serif&quot;</span>;
418} 418​}
419p<span style="color:#b08000;font-style:italic;">:before</span> { 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 </span>#{<span style="color:#b08000;">5</span> + <span style="color:#b08000;">10</span>}<span style="color:#bf0303;"> pies!&quot;</span>; 420​ <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;I ate </span>#{<span style="color:#b08000;">5</span> + <span style="color:#b08000;">10</span>}<span style="color:#bf0303;"> pies!&quot;</span>;
421} 421​}
422<span style="color:#0057ae;">$value</span>: null; 422​<span style="color:#0057ae;">$value</span>: <span style="color:#644a9b;font-weight:bold;">null</span>;
423p<span style="color:#b08000;font-style:italic;">:before</span> { 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 </span>#{<span style="color:#0057ae;">$value</span>}<span style="color:#bf0303;"> pies!&quot;</span>; 424​ <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;I ate </span>#{<span style="color:#0057ae;">$value</span>}<span style="color:#bf0303;"> pies!&quot;</span>;
425} 425​}
426p { 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>); 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} 428​}
429p { 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>; 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>;
▲ Show 20 Lines • Show All 129 Lines • ▼ Show 20 Line(s)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 </span>#{<span style="color:#0057ae;">$y</span>}<span style="color:#bf0303;">.&quot;</span>; 560​ <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;$y may not be unitless, was </span>#{<span style="color:#0057ae;">$y</span>}<span style="color:#bf0303;">.&quot;</span>;
561 } 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>; 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} 563​}
564 564​
565p { 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>; } 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>; } 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>; } 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} 569​}
570 570​
571<span style="color:#0057ae;">$type</span>: monster; 571​<span style="color:#0057ae;">$type</span>: monster;
572p { 572​p {
573 <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$type</span> == ocean { 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>; 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 { 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>; 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 { 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>; 578​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
579 } <span style="color:#ff5500;">@else</span> { 579​ } <span style="color:#ff5500;">@else</span> {
580 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>; 580​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
Show All 13 Lines
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>), 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>), 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>) { 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 { 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/</span>#{<span style="color:#0057ae;">$animal</span>}<span style="color:#bf0303;">.png'</span><span style="color:#644a9b;">)</span>; 598​ <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'/images/</span>#{<span style="color:#0057ae;">$animal</span>}<span style="color:#bf0303;">.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>; 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>; 600​ <span style="font-weight:bold;">cursor</span>: <span style="color:#0057ae;">$cursor</span>;
601 } 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> {
602} 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>; }
603 613​ <span style="color:#0057ae;">$i</span>: <span style="color:#0057ae;">$i</span> - <span style="color:#b08000;">2</span>;
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>) { 614​}
605 #{<span style="color:#0057ae;">$header</span>} { 615​
606 <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span>; 616​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">large-text</span> {
607 } 617​ <span style="font-weight:bold;">font</span>: {
608} 618​ <span style="font-weight:bold;">family</span>: Arial;
609 619​ <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
610<span style="color:#0057ae;">$i</span>: <span style="color:#b08000;">6</span>; 620​ <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>;
611<span style="color:#ff5500;">@while</span> <span style="color:#0057ae;">$i</span> &gt; <span style="color:#b08000;">0</span> { 621​ }
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>; } 622​ <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#ff0000</span>;
613 <span style="color:#0057ae;">$i</span>: <span style="color:#0057ae;">$i</span> - <span style="color:#b08000;">2</span>; 623​}
614} 624​
615 625​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">clearfix</span> {
616<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">large-text</span> { 626​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>;
617 <span style="font-weight:bold;">font</span>: { 627​ &amp;<span style="color:#b08000;font-style:italic;">:after</span> {
618 <span style="font-weight:bold;">family</span>: Arial; 628​ <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;.&quot;</span>;
619 <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>; 629​ <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>;
620 <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>; 630​ <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">0</span>;
621 } 631​ <span style="font-weight:bold;">clear</span>: <span style="color:#b08000;">both</span>;
622 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#ff0000</span>; 632​ <span style="font-weight:bold;">visibility</span>: <span style="color:#b08000;">hidden</span>;
623} 633​ }
624 634​ * html &amp; { <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> }
625<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">clearfix</span> { 635​}
626 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>; 636​
627 &amp;<span style="color:#b08000;font-style:italic;">:after</span> { 637​<span style="color:#644a9b;">.page-title</span> {
628 <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;.&quot;</span>; 638​ <span style="color:#ff5500;">@include</span> large-text;
629 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>; 639​ <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span>;
630 <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">0</span>; 640​ <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>;
631 <span style="font-weight:bold;">clear</span>: <span style="color:#b08000;">both</span>; 641​}
632 <span style="font-weight:bold;">visibility</span>: <span style="color:#b08000;">hidden</span>; 642​
633 } 643​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">compound</span> {
634 * html &amp; { <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> } 644​ <span style="color:#ff5500;">@include</span> highlighted-background;
635} 645​ <span style="color:#ff5500;">@include</span> header-text;
636 646​}
637<span style="color:#644a9b;">.page-title</span> { 647​
638 <span style="color:#ff5500;">@include</span> large-text; 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>; }
639 <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</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>; }
640 <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; 650​
641} 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>) {
642 652​ <span style="font-weight:bold;">border</span>: {
643<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">compound</span> { 653​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>;
644 <span style="color:#ff5500;">@include</span> highlighted-background; 654​ <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>;
645 <span style="color:#ff5500;">@include</span> header-text; 655​ <span style="font-weight:bold;">style</span>: <span style="color:#b08000;">dashed</span>;
646} 656​ }
647 657​}
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>; } 658​
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>; } 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>; }
650 660​
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>) { 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>; }
652 <span style="font-weight:bold;">border</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>; }
653 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>; 663​
654 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>; 664​
655 <span style="font-weight:bold;">style</span>: <span style="color:#b08000;">dashed</span>; 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>) {
656 } 666​ <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$text</span>;
657} 667​ <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$background</span>;
658 668​ <span style="font-weight:bold;">border-color</span>: <span style="color:#0057ae;">$border</span>;
659p { <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>; } 669​}
660 670​
661p { <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>; } 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>;
662h1 { <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>; } 672​<span style="color:#644a9b;">.primary</span> {
663 673​ <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$values</span>...<span style="color:#644a9b;">)</span>;
664 674​}
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>) { 675​
666 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$text</span>; 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>);
667 <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$background</span>; 677​<span style="color:#644a9b;">.secondary</span> {
668 <span style="font-weight:bold;">border-color</span>: <span style="color:#0057ae;">$border</span>; 678​ <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$value-map</span>...<span style="color:#644a9b;">)</span>;
669} 679​}
670 680​
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>; 681​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">apply-to-ie6-only</span> {
672<span style="color:#644a9b;">.primary</span> { 682​ * html {
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>; 683​ <span style="color:#ff5500;">@content</span>;
674} 684​ }
675 685​}
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>); 686​<span style="color:#ff5500;">@include</span> apply-to-ie6-only {
677<span style="color:#644a9b;">.secondary</span> { 687​ <span style="color:#006e28;font-weight:bold;">#logo</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>; 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>;
679} 689​ }
680 690​}
681<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">apply-to-ie6-only</span> { 691​
682 * html { 692​<span style="color:#0057ae;">$grid-width</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>;
683 <span style="color:#ff5500;">@content</span>; 693​<span style="color:#0057ae;">$gutter-width</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>;
684 } 694​
685} 695​<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">grid-width</span>(<span style="color:#0057ae;">$n</span>) {
686<span style="color:#ff5500;">@include</span> apply-to-ie6-only { 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>;
687 <span style="color:#006e28;font-weight:bold;">#logo</span> { 697​}
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>; 698​
689 } 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>; }
690} 700​
691 701​<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>) {
692<span style="color:#0057ae;">$grid-width</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>; 702​ <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>} {
693<span style="color:#0057ae;">$gutter-width</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; 703​ <span style="color:#ff5500;">@content</span>;
694 704​ }
695<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">grid-width</span>(<span style="color:#0057ae;">$n</span>) { 705​}
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>; 706​
697} 707​<span style="color:#b08000;font-style:italic;">:root</span> {
698 708​ <span style="color:#0057ae;">--font-family-sans-serif</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-sans-serif</span><span style="color:#644a9b;">)</span>};
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>; } 709​ <span style="color:#0057ae;">--font-family-monospace</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-monospace</span><span style="color:#644a9b;">)</span>};
700 710​}
701<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>) { 711​
702 <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>} { 712​div {
703 <span style="color:#ff5500;">@content</span>; 713​ <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/icons/</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#bf0303;">.svg&quot;</span><span style="color:#644a9b;">)</span>;
704 } 714​ <span style="font-weight:bold;">font</span>: #{<span style="color:#bf0303;">&quot;string&quot;</span>};
705} 715​
706 716​<span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>} {
707<span style="color:#b08000;font-style:italic;">:root</span> { 717​ <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>;
708 <span style="color:#0057ae;">--font-family-sans-serif</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-sans-serif</span><span style="color:#644a9b;">)</span>}; 718​ #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>;
709 <span style="color:#0057ae;">--font-family-monospace</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-monospace</span><span style="color:#644a9b;">)</span>}; 719​ -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>;
710} 720​ <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>} {
711 721​ <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>;
712div { 722​ #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>;
713 <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/icons/</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#bf0303;">.svg&quot;</span><span style="color:#644a9b;">)</span>; 723​ -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}-image: <span style="color:#0057ae;">$value</span>
714 <span style="font-weight:bold;">font</span>: #{<span style="color:#bf0303;">&quot;string&quot;</span>}; 724​ }
715} 725​}
716</pre></body></html> 726​</pre></body></html>