vasilito/RedBear-OS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4716dd6ce4c93a7fc41031ffaaed9e16eee44876
RedBear-OS/local/recipes/kde/kf6-syntaxhighlighting/source/autotests/html/highlight.scss.html
T

1272 lines
152 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.scss</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (SCSS) - Theme (Breeze Light)"/>
</head><body style="background-color:#ffffff;color:#1f1c1b"><pre>
<span style="color:#898887">/**</span>
<span style="color:#898887"> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">/* Properties */</span>
body {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">15</span><span style="color:#0057ae">pt</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Verdana<span style="color:#ca60ca">,</span> Helvetica<span style="color:#ca60ca">,</span> <span style="color:#bf0303">"Bitstream Vera Sans"</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* yet another comment */</span>
<span style="font-weight:bold">margin-bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">// this is no comment, it's just broken!</span>
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">hsl(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">95</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">-</span> <span style="color:#b08000">3</span><span style="color:#0057ae">%</span><span style="color:#644a9b">))</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Droid Sans"</span><span style="color:#ca60ca">,</span> Arial<span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">11</span><span style="color:#0057ae">pt</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.5</span><span style="color:#0057ae">em</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#fff000</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">text-shadow</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span> <span style="color:#b08000">0</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.3</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">box-sizing</span><span style="color:#924c9d">:</span> <span style="color:#b08000">border-box</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-variant-alternates</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">styleset(</span>nice-style<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#898887">/* Selectors */</span>
body<span style="color:#ca60ca">,</span> blockquote {
<span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
}
header <span style="color:#006e28;font-weight:bold">#logo</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
div<span style="color:#006e28;font-weight:bold">#footer</span> <span style="color:#644a9b">.link</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.something</span>
{
<span style="font-weight:bold">margin-right</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#cdd</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#AAFE04</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">rgb(</span><span style="color:#b08000">10</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span><span style="color:#b08000">30</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span><span style="color:#b08000">43</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">maroon</span><span style="color:#ca60ca">;</span>
}
sidebar <span style="color:#006e28;font-weight:bold">#subscribe</span> <span style="color:#644a9b">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">type</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"text"</span><span style="color:#0095ff;font-weight:bold">]</span> {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
sidebar <span style="color:#006e28;font-weight:bold">#subscribe</span> <span style="color:#644a9b">.subscribe_form</span><span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">):hover</span> input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">class</span><span style="color:#ca60ca">*=</span><span style="color:#bf0303">"small-"</span><span style="color:#0095ff;font-weight:bold">]</span> {
<span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
}
input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">text</span><span style="color:#0095ff;font-weight:bold">]</span>
input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303"> text </span><span style="color:#0095ff;font-weight:bold">]</span>
input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303"> text </span><span style="color:#ca60ca">i</span><span style="color:#0095ff;font-weight:bold">]</span>
input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303"> "text" </span><span style="color:#ca60ca">i</span><span style="color:#0095ff;font-weight:bold">]</span>
input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">i</span><span style="color:#0095ff;font-weight:bold">]</span>
input<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">value</span><span style="color:#ca60ca">=</span><span style="color:#bf0303"> i</span><span style="color:#0095ff;font-weight:bold">]</span> {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="color:#006e28;font-weight:bold">#header</span><span style="color:#ca60ca">,</span>
a<span style="color:#b08000;font-style:italic">:hover</span><span style="color:#ca60ca">,</span>
p<span style="color:#644a9b">.intro</span><span style="color:#b08000;font-style:italic">:first-letter</span><span style="color:#ca60ca">,</span>
p<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">nl</span><span style="color:#b08000;font-style:italic">)</span><span style="color:#ca60ca">,</span>
img<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">align</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"right"</span><span style="color:#0095ff;font-weight:bold">]</span>
{
<span style="font-weight:bold">border</span><span style="color:#924c9d">:</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><span style="color:#ca60ca">;</span>
<span style="font-weight:bold;font-style:italic">-moz-border-radius</span><span style="color:#924c9d">:</span> <span style="color:#b08000">15</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* unknown properties render italic */</span>
}
<span style="color:#644a9b">.nice-look</span> {
}
ul {
<span style="font-weight:bold">list-style</span><span style="color:#924c9d">:</span> thumbs<span style="color:#ca60ca">;</span>
}
<span style="color:#898887">/* SVG &lt;a> */</span>
svg<span style="color:#ca60ca">|</span>a {}
<span style="color:#898887">/* XHTML and SVG &lt;a> */</span>
<span style="color:#ca60ca">*|</span>a {}
<span style="color:#ca60ca">*</span>{}
<span style="color:#644a9b">.class</span>{}
<span style="color:#006e28;font-weight:bold">#id</span>{}
<span style="color:#b08000;font-style:italic">:hover</span>{}
<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">fr</span><span style="color:#b08000;font-style:italic">)</span>{}
E{}
E F{}
E<span style="color:#ca60ca">></span>F{}
E <span style="color:#ca60ca">></span> F{}
E<span style="color:#ca60ca">~</span>F{}
E <span style="color:#ca60ca">~</span> F{}
E<span style="color:#b08000;font-style:italic">:first-child</span>{}
E<span style="color:#b08000;font-style:italic">:visited</span>{}
E<span style="color:#b08000;font-style:italic">::after</span>{}
E<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">c</span><span style="color:#b08000;font-style:italic">)</span>{}
E<span style="color:#b08000;font-style:italic">:lang(</span><span style="color:#bf0303">fr-ca</span><span style="color:#b08000;font-style:italic">)</span>{}
E <span style="color:#ca60ca">+</span> F{}
E<span style="color:#ca60ca">+</span>F{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">warning</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">~=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">^=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">$=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">foo</span><span style="color:#ca60ca">*=</span><span style="color:#bf0303">"warning"</span><span style="color:#0095ff;font-weight:bold">]</span>{}
E<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">lang</span><span style="color:#ca60ca">|=</span><span style="color:#bf0303">"en"</span><span style="color:#0095ff;font-weight:bold">]</span>{}
DIV<span style="color:#644a9b">.warning</span>{}
DIV <span style="color:#644a9b">.warning</span>{}
E<span style="color:#006e28;font-weight:bold">#myid</span>{}
E <span style="color:#006e28;font-weight:bold">#myid</span>{}
E<span style="color:#ca60ca">,</span>E{}
E<span style="color:#ca60ca">,</span> E{}
E <span style="color:#ca60ca">,</span>E{}
E <span style="color:#ca60ca">,</span> E{}
p<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#b08000;font-style:italic">)</span> {
<span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
}
<span style="color:#898887">/* Elements that are not &lt;div> or &lt;span> elements */</span>
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> {
<span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
}
<span style="color:#898887">/* Elements that are not `.crazy` or `.fancy` */</span>
<span style="color:#898887">/* Note that this syntax is not well supported yet. */</span>
body <span style="color:#b08000;font-style:italic">:not(</span><span style="color:#644a9b">.crazy</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b">.fancy</span><span style="color:#b08000;font-style:italic">)</span> {
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span>
}
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">odd</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">even</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">4</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">4</span><span style="color:#0057ae">n</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">3</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">4</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#ca60ca">-</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">3</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">8</span><span style="color:#b08000;font-style:italic">):nth-child(</span><span style="color:#ca60ca">-</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">15</span><span style="color:#b08000;font-style:italic">)</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span> }
<span style="color:#644a9b">.first</span> span<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span><span style="color:#ca60ca">,</span>
<span style="color:#644a9b">.second</span> span<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span><span style="color:#ca60ca">,</span>
<span style="color:#644a9b">.third</span> span<span style="color:#b08000;font-style:italic">:nth-of-type(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">+</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span> {
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span>
unknown-property<span style="color:#924c9d">:</span> <span style="color:#aa5500">lime</span><span style="color:#ca60ca">;</span>
}
<span style="color:#b08000;font-style:italic">:root</span>{
<span style="color:#0057ae">--foo</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">if(</span>x <span style="color:#ca60ca">></span> <span style="color:#b08000">5</span><span style="color:#644a9b">)</span> this.width <span style="color:#ca60ca">=</span> <span style="color:#b08000">10</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* valid custom property, invalid in any normal property */</span>
}
<span style="color:#b08000;font-style:italic">:root</span><span style="color:#ca60ca">,</span>
<span style="color:#b08000;font-style:italic">:root:lang(</span><span style="color:#bf0303">en</span><span style="color:#b08000;font-style:italic">)</span> {<span style="color:#0057ae">--external-link</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"external link"</span><span style="color:#ca60ca">;</span>}
<span style="color:#b08000;font-style:italic">:root:lang(</span><span style="color:#bf0303">de</span><span style="color:#b08000;font-style:italic">)</span> {<span style="color:#0057ae">--external-link</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"externer Link"</span><span style="color:#ca60ca">;</span>}
a<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">href</span><span style="color:#ca60ca">^=</span><span style="color:#bf0303">"http"</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:#924c9d">:</span> <span style="color:#bf0303">" ("</span> <span style="color:#644a9b">var(</span><span style="color:#0057ae">--external-link</span><span style="color:#644a9b">)</span> <span style="color:#bf0303">")"</span>}
one { <span style="color:#0057ae">--foo</span><span style="color:#924c9d">:</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> }
two { <span style="color:#0057ae">--bar</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(var(</span><span style="color:#0057ae">--foo</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> }
three { <span style="color:#0057ae">--foo</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(var(</span><span style="color:#0057ae">--bar</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> }
<span style="color:#644a9b">.foo</span> {
<span style="color:#0057ae">--gap</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">var(</span><span style="color:#0057ae">--gap</span><span style="color:#644a9b">)</span>px<span style="color:#ca60ca">;</span> <span style="color:#898887">/*20 px*/</span>
<span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(var(</span><span style="color:#0057ae">--gap</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/*20px*/</span>
}
foo {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</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:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">-</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</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:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">+</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</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:#ca60ca">;</span> <span style="color:#898887">/* invalid */</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">*</span><span style="color:#b08000">-8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">-</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">-8</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">50</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">+</span>(<span style="color:#b08000">8</span><span style="color:#0057ae">px</span>)<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</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:#ca60ca">;</span>
}
sweet-alert input<span style="color:#b08000;font-style:italic">:focus::-moz-placeholder</span> {
<span style="font-weight:bold;font-style:italic">-webkit-transition</span><span style="color:#924c9d">:</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><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">transition</span><span style="color:#924c9d">:</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><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">opacity</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0.5</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@font-feature-values</span> Font One {
<span style="color:#ff5500">@styleset</span> {
nice-style<span style="color:#924c9d">:</span> <span style="color:#b08000">12</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@font-feature-values</span> Font Two {
<span style="color:#ff5500">@styleset</span> {
nice-style<span style="color:#924c9d">:</span> <span style="color:#b08000">4</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@font-palette-values</span> --identifier {
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Bixa<span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@counter-style</span> thumbs {
<span style="font-weight:bold">system</span><span style="color:#924c9d">:</span> <span style="color:#b08000">cyclic</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">symbols</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"</span><span style="color:#3daee9">\1F44D</span><span style="color:#bf0303">"</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">suffix</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">" "</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@font-face</span> {
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Open Sans"</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">/* comments */</span>
unknown<span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">src</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"/fonts/OpenSans-Regular-webfont.woff2"</span><span style="color:#644a9b">)</span> <span style="color:#644a9b">format(</span><span style="color:#bf0303">"woff2"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">,</span>
<span style="color:#644a9b">url(</span><span style="color:#bf0303">"/fonts/OpenSans-Regular-webfont.woff"</span><span style="color:#644a9b">)</span> <span style="color:#644a9b">format(</span><span style="color:#bf0303">"woff"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@page</span> {
<span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">cm</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@page</span> <span style="color:#b08000;font-style:italic">:first</span> {
<span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">cm</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">/* comments */</span>
marks<span style="color:#924c9d">:</span> crop cross<span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@page</span> <span style="color:#b08000;font-style:italic">:</span>unknown {
<span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">cm</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@document</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"https://www.example.com/"</span><span style="color:#644a9b">)</span> {
h1 {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">green</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@charset</span> <span style="color:#bf0303">"UTF-8"</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#bf0303">'custom.css'</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#bf0303">"common.css"</span> <span style="color:#ca60ca">screen</span><span style="color:#ca60ca">;</span>
<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:#ca60ca">print</span><span style="color:#ca60ca">;</span>
<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:#ca60ca">print</span><span style="color:#ca60ca">;</span>
<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:#ca60ca">speech</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"chrome://communicator/skin/"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<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:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span>landscape<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"othersheet.css"</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">screen</span>, <span style="color:#ca60ca">print</span><span style="color:#ca60ca">;</span>
<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><span style="color:#ca60ca">;</span>
<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><span style="color:#ca60ca">;</span>
<span style="color:#898887">/* Animation (Keyframes) */</span>
<span style="color:#ff5500">@keyframes</span> important1 {
<span style="color:#b08000">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000">50%</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">150</span><span style="color:#0057ae">px</span> <span style="color:#0057ae">!important</span><span style="color:#ca60ca">;</span> } <span style="color:#898887">/* ignored */</span>
<span style="color:#b08000">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> }
}
<span style="color:#ff5500">@keyframes</span> important2 {
<span style="color:#b08000">from</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin-bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> }
<span style="color:#b08000">to</span> { <span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#b08000">150</span><span style="color:#0057ae">px</span> <span style="color:#0057ae">!important</span><span style="color:#ca60ca">;</span> <span style="color:#898887">/* ignored */</span>
<span style="font-weight:bold">margin-bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> }
}
<span style="color:#ff5500">@keyframes</span> slidein {
<span style="color:#b08000">from</span> {
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
}
<span style="color:#b08000">to</span> {
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#898887">/* Media Queries */</span>
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">print</span> {
<span style="color:#644a9b">.container</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
}
a<span style="color:#b08000;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span> }
<span style="color:#898887">/* comments */</span>
a<span style="color:#b08000;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span> }
<span style="color:#006e28;font-weight:bold">#header</span>
{
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span> landscape<span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.sidebar</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } }
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">min-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">768</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">960</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.container</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">720</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">600</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.sidebar</span> {
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">print</span> {
}
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">height</span> <span style="color:#ca60ca">></span> <span style="color:#b08000">600</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> {
body {
<span style="font-weight:bold">line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.4</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="color:#b08000">400</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca">&lt;=</span> <span style="font-weight:bold">width</span> <span style="color:#ca60ca">&lt;=</span> <span style="color:#b08000">700</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> {
body {
<span style="font-weight:bold">line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.4</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@supports</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">grid</span><span style="color:#644a9b">)</span> {
div {
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">grid</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@supports</span> <span style="color:#644a9b">font-tech(</span>color-COLRv1<span style="color:#644a9b">)</span> {
div {}
}
<span style="color:#ff5500">@supports</span> <span style="font-weight:bold">not</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">not</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">transform-origin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span><span style="color:#644a9b">))</span> {
div {}
}
<span style="color:#ff5500">@supports</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">grid</span><span style="color:#644a9b">)</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">not</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">inline-grid</span><span style="color:#644a9b">))</span> {
div {}
}
<span style="color:#898887">/*</span>
<span style="color:#898887"> * CSS Syntax Highlight Sample File (Standard)</span>
<span style="color:#898887"> *</span>
<span style="color:#898887"> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</span>
<span style="color:#898887"> * @keyframes annotations.</span>
<span style="color:#898887"> *</span>
<span style="color:#898887"> * @author Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#898887"> * @date 2016-09-16</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">/*</span>
<span style="color:#898887"> * Block comment</span>
<span style="color:#898887"> *</span>
<span style="color:#898887"> * Alert keywords:</span>
<span style="color:#898887"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#898887"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#898887"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">FIXME</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">/* Region markers */</span>
<span style="color:#0057ae;background-color:#e0e9f8">/*BEGIN Comment */</span>
<span style="color:#0057ae;background-color:#e0e9f8">/*END Comment */</span>
<span style="color:#898887">/*</span>
<span style="color:#898887"> * CSS Syntax Highlight Sample File (Complex)</span>
<span style="color:#898887"> *</span>
<span style="color:#898887"> * This file contains complex CSS syntax that can test unexpected situations.</span>
<span style="color:#898887"> *</span>
<span style="color:#898887"> * @author Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#898887"> * @date 2016-09-16</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">/* Comments with special content */</span>
<span style="color:#898887">/*</span>
<span style="color:#898887"> * .class-selector #id "string" 'comment' // comment {} [] () /* comment</span>
<span style="color:#898887"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">TODO</span><span style="color:#898887"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold">BUG</span><span style="color:#898887"> DEBUG</span>
<span style="color:#898887"> * body {</span>
<span style="color:#898887"> * margin: 0 !important;</span>
<span style="color:#898887"> * }</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">/* Comments in special positions */</span>
header<span style="color:#898887">/* comment here */</span><span style="color:#644a9b">.active</span> <span style="color:#898887">/* comment here */</span> {
<span style="color:#898887">/* comment here */</span> <span style="font-weight:bold">color</span> <span style="color:#924c9d">:</span> <span style="color:#898887">/* comment here */</span> <span style="color:#aa5500">blue</span><span style="color:#898887">/* comment here */</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Arial <span style="color:#898887">/* comment here */</span><span style="color:#ca60ca">,</span>
<span style="color:#bf0303">"Droid Sans"</span><span style="color:#ca60ca">,</span> <span style="color:#898887">/* comment here */</span>
<span style="color:#b08000">sans-serif</span><span style="color:#898887">/* comment here */</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="color:#898887">/* comment here */</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span> <span style="color:#898887">/* comment here */</span><span style="color:#644a9b">)</span> <span style="color:#898887">/* comment here */</span> {<span style="color:#898887">/* comment here */</span>}
<span style="color:#898887">/* Strings with special content */</span>
<span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"{} $variable /* comment */"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">/* Without extra breaklines and spaces */</span>
pre<span style="color:#644a9b">.primary</span><span style="color:#b08000;font-style:italic">:hover</span><span style="color:#644a9b">.large</span><span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">2</span><span style="color:#0057ae">n</span><span style="color:#ca60ca">-</span><span style="color:#b08000">1</span><span style="color:#b08000;font-style:italic">)</span>{<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span><span style="color:#b08000">17</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span><span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span><span style="color:#bf0303">"Noto Sans"</span><span style="color:#ca60ca">;</span><span style="font-weight:bold;font-style:italic">-webkit-box-shadow</span><span style="color:#924c9d">:</span><span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">3</span><span style="color:#0057ae">px</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0.3</span><span style="color:#644a9b">)</span>}
<span style="color:#898887">/* With unnecessary breaklines and spaces */</span>
blockquote <span style="color:#644a9b">.ref</span>
{
<span style="font-weight:bold">flex</span> <span style="color:#924c9d">:</span> <span style="color:#b08000">0</span> <span style="color:#b08000">1</span> <span style="color:#b08000">30</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">flex-wrap</span> <span style="color:#924c9d">:</span> <span style="color:#b08000">wrap</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span> landscape<span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.sidebar</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> } }
<span style="color:#898887">/* Special selectors: HTML5 allows user defined tags */</span>
header {
flex {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#898887">/* CSS Nesting */</span>
header {
<span style="color:#644a9b">.abc</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span> width<span style="color:#b08000;font-style:italic">:hover</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="color:#898887">/**</span>
<span style="color:#898887"> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</span>
<span style="color:#898887"> */</span>
<span style="color:#898887">// These comments are only one line long each.</span>
<span style="color:#898887">// They won't appear in the CSS output,</span>
<span style="color:#898887">// since they use the single-line comment syntax.</span>
<span style="color:#006e28;font-weight:bold">#sidebar</span> { <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">grid-width(</span><span style="color:#b08000">5</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> }
<span style="color:#006e28;font-weight:bold">#main</span> {
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$content</span><span style="color:#ca60ca">;</span>
new-content<span style="color:#924c9d">:</span> <span style="color:#0057ae">$new_content</span><span style="color:#ca60ca">;</span>
}
<span style="color:#006e28;font-weight:bold">#main</span> {
<span style="color:#0057ae">$width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">5</span><span style="color:#0057ae">em</span> <span style="color:#0057ae">!global</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$width</span><span style="color:#ca60ca">;</span>
}
<span style="color:#006e28;font-weight:bold">#main</span> {
<span style="color:#ff5500">@import</span> <span style="color:#bf0303">"example"</span><span style="color:#ca60ca">;</span>
}
<span style="color:#006e28;font-weight:bold">#main</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">black</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span>-sidebar { <span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">solid</span><span style="color:#ca60ca">;</span> }
}
<span style="color:#006e28;font-weight:bold">#main</span> p {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#00ff00</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">97</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b">.redbox</span> {
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#ff0000</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#000000</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#006e28;font-weight:bold">#main</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">black</span><span style="color:#ca60ca">;</span>
a {
<span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span><span style="color:#b08000;font-style:italic">:hover</span> { <span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span> }
}
}
<span style="color:#644a9b">.sidebar</span> {
<span style="font-weight:bold">float</span><span style="color:#924c9d">:</span> <span style="color:#b08000">left</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">pow(</span><span style="color:#b08000">4</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">3</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.banner</span> {
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$primary-color</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">scale-color(</span><span style="color:#0057ae">$primary-color</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$lightness</span>: <span style="color:#ca60ca">+</span><span style="color:#b08000">40</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.micro</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">sum(</span><span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">30</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">min(</span><span style="color:#0057ae">$widths</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
a<span style="color:#644a9b">.funky</span><span style="color:#b08000;font-style:italic">:hover</span> {
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">/</span><span style="color:#b08000">24</span><span style="color:#0057ae">px</span> <span style="color:#b08000">fantasy</span> {
<span style="font-weight:bold">weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#644a9b">.foo.bar</span> <span style="color:#644a9b">.baz.bang</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b">.bip.qux</span> {
<span style="color:#0057ae">$selector</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">&amp;</span><span style="color:#ca60ca">;</span>
}
ul<span style="color:#ca60ca">,</span> ol {
<span style="font-weight:bold">text-align</span><span style="color:#924c9d">:</span> <span style="color:#b08000">left</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span> <span style="color:#ca60ca">&amp;</span> {
<span style="font-weight:bold">padding</span><span style="color:#924c9d">:</span> {
<span style="font-weight:bold">bottom</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
}
}
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">scale-below(</span><span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">16</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$border-radius</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">box-shadow</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$box-shadow</span><span style="color:#ca60ca">;</span>
}
ul li {
<span style="color:#0057ae">$padding</span><span style="color:#924c9d">:</span> <span style="color:#b08000">16</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">padding-left</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$padding</span><span style="color:#ca60ca">;</span>
<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">dir</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">rtl</span><span style="color:#0095ff;font-weight:bold">]</span> <span style="color:#ca60ca">&amp;</span> {
<span style="font-weight:bold">padding</span><span style="color:#924c9d">:</span> {
<span style="font-weight:bold">left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">right</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$padding</span><span style="color:#ca60ca">;</span>
}
}
}
div {
<span style="font-weight:bold">background-image</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"/icons/</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">.svg"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">#{</span><span style="color:#bf0303">"string"</span><span style="color:#ca60ca">}</span><span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">/</span><span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// Plain CSS, no division</span>
<span style="color:#0057ae">$width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1000</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$width</span><span style="color:#ca60ca">/</span><span style="color:#b08000">2</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// Uses a variable, does division</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">round(</span><span style="color:#b08000">1.5</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">/</span><span style="color:#b08000">2</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// Uses a function, does division</span>
<span style="font-weight:bold">height</span><span style="color:#924c9d">:</span> (<span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">/</span><span style="color:#b08000">2</span>)<span style="color:#ca60ca">;</span> <span style="color:#898887">// Uses parentheses, does division</span>
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">5</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">8</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">/</span><span style="color:#b08000">2</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// Uses +, does division</span>
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</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:#ca60ca">/</span><span style="color:#b08000">8</span><span style="color:#0057ae">px</span>)<span style="color:#ca60ca">;</span> <span style="color:#898887">// In a list, parentheses don't count</span>
}
p {
<span style="color:#0057ae">$font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">12</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$line-height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">30</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$font-size</span><span style="color:#ca60ca">}</span><span style="color:#ca60ca">/</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$line-height</span><span style="color:#ca60ca">}</span><span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#010203</span> <span style="color:#ca60ca">+</span> <span style="color:#aa5500">#040506</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">255</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.75</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">+</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">255</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.75</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">opacify(</span><span style="color:#0057ae">$translucent-red</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.3</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">transparentize(</span><span style="color:#0057ae">$translucent-red</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.25</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
div {
<span style="font-weight:bold">filter</span><span style="color:#924c9d">:</span> progid:DXImageTransform.Microsoft.<span style="color:#644a9b">gradient(</span>enabled<span style="color:#ca60ca">=</span><span style="color:#bf0303">'false'</span><span style="color:#ca60ca">,</span> startColorstr<span style="color:#ca60ca">=</span><span style="color:#bf0303">'</span><span style="color:#ca60ca">#{</span><span style="color:#644a9b">ie-hex-str(</span><span style="color:#0057ae">$green</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">'</span><span style="color:#ca60ca">,</span> endColorstr<span style="color:#ca60ca">=</span><span style="color:#bf0303">'</span><span style="color:#ca60ca">#{</span><span style="color:#644a9b">ie-hex-str(</span><span style="color:#0057ae">$translucent-red</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">'</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">cursor</span><span style="color:#924c9d">:</span> e <span style="color:#ca60ca">+</span> -resize<span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">em</span> <span style="color:#ca60ca">+</span> (<span style="color:#b08000">2</span><span style="color:#0057ae">em</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">3</span>)<span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$n</span><span style="color:#ca60ca">}</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">hsl(</span><span style="color:#0057ae">$hue</span>: <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$saturation</span>: <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$lightness</span>: <span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#b08000;font-style:italic">:root</span> {
<span style="color:#0057ae">--font-family-sans-serif</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">#{</span><span style="color:#644a9b">inspect(</span><span style="color:#0057ae">$font-family-sans-serif</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">}</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">--font-family-monospace</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">#{</span><span style="color:#644a9b">inspect(</span><span style="color:#0057ae">$font-family-monospace</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">}</span><span style="color:#ca60ca">;</span>
}
p<span style="color:#b08000;font-style:italic">:before</span> {
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> sans- <span style="color:#ca60ca">+</span> <span style="color:#bf0303">"serif"</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Foo "</span> <span style="color:#ca60ca">+</span> Bar<span style="color:#ca60ca">;</span>
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"I ate </span><span style="color:#ca60ca">#{</span><span style="color:#b08000">5</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">10</span><span style="color:#ca60ca">}</span><span style="color:#bf0303"> pies!"</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"I ate </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$value</span><span style="color:#ca60ca">}</span><span style="color:#bf0303"> pies!"</span><span style="color:#ca60ca">;</span>
}
a {
<span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">text-decoration</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span><span style="color:#b08000;font-style:italic">:hover</span> { <span style="font-weight:bold">text-decoration</span><span style="color:#924c9d">:</span> <span style="color:#b08000">underline</span><span style="color:#ca60ca">;</span> }
body<span style="color:#644a9b">.firefox</span> <span style="color:#ca60ca">&amp;</span> { <span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">normal</span><span style="color:#ca60ca">;</span> }
}
<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> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">em</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b;font-weight:bold">%strong-alert</span><span style="color:#b08000;font-style:italic">:hover</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.alert</span><span style="color:#b08000;font-style:italic">:hover</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b;font-weight:bold">%strong-alert</span> {
<span style="font-weight:bold">font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">bold</span><span style="color:#ca60ca">;</span>
}
p<span style="color:#644a9b">.</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span> {
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$attr</span><span style="color:#ca60ca">}</span>-color<span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">;</span>
}
p {
<span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
}
background-<span style="color:#ca60ca">#{</span>prop<span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">#{</span>prop<span style="color:#ca60ca">}</span>-color<span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
<span style="color:#006e28;font-weight:bold">#a</span><span style="color:#ca60ca">#{</span><span style="color:#bf0303">""</span><span style="color:#ca60ca">}</span><span style="color:#006e28;font-weight:bold">c</span> <span style="color:#644a9b">.a</span><span style="color:#ca60ca">#{</span><span style="color:#bf0303">""</span><span style="color:#ca60ca">}</span><span style="color:#644a9b">c</span> a<span style="color:#ca60ca">#{</span><span style="color:#bf0303">""</span><span style="color:#ca60ca">}</span>c {
}
}
<span style="color:#644a9b">.icon-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">absolute</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$top-or-bottom</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
-<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$prefix</span><span style="color:#ca60ca">}</span>-<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$value</span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b">.icon-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">absolute</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$top-or-bottom</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
-<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$prefix</span><span style="color:#ca60ca">}</span>-<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span>-image<span style="color:#924c9d">:</span> <span style="color:#0057ae">$value</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">firefox-message(</span><span style="color:#0057ae">$selector</span><span style="color:#644a9b">)</span> {
body<span style="color:#644a9b">.firefox</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$selector</span><span style="color:#ca60ca">}</span><span style="color:#b08000;font-style:italic">:before</span> {
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Hi, Firefox users!"</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">clearfix</span> {
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">inline-block</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span><span style="color:#b08000;font-style:italic">:after</span> {
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"."</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">block</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ca60ca">*</span> html <span style="color:#ca60ca">&amp;</span> { <span style="font-weight:bold">height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> }
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">apply-to-ie6-only</span> {
<span style="color:#ca60ca">*</span> html {
<span style="color:#ff5500">@content</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">highlighted-background</span> { <span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#fc0</span><span style="color:#ca60ca">;</span> }
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">sexy-border(</span><span style="color:#0057ae">$color</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$width</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$color</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$width</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">style</span><span style="color:#924c9d">:</span> <span style="color:#b08000">dashed</span><span style="color:#ca60ca">;</span>
}
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#ff0000</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">border-radius(</span><span style="color:#0057ae">$radius</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold;font-style:italic">-webkit-border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$radius</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold;font-style:italic">-moz-border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$radius</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold;font-style:italic">-ms-border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$radius</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$radius</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">define-emoji(</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$glyph</span><span style="color:#644a9b">)</span> {
span<span style="color:#644a9b">.emoji-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> IconFont<span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">styles</span> {
code {
<span style="font-weight:bold">border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$-border-radius</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">box-shadow</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">-box-shadow()</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">rtl(</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$ltr-value</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$rtl-value</span><span style="color:#644a9b">)</span> {
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$ltr-value</span><span style="color:#ca60ca">;</span>
<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">dir</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">rtl</span><span style="color:#0095ff;font-weight:bold">]</span> <span style="color:#ca60ca">&amp;</span> {
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$rtl-value</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">replace-text(</span><span style="color:#0057ae">$image</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$x</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$y</span><span style="color:#924c9d">:</span> <span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold">text-indent</span><span style="color:#924c9d">:</span> <span style="color:#ca60ca">-</span><span style="color:#b08000">99999</span><span style="color:#0057ae">em</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">overflow</span><span style="color:#924c9d">:</span> <span style="color:#b08000">hidden</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">text-align</span><span style="color:#924c9d">:</span> <span style="color:#b08000">left</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> {
<span style="font-weight:bold">image</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$image</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">repeat</span><span style="color:#924c9d">:</span> <span style="color:#b08000">no-repeat</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$x</span> <span style="color:#0057ae">$y</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">btn(</span><span style="color:#0057ae">$args</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@warn</span> <span style="color:#bf0303">"The btn() mixin is deprecated. Include button() instead."</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"http://fonts.googleapis.com/css?family=</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$family</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">button(</span><span style="color:#0057ae">$args</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">hover</span> {
<span style="color:#ca60ca">&amp;</span><span style="color:#b08000;font-style:italic">:not(</span><span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">disabled</span><span style="color:#0095ff;font-weight:bold">]</span><span style="color:#b08000;font-style:italic">):hover</span> {
<span style="color:#ff5500">@content</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">adjust-location(</span><span style="color:#0057ae">$x</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$y</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@if</span> <span style="color:#644a9b">unitless(</span><span style="color:#0057ae">$x</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@error</span> <span style="color:#bf0303">"$x may not be unitless, was </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$x</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">."</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@warn</span> <span style="color:#bf0303">"Assuming </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$x</span><span style="color:#ca60ca">}</span><span style="color:#bf0303"> to be in pixels"</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$x</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$x</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@if</span> <span style="color:#644a9b">unitless(</span><span style="color:#0057ae">$y</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@error</span> <span style="color:#bf0303">"$y may not be unitless, was </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$y</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">."</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@warn</span> <span style="color:#bf0303">"Assuming </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$y</span><span style="color:#ca60ca">}</span><span style="color:#bf0303"> to be in pixels"</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$y</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$y</span><span style="color:#ca60ca">;</span>
}
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">relative</span><span style="color:#ca60ca">;</span> <span style="font-weight:bold">left</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$x</span><span style="color:#ca60ca">;</span> <span style="font-weight:bold">top</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$y</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">avatar(</span><span style="color:#0057ae">$size</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$circle</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">false</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$size</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">height</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$size</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$circle</span> <span style="color:#ca60ca">!=</span> <span style="color:#b08000">0</span> {
<span style="font-weight:bold">border-radius</span><span style="color:#924c9d">:</span> math.<span style="color:#644a9b">div(</span><span style="color:#0057ae">$size</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">2</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">theme-colors(</span><span style="color:#0057ae">$light-theme</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">true</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$light-theme</span> {
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$light-background</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$light-text</span><span style="color:#ca60ca">;</span>
} <span style="color:#ff5500">@else</span> {
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$dark-background</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$dark-text</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">configure(</span><span style="color:#0057ae">$black</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">null</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$border-radius</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">null</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$box-shadow</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">null</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$black</span> {
<span style="color:#0057ae">$-black</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$black</span> <span style="color:#0057ae">!global</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$border-radius</span> {
<span style="color:#0057ae">$-border-radius</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$border-radius</span> <span style="color:#0057ae">!global</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">does-parent-exist</span> {
<span style="color:#ff5500">@if</span> <span style="color:#644a9b;font-weight:bold">&amp;</span> {
<span style="color:#ca60ca">&amp;</span><span style="color:#b08000;font-style:italic">:hover</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
}
} <span style="color:#ff5500">@else</span> {
a {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">order(</span><span style="color:#0057ae">$height</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$selectors</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@for</span> <span style="color:#0057ae">$i</span> <span style="font-weight:bold">from</span> <span style="color:#b08000">0</span> <span style="font-weight:bold">to</span> <span style="color:#644a9b">length(</span><span style="color:#0057ae">$selectors</span><span style="color:#644a9b">)</span> {
<span style="color:#ca60ca">#{</span><span style="color:#644a9b">nth(</span><span style="color:#0057ae">$selectors</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$i</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">1</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">absolute</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">height</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$height</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin-top</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$i</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$height</span><span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">syntax-colors(</span><span style="color:#0057ae">$args</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@debug</span> meta.<span style="color:#644a9b">keywords(</span><span style="color:#0057ae">$args</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">// (string: #080, comment: #800, variable: #60b)</span>
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$name</span>, <span style="color:#0057ae">$color</span> <span style="font-weight:bold">in</span> meta.<span style="color:#644a9b">keywords(</span><span style="color:#0057ae">$args</span><span style="color:#644a9b">)</span> {
pre span<span style="color:#644a9b">.stx-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$color</span><span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">media(</span><span style="color:#0057ae">$types</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$type</span> <span style="font-weight:bold">in</span> <span style="color:#0057ae">$types</span> {
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$type</span><span style="color:#ca60ca">}</span> {
<span style="color:#ff5500">@content</span>(<span style="color:#0057ae">$type</span>)<span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">reflexive-position(</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$value</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$property</span> <span style="color:#ca60ca">!=</span> left <span style="color:#ca60ca">and</span> <span style="color:#0057ae">$property</span> <span style="color:#ca60ca">!=</span> right {
<span style="color:#ff5500">@error</span> <span style="color:#bf0303">"Property </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#bf0303"> must be either left or right."</span><span style="color:#ca60ca">;</span>
}
<span style="color:#0057ae">$left-value</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">if(</span><span style="color:#0057ae">$property</span> <span style="color:#ca60ca">==</span> <span style="color:#b08000">right</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b;font-weight:bold">initial</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$value</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$right-value</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">if(</span><span style="color:#0057ae">$property</span> <span style="color:#ca60ca">==</span> <span style="color:#b08000">right</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$value</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b;font-weight:bold">initial</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">left</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$left-value</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">right</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$right-value</span><span style="color:#ca60ca">;</span>
<span style="color:#0095ff;font-weight:bold">[</span><span style="color:#ff5500">dir</span><span style="color:#ca60ca">=</span><span style="color:#bf0303">rtl</span><span style="color:#0095ff;font-weight:bold">]</span> <span style="color:#ca60ca">&amp;</span> {
<span style="font-weight:bold">left</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$right-value</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">right</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$left-value</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">prefix(</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$value</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$prefixes</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$prefix</span> <span style="font-weight:bold">in</span> <span style="color:#0057ae">$prefixes</span> {
<span style="color:#ff5500">@if</span> <span style="color:#ca60ca">not</span> <span style="color:#644a9b">index(</span><span style="color:#0057ae">$known-prefixes</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$prefix</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@warn</span> <span style="color:#bf0303">"Unknown prefix </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$prefix</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">."</span><span style="color:#ca60ca">;</span>
}
-<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$prefix</span><span style="color:#ca60ca">}</span>-<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$value</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$value</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">inset-divider-offset(</span><span style="color:#0057ae">$offset</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$padding</span><span style="color:#644a9b">)</span> {
<span style="color:#0057ae">$divider-offset</span><span style="color:#924c9d">:</span> (<span style="color:#b08000">2</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$padding</span>) <span style="color:#ca60ca">+</span> <span style="color:#0057ae">$offset</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@debug</span> <span style="color:#bf0303">"divider offset: </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$divider-offset</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">"</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$divider-offset</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">calc(</span><span style="color:#b08000">100</span><span style="color:#0057ae">%</span> <span style="color:#ca60ca">-</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$divider-offset</span><span style="color:#ca60ca">}</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">sticky-position</span> {
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">fixed</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@supports</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">sticky</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold">position</span><span style="color:#924c9d">:</span> <span style="color:#b08000">sticky</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@at-root</span> <span style="color:#644a9b">(</span>without<span style="color:#924c9d">:</span> media<span style="color:#644a9b">)</span><span style="color:#ff5500"> {</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#111</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@at-root</span> <span style="color:#644a9b">(</span>with<span style="color:#924c9d">:</span> rule<span style="color:#644a9b">)</span><span style="color:#ff5500"> {</span>
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.2</span><span style="color:#0057ae">em</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@mixin</span> <span style="color:#644a9b">unify-parent(</span><span style="color:#0057ae">$child</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@at-root</span> #{selector<span style="color:#644a9b">.unify</span><span style="color:#b08000;font-style:italic">(</span><span style="color:#ca60ca">&amp;</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303;text-decoration:underline">$</span>child<span style="color:#b08000;font-style:italic">)</span>} {
<span style="color:#ff5500">@content</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@at-root</span> #{selector-unify<span style="color:#b08000;font-style:italic">(</span><span style="color:#ca60ca">&amp;</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303;text-decoration:underline">$</span>child<span style="color:#b08000;font-style:italic">)</span>} {
<span style="color:#ff5500">@content</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">print</span> {
<span style="color:#644a9b">.page</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">8</span><span style="color:#0057ae">in</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@at-root</span> <span style="color:#644a9b">(</span>without<span style="color:#924c9d">:</span> media<span style="color:#644a9b">)</span><span style="color:#ff5500"> {</span>
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#644a9b">.sidebar</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span> landscape<span style="color:#644a9b">)</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">screen</span> {
<span style="color:#644a9b">.sidebar</span> {
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">orientation</span><span style="color:#924c9d">:</span> landscape<span style="color:#644a9b">)</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">min-width</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$layout-breakpoint-small</span><span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.hide-extra-small</span> {
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">hover</span><span style="color:#924c9d">:</span> <span style="font-weight:bold">hover</span><span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.button</span><span style="color:#b08000;font-style:italic">:hover</span> {
<span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span> <span style="color:#b08000">solid</span> <span style="color:#aa5500">black</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">color</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold">border-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#036</span><span style="color:#ca60ca">;</span>
}
}
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$media</span><span style="color:#ca60ca">}</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="color:#0057ae">$feature</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$value</span><span style="color:#644a9b">)</span> {
<span style="color:#644a9b">.sidebar</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">500</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@extend</span> <span style="color:#644a9b">.error</span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b">.hoverlink</span> {
<span style="color:#ff5500">@extend</span> a<span style="color:#b08000;font-style:italic">:hover</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@extend</span> <span style="color:#644a9b;font-weight:bold">%extreme</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@extend</span> <span style="color:#644a9b">.message</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@extend</span> <span style="color:#644a9b">.notice</span> <span style="color:#0057ae">!optional</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">border-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">3</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.error</span> {
<span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#aa5500">#f00</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#fdd</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span>--serious {
<span style="color:#ff5500">@extend</span> <span style="color:#644a9b">.error</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">border-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">3</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
p {
<span style="color:#ff5500">@if</span> <span style="color:#b08000">1</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">1</span> <span style="color:#ca60ca">==</span> <span style="color:#b08000">2</span> { <span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#0057ae">px</span> <span style="color:#b08000">solid</span><span style="color:#ca60ca">;</span> }
<span style="color:#ff5500">@if</span> <span style="color:#b08000">5</span> <span style="color:#ca60ca">&lt;</span> <span style="color:#b08000">3</span> { <span style="font-weight:bold">border</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span> <span style="color:#b08000">dotted</span><span style="color:#ca60ca">;</span> }
<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:#924c9d">:</span> <span style="color:#b08000">3</span><span style="color:#0057ae">px</span> <span style="color:#b08000">double</span><span style="color:#ca60ca">;</span> }
}
p {
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$type</span> <span style="color:#ca60ca">==</span> ocean {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">;</span>
} <span style="color:#ff5500">@else</span> <span style="color:#ff5500">if</span> <span style="color:#0057ae">$type</span> <span style="color:#ca60ca">==</span> matador {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">red</span><span style="color:#ca60ca">;</span>
} <span style="color:#ff5500">@else</span> <span style="color:#ff5500">if</span> <span style="color:#0057ae">$type</span> <span style="color:#ca60ca">==</span> monster {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">green</span><span style="color:#ca60ca">;</span>
} <span style="color:#ff5500">@else</span> {
<span style="font-weight:bold">color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">black</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$animal</span> <span style="font-weight:bold">in</span> puma, sea-slug, egret, salamander {
<span style="color:#644a9b">.</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$animal</span><span style="color:#ca60ca">}</span><span style="color:#644a9b">-icon</span> {
<span style="font-weight:bold">background-image</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">'/images/</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$animal</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">.png'</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$name</span>, <span style="color:#0057ae">$glyph</span> <span style="font-weight:bold">in</span> <span style="color:#0057ae">$icons</span> {
<span style="color:#644a9b">.icon-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$name</span><span style="color:#ca60ca">}</span><span style="color:#b08000;font-style:italic">:before</span> {
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">inline-block</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"Icon Font"</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">content</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$glyph</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$size</span> <span style="font-weight:bold">in</span> <span style="color:#0057ae">$sizes</span> {
<span style="color:#644a9b">.icon-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$size</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$size</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">height</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$size</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$size</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$animal</span>, <span style="color:#0057ae">$color</span>, <span style="color:#0057ae">$cursor</span> <span style="font-weight:bold">in</span> (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
<span style="color:#644a9b">.</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$animal</span><span style="color:#ca60ca">}</span><span style="color:#644a9b">-icon</span> {
<span style="font-weight:bold">background-image</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">'/images/</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$animal</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">.png'</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">border</span><span style="color:#924c9d">:</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><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">cursor</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$cursor</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$header</span>, <span style="color:#0057ae">$size</span> <span style="font-weight:bold">in</span> (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>) {
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$header</span><span style="color:#ca60ca">}</span> {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$size</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@for</span> <span style="color:#0057ae">$i</span> <span style="font-weight:bold">from</span> <span style="color:#b08000">1</span> <span style="font-weight:bold">through</span> <span style="color:#b08000">3</span> {
<span style="color:#644a9b">.item-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$i</span><span style="color:#ca60ca">}</span> { <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">em</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$i</span><span style="color:#ca60ca">;</span> }
}
<span style="color:#ff5500">@for</span> <span style="color:#0057ae">$i</span> <span style="font-weight:bold">from</span> <span style="color:#b08000">1</span> <span style="font-weight:bold">to</span> <span style="color:#b08000">3</span> {
ul<span style="color:#b08000;font-style:italic">:nth-child(</span><span style="color:#b08000">3</span><span style="color:#0057ae">n</span> <span style="color:#ca60ca">+</span> <span style="color:#ca60ca">#{</span><span style="color:#0057ae">$i</span><span style="color:#ca60ca">}</span><span style="color:#b08000;font-style:italic">)</span> {
<span style="font-weight:bold">background-color</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">lighten(</span><span style="color:#0057ae">$base-color</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$i</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">5</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@while</span> <span style="color:#0057ae">$i</span> <span style="color:#ca60ca">></span> <span style="color:#b08000">0</span> {
<span style="color:#644a9b">.item-</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$i</span><span style="color:#ca60ca">}</span> { <span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">em</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$i</span><span style="color:#ca60ca">;</span> }
<span style="color:#0057ae">$i</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$i</span> <span style="color:#ca60ca">-</span> <span style="color:#b08000">2</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">order(</span><span style="color:#b08000">150</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$form-selectors</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">order(</span><span style="color:#b08000">150</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"input.name"</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"input.address"</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"input.zip"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">unify-parent(</span><span style="color:#bf0303">"input"</span><span style="color:#644a9b">)</span> { }
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">google-font(</span><span style="color:#bf0303">"Droid Sans"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">library.styles</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">library.configure(</span>
<span style="color:#0057ae">$black</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#222</span><span style="color:#ca60ca">,</span>
<span style="color:#0057ae">$border-radius</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0.1</span><span style="color:#0057ae">rem</span>
<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">firefox-message(</span><span style="color:#bf0303">".header"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">apply-to-ie6-only</span> {
<span style="color:#006e28;font-weight:bold">#logo</span> {
<span style="font-weight:bold">background-image</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">/logo.gif</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">media(</span><span style="color:#b08000">screen</span><span style="color:#ca60ca">,</span> print<span style="color:#644a9b">)</span> <span style="font-weight:bold">using</span> <span style="color:#644a9b">(</span><span style="color:#0057ae">$type</span><span style="color:#644a9b">)</span> {
h1 {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">40</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@if</span> <span style="color:#0057ae">$type</span> <span style="color:#ca60ca">==</span> print {
<span style="font-weight:bold">font-family</span><span style="color:#924c9d">:</span> Calluna<span style="color:#ca60ca">;</span>
}
}
}
p { <span style="color:#ff5500">@include</span> <span style="color:#644a9b">sexy-border(</span><span style="color:#aa5500">blue</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">1</span><span style="color:#0057ae">in</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> }
h1 { <span style="color:#ff5500">@include</span> <span style="color:#644a9b">sexy-border(</span><span style="color:#0057ae">$color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">in</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> }
nav ul {
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">corners.rounded</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">padding</span><span style="color:#924c9d">:</span> <span style="color:#b08000">5</span><span style="color:#0057ae">px</span> <span style="color:#ca60ca">+</span> corners.<span style="color:#0057ae">$radius</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">horizontal-list</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">rtl(</span>float<span style="color:#ca60ca">,</span> <span style="color:#b08000">left</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">right</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">hover</span> {
<span style="font-weight:bold">border-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">2</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">replace-text(url(</span><span style="color:#bf0303">"/images/mail.svg"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">square(</span><span style="color:#b08000">100</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$radius</span><span style="color:#924c9d">:</span> <span style="color:#b08000">4</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">// Oops, we typo'd "webkit" as "wekbit"!</span>
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">prefix(</span>transform<span style="color:#ca60ca">,</span> <span style="color:#644a9b">rotate(</span><span style="color:#b08000">15</span><span style="color:#0057ae">deg</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">,</span> wekbit ms<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.primary</span> {
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">colors(</span><span style="color:#0057ae">$value-map</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.box</span> { <span style="color:#ff5500">@include</span> <span style="color:#644a9b">border-radius(</span><span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> }
<span style="color:#644a9b">.wrapper</span> <span style="color:#644a9b">.field</span> {
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">unify-parent(</span><span style="color:#bf0303">"input"</span><span style="color:#644a9b">)</span> {
<span style="color:#898887">/* ... */</span>
}
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">unify-parent(</span><span style="color:#bf0303">"select"</span><span style="color:#644a9b">)</span> {
<span style="color:#898887">/* ... */</span>
}
}
<span style="color:#644a9b">.banner</span> {
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">theme-colors(</span><span style="color:#0057ae">$light-theme</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">true</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
body<span style="color:#644a9b">.dark</span> <span style="color:#ca60ca">&amp;</span> {
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">theme-colors(</span><span style="color:#0057ae">$light-theme</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">false</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">grid-width(</span><span style="color:#0057ae">$n</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$n</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$grid-width</span> <span style="color:#ca60ca">+</span> (<span style="color:#0057ae">$n</span> <span style="color:#ca60ca">-</span> <span style="color:#b08000">1</span>) <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$gutter-width</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">scale-below(</span><span style="color:#0057ae">$value</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$base</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$ratio</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.618</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@while</span> <span style="color:#0057ae">$value</span> <span style="color:#ca60ca">></span> <span style="color:#0057ae">$base</span> {
<span style="color:#0057ae">$value</span><span style="color:#924c9d">:</span> math.<span style="color:#644a9b">div(</span><span style="color:#0057ae">$value</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$ratio</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$value</span><span style="color:#ca60ca">;</span>
}
<span style="color:#898887">/// If the user has configured `$-box-shadow`, returns their configured value.</span>
<span style="color:#898887">/// Otherwise returns a value derived from `$-black`.</span>
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">-box-shadow()</span> {
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$-box-shadow</span> <span style="color:#ca60ca">or</span> (<span style="color:#b08000">0</span> <span style="color:#b08000">0.5</span><span style="color:#0057ae">rem</span> <span style="color:#b08000">1</span><span style="color:#0057ae">rem</span> <span style="color:#644a9b">rgba(</span><span style="color:#0057ae">$-black</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.15</span><span style="color:#644a9b">)</span>)<span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">pow(</span><span style="color:#0057ae">$base</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$exponent</span><span style="color:#644a9b">)</span> {
<span style="color:#0057ae">$result</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@for</span> <span style="color:#0057ae">$_</span> <span style="font-weight:bold">from</span> <span style="color:#b08000">1</span> <span style="font-weight:bold">through</span> <span style="color:#0057ae">$exponent</span> {
<span style="color:#0057ae">$result</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$result</span> <span style="color:#ca60ca">*</span> <span style="color:#0057ae">$base</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$result</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">invert(</span><span style="color:#0057ae">$color</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$amount</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span> {
<span style="color:#0057ae">$inverse</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">change-color(</span><span style="color:#0057ae">$color</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$hue</span>: <span style="color:#644a9b">hue(</span><span style="color:#0057ae">$color</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">180</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@return</span> <span style="color:#644a9b">mix(</span><span style="color:#0057ae">$inverse</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$color</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$amount</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">sum(</span><span style="color:#0057ae">$numbers</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span> {
<span style="color:#0057ae">$sum</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@each</span> <span style="color:#0057ae">$number</span> <span style="font-weight:bold">in</span> <span style="color:#0057ae">$numbers</span> {
<span style="color:#0057ae">$sum</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$sum</span> <span style="color:#ca60ca">+</span> <span style="color:#0057ae">$number</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$sum</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">fg(</span><span style="color:#0057ae">$args</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span> {
<span style="color:#ff5500">@warn</span> <span style="color:#bf0303">"The fg() function is deprecated. Call foreground() instead."</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@return</span> <span style="color:#644a9b">foreground(</span><span style="color:#0057ae">$args</span><span style="color:#ca60ca">...</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ff5500">@function</span> <span style="color:#644a9b">str-insert(</span><span style="color:#0057ae">$string</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$insert</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$index</span><span style="color:#644a9b">)</span> {
<span style="color:#898887">// Avoid making new strings if we don't need to.</span>
<span style="color:#ff5500">@if</span> string.<span style="color:#644a9b">length(</span><span style="color:#0057ae">$string</span><span style="color:#644a9b">)</span> <span style="color:#ca60ca">==</span> <span style="color:#b08000">0</span> {
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$insert</span><span style="color:#ca60ca">;</span>
}
<span style="color:#0057ae">$before</span><span style="color:#924c9d">:</span> string.<span style="color:#644a9b">slice(</span><span style="color:#0057ae">$string</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$index</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$after</span><span style="color:#924c9d">:</span> string.<span style="color:#644a9b">slice(</span><span style="color:#0057ae">$string</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$index</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@return</span> <span style="color:#0057ae">$before</span> <span style="color:#ca60ca">+</span> <span style="color:#0057ae">$insert</span> <span style="color:#ca60ca">+</span> <span style="color:#0057ae">$after</span><span style="color:#ca60ca">;</span>
}
<span style="color:#898887">// Variable define</span>
<span style="color:#0057ae">$image-path</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"../../static/images"</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$-text-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#333</span> <span style="color:#0057ae">!default</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// Default can be overrided</span>
<span style="color:#0057ae">$default-font-size</span><span style="color:#924c9d">:</span> <span style="color:#b08000">16</span><span style="color:#0057ae">px</span> <span style="color:#0057ae">!default</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$default-font-family</span><span style="color:#924c9d">:</span> Roboto<span style="color:#ca60ca">,</span> <span style="color:#bf0303">"Droid Sans"</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">sans-serif</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$default-font-weight</span><span style="color:#924c9d">:</span> <span style="color:#b08000">400</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$default-line-height</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$default-font-size</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">1.8</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$shadow-transparence</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0.25</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$box-shadow</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span> <span style="color:#b08000">0</span> <span style="color:#b08000">3</span><span style="color:#0057ae">px</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#b08000">0</span><span style="color:#ca60ca">,</span><span style="color:#0057ae">$shadow-transparence</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$page-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">rem</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// kabab-case</span>
<span style="color:#0057ae">$gapOfArticle</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// camelCase</span>
<span style="color:#0057ae">$body_background_color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">white</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// snake_case</span>
<span style="color:#0057ae">$-box-shadow</span><span style="color:#924c9d">:</span> <span style="color:#644a9b;font-weight:bold">null</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$sizes</span><span style="color:#924c9d">:</span> <span style="color:#b08000">40</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">50</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">80</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$icons</span><span style="color:#924c9d">:</span> (<span style="color:#bf0303">"eye"</span>: <span style="color:#bf0303">"</span><span style="color:#3daee9">\f112</span><span style="color:#bf0303">"</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"start"</span>: <span style="color:#bf0303">"</span><span style="color:#3daee9">\f12e</span><span style="color:#bf0303">"</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"stop"</span>: <span style="color:#bf0303">"</span><span style="color:#3daee9">\f12f</span><span style="color:#bf0303">"</span>)<span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$value-map</span><span style="color:#924c9d">:</span> (<span style="color:#b08000">text</span>: <span style="color:#aa5500">#00ff00</span><span style="color:#ca60ca">,</span> background: <span style="color:#aa5500">#0000ff</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">border</span>: <span style="color:#aa5500">#ff0000</span>)<span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$map</span><span style="color:#924c9d">:</span> (key1: value1<span style="color:#ca60ca">,</span> key2: value2<span style="color:#ca60ca">,</span> key3: value3)<span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$icons</span><span style="color:#924c9d">:</span>
<span style="color:#bf0303">"eye"</span> <span style="color:#bf0303">"</span><span style="color:#3daee9">\f112</span><span style="color:#bf0303">"</span> <span style="color:#b08000">12</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span>
<span style="color:#bf0303">"start"</span> <span style="color:#bf0303">"</span><span style="color:#3daee9">\f12e</span><span style="color:#bf0303">"</span> <span style="color:#b08000">16</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">,</span>
<span style="color:#bf0303">"stop"</span> <span style="color:#bf0303">"</span><span style="color:#3daee9">\f12f</span><span style="color:#bf0303">"</span> <span style="color:#b08000">10</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$known-prefixes</span><span style="color:#924c9d">:</span> webkit<span style="color:#ca60ca">,</span> moz<span style="color:#ca60ca">,</span> ms<span style="color:#ca60ca">,</span> o<span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$primary-color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#036</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$form-selectors</span><span style="color:#924c9d">:</span> <span style="color:#bf0303">"input.name"</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"input.address"</span><span style="color:#ca60ca">,</span> <span style="color:#bf0303">"input.zip"</span> <span style="color:#0057ae">!default</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$color1</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">hsl(</span><span style="color:#b08000">120</span><span style="color:#0057ae">deg</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">50</span><span style="color:#0057ae">%</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$color2</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">rgb(</span><span style="color:#0057ae">$red</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$green</span><span style="color:#ca60ca">,</span> <span style="color:#644a9b">blue(</span><span style="color:#0057ae">$color1</span><span style="color:#644a9b">))</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$color3</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">mix(</span><span style="color:#0057ae">$color1</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$color2</span><span style="color:#ca60ca">,</span> [<span style="color:#0057ae">$weight</span>]<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$translucent-red</span><span style="color:#924c9d">:</span> <span style="color:#644a9b">rgba(</span><span style="color:#b08000">255</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0</span><span style="color:#ca60ca">,</span> <span style="color:#b08000">0.5</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$name</span><span style="color:#924c9d">:</span> foo<span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$attr</span><span style="color:#924c9d">:</span> <span style="color:#b08000">border</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$media</span><span style="color:#924c9d">:</span> <span style="color:#b08000">screen</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$feature</span><span style="color:#924c9d">:</span> -webkit-min-device-pixel-ratio<span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$value</span><span style="color:#924c9d">:</span> <span style="color:#b08000">1.5</span><span style="color:#ca60ca">;</span>
<span style="color:#0057ae">$values</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#ff0000</span><span style="color:#ca60ca">,</span> <span style="color:#aa5500">#00ff00</span><span style="color:#ca60ca">,</span> <span style="color:#aa5500">#0000ff</span><span style="color:#ca60ca">;</span>
library.<span style="color:#0057ae">$color</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">blue</span><span style="color:#ca60ca">;</span>
<span style="color:#898887">// Nesting</span>
<span style="color:#006e28;font-weight:bold">#home-page</span> {
header {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">80</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">margin</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0</span> <span style="color:#644a9b;font-weight:bold">auto</span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b">.cover</span> {
<span style="color:#ff5500">@include</span> <span style="color:#644a9b">border-radius(</span><span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="color:#ca60ca">&amp;</span><span style="color:#b08000;font-style:italic">:hover</span> {
<span style="font-weight:bold">background</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#ffffff</span><span style="color:#ca60ca">;</span>
}
<span style="color:#644a9b">.like-button</span> {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$default-font-size</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">0.8</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@media</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">max-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> <span style="font-weight:bold">and</span> <span style="color:#644a9b">(</span><span style="font-weight:bold">min-width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">200</span><span style="color:#0057ae">px</span><span style="color:#644a9b">)</span> {
<span style="font-weight:bold">font-size</span><span style="color:#924c9d">:</span> <span style="color:#0057ae">$default-font-size</span> <span style="color:#ca60ca">*</span> <span style="color:#b08000">0.8</span><span style="color:#ca60ca">;</span>
<span style="color:#644a9b">.icon</span> {
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">height</span><span style="color:#924c9d">:</span> <span style="color:#b08000">20</span><span style="color:#0057ae">px</span><span style="color:#ca60ca">;</span>
}
}
<span style="color:#ff5500">@media</span> <span style="color:#ca60ca">print</span> {
<span style="font-weight:bold">display</span><span style="color:#924c9d">:</span> <span style="color:#b08000">none</span><span style="color:#ca60ca">;</span>
}
}
}
}
}
<span style="color:#ff5500">@use</span> <span style="color:#bf0303">"sass:selector"</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@use</span> <span style="color:#bf0303">'library'</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@use</span> <span style="color:#bf0303">"src/corners"</span> <span style="font-weight:bold">as</span> <span style="color:#ca60ca">*</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@use</span> <span style="color:#bf0303">"src/corners"</span> <span style="font-weight:bold">as</span> c<span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@use</span> <span style="color:#bf0303">'opinionated'</span> <span style="font-weight:bold">with</span> <span style="color:#644a9b">(</span><span style="color:#0057ae">$black</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#333</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@use</span> <span style="color:#bf0303">'library'</span> <span style="font-weight:bold">with</span> <span style="color:#644a9b">(</span>
<span style="color:#0057ae">$black</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#222</span><span style="color:#ca60ca">,</span>
<span style="color:#0057ae">$border-radius</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0.1</span><span style="color:#0057ae">rem</span>
<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@forward</span> <span style="color:#bf0303">"src/list"</span> <span style="font-weight:bold">hide</span> list-reset<span style="color:#ca60ca">,</span> <span style="color:#0057ae">$horizontal-list-gap</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@forward</span> <span style="color:#bf0303">"src/list"</span> <span style="font-weight:bold">as</span> list-<span style="color:#ca60ca">*</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@forward</span> <span style="color:#bf0303">'library'</span> <span style="font-weight:bold">with</span> <span style="color:#644a9b">(</span>
<span style="color:#0057ae">$black</span><span style="color:#924c9d">:</span> <span style="color:#aa5500">#222</span> <span style="color:#0057ae">!default</span><span style="color:#ca60ca">,</span>
<span style="color:#0057ae">$border-radius</span><span style="color:#924c9d">:</span> <span style="color:#b08000">0.1</span><span style="color:#0057ae">rem</span> <span style="color:#0057ae">!default</span>
<span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#644a9b">url(</span><span style="color:#bf0303">"http://fonts.googleapis.com/css?family=</span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$family</span><span style="color:#ca60ca">}</span><span style="color:#bf0303">"</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#bf0303">'foundation/code'</span>, <span style="color:#bf0303">'foundation/lists'</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@import</span> <span style="color:#bf0303">"http://fonts.googleapis.com/css?family=Droid+Sans"</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@error</span> <span style="color:#bf0303">"Property </span><span style="color:#ca60ca">#{</span><span style="color:#0057ae">$property</span><span style="color:#ca60ca">}</span><span style="color:#bf0303"> must be either left or right."</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@error</span> <span style="color:#644a9b">var(</span><span style="color:#0057ae">--abcd</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@debug</span> <span style="color:#b08000">10</span><span style="color:#0057ae">em</span> <span style="color:#ca60ca">+</span> <span style="color:#b08000">12</span><span style="color:#0057ae">em</span><span style="color:#ca60ca">;</span>
<span style="color:#ff5500">@debug</span> library.<span style="color:#0057ae">$color</span><span style="color:#ca60ca">;</span> <span style="color:#898887">//=> blue</span>
<span style="color:#ff5500">@debug</span> <span style="color:#644a9b">radial-gradient(</span><span style="color:#0057ae">$primary</span><span style="color:#ca60ca">,</span> <span style="color:#0057ae">$accent</span><span style="color:#644a9b">)</span><span style="color:#ca60ca">;</span> <span style="color:#898887">// radial-gradient(#f2ece4, #e1d7d2)</span>
<span style="color:#ff5500">@debug</span> -webkit-flex<span style="color:#ca60ca">;</span> <span style="color:#898887">// -webkit-flex</span>
<span style="color:#ff5500">@keyframes</span> slide-in {
<span style="color:#b08000">from</span> {
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">100</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">300</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
}
<span style="color:#ca60ca">#{</span><span style="color:#0057ae">$x</span><span style="color:#ca60ca">}</span><span style="color:#b08000">%</span> {
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">90</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">150</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
}
<span style="color:#b08000">70%</span> {
<span style="font-weight:bold">margin-left</span><span style="color:#924c9d">:</span> <span style="color:#b08000">90</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
<span style="font-weight:bold">width</span><span style="color:#924c9d">:</span> <span style="color:#b08000">150</span><span style="color:#0057ae">%</span><span style="color:#ca60ca">;</span>
}
}
</pre></body></html>
Reference in New Issue View Git Blame Copy Permalink