File indexing completed on 2024-05-19 15:23:14
0001 <!DOCTYPE html> 0002 <html><head> 0003 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 0004 <title>highlight.scss</title> 0005 <meta name="generator" content="KF5::SyntaxHighlighting - Definition (SCSS) - Theme (Breeze Light)"/> 0006 </head><body style="background-color:#ffffff;color:#1f1c1b"><pre> 0007 <span style="color:#898887;">/**</span> 0008 <span style="color:#898887;"> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</span> 0009 <span style="color:#898887;"> */</span> 0010 0011 <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:#b08000;">screen</span>, tv<span style="color:#ca60ca;">;</span> 0012 0013 body { 0014 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">pt</span><span style="color:#ca60ca;">;</span> 0015 <span style="font-weight:bold;">font-family</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> 0016 <span style="font-weight:bold;">margin-top</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> 0017 <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0018 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0019 <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0020 } 0021 0022 <span style="color:#644a9b;">.something</span> 0023 { 0024 <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0025 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#cdd</span><span style="color:#ca60ca;">;</span> 0026 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#AAFE04</span><span style="color:#ca60ca;">;</span> 0027 <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span><span style="color:#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> 0028 <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">maroon</span><span style="color:#ca60ca;">;</span> 0029 } 0030 0031 a<span style="color:#b08000;font-style:italic;">:hover</span> { 0032 } 0033 0034 <span style="color:#006e28;font-weight:bold;">#header</span><span style="color:#ca60ca;">,</span> 0035 p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span><span style="color:#ca60ca;">,</span> 0036 p<span style="color:#b08000;font-style:italic;">:lang(nl)</span><span style="color:#ca60ca;">,</span> 0037 img<span style="color:#0095ff;font-weight:bold;">[align</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">"right"</span><span style="color:#0095ff;font-weight:bold;">]</span> 0038 { 0039 <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#aa5500;">red</span> <span style="color:#0057ae;">!important</span><span style="color:#ca60ca;">;</span> 0040 <span style="font-weight:bold;">-moz-border-radius</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> 0041 } 0042 0043 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 0044 0045 <span style="color:#006e28;font-weight:bold;">#header</span> 0046 { 0047 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span><span style="color:#ca60ca;">;</span> 0048 } 0049 0050 } 0051 0052 <span style="color:#898887;">/*</span> 0053 <span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span> 0054 <span style="color:#898887;">*/</span> 0055 0056 0057 <span style="color:#644a9b;">.nice-look</span> { 0058 <span style="font-weight:bold;">font-variant-alternates</span>: <span style="color:#644a9b;">styleset(</span>nice-style<span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0059 } 0060 0061 ul { 0062 <span style="font-weight:bold;">list-style</span>: thumbs<span style="color:#ca60ca;">;</span> 0063 } 0064 0065 <span style="color:#898887;">/* SVG <a> */</span> 0066 svg<span style="color:#ca60ca;">|</span>a {} 0067 0068 <span style="color:#898887;">/* XHTML and SVG <a> */</span> 0069 <span style="color:#ca60ca;">*|</span>a {} 0070 0071 <span style="color:#ca60ca;">*</span>{} 0072 <span style="color:#644a9b;">.class</span>{} 0073 <span style="color:#006e28;font-weight:bold;">#id</span>{} 0074 <span style="color:#b08000;font-style:italic;">:hover</span>{} 0075 <span style="color:#b08000;font-style:italic;">:lang(fr)</span>{} 0076 E{} 0077 E F{} 0078 E<span style="color:#ca60ca;">></span>F{} 0079 E <span style="color:#ca60ca;">></span> F{} 0080 E<span style="color:#ca60ca;">~</span>F{} 0081 E <span style="color:#ca60ca;">~</span> F{} 0082 E<span style="color:#b08000;font-style:italic;">:first-child</span>{} 0083 E<span style="color:#b08000;font-style:italic;">:visited</span>{} 0084 E<span style="color:#b08000;font-style:italic;">::after</span>{} 0085 E<span style="color:#b08000;font-style:italic;">:lang(c)</span>{} 0086 E<span style="color:#b08000;font-style:italic;">:lang(fr-ca)</span>{} 0087 E <span style="color:#ca60ca;">+</span> F{} 0088 E<span style="color:#ca60ca;">+</span>F{} 0089 E<span style="color:#0095ff;font-weight:bold;">[foo]</span>{} 0090 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">warning</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0091 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">"warning"</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0092 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">~=</span><span style="color:#bf0303;">"warning"</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0093 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">^=</span><span style="color:#bf0303;">"warning"</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0094 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">$=</span><span style="color:#bf0303;">"warning"</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0095 E<span style="color:#0095ff;font-weight:bold;">[foo</span><span style="color:#ca60ca;">*=</span><span style="color:#bf0303;">"warning"</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0096 E<span style="color:#0095ff;font-weight:bold;">[lang</span><span style="color:#ca60ca;">|=</span><span style="color:#bf0303;">"en"</span><span style="color:#0095ff;font-weight:bold;">]</span>{} 0097 DIV<span style="color:#644a9b;">.warning</span>{} 0098 DIV <span style="color:#644a9b;">.warning</span>{} 0099 E<span style="color:#006e28;font-weight:bold;">#myid</span>{} 0100 E <span style="color:#006e28;font-weight:bold;">#myid</span>{} 0101 E<span style="color:#ca60ca;">,</span>E{} 0102 E<span style="color:#ca60ca;">,</span> E{} 0103 E <span style="color:#ca60ca;">,</span>E{} 0104 E <span style="color:#ca60ca;">,</span> E{} 0105 0106 p<span style="color:#b08000;font-style:italic;">:nth-child(2)</span> { 0107 <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0108 } 0109 0110 <span style="color:#898887;">/* Elements that are not <div> or <span> elements */</span> 0111 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> { 0112 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0113 } 0114 0115 <span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span> 0116 <span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span> 0117 body <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#644a9b;">.crazy</span><span style="color:#bf0303;text-decoration:underline;">,</span> <span style="color:#644a9b;">.fancy</span><span style="color:#b08000;font-style:italic;">)</span> { 0118 <span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span><span style="color:#ca60ca;">;</span> 0119 } 0120 0121 <span style="color:#b08000;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0122 <span style="color:#b08000;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0123 <span style="color:#b08000;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0124 <span style="color:#b08000;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0125 <span style="color:#b08000;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0126 <span style="color:#b08000;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0127 <span style="color:#b08000;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> } 0128 0129 <span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span><span style="color:#ca60ca;">,</span> 0130 <span style="color:#644a9b;">.second</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span><span style="color:#ca60ca;">,</span> 0131 <span style="color:#644a9b;">.third</span> span<span style="color:#b08000;font-style:italic;">:nth-of-type(2n+1)</span> { 0132 <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> 0133 unknown-property: <span style="color:#aa5500;">lime</span><span style="color:#ca60ca;">;</span> 0134 } 0135 0136 <span style="color:#b08000;font-style:italic;">:root</span>{ 0137 <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">if(</span>x > <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this.width = <span style="color:#b08000;">10</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span> 0138 } 0139 0140 <span style="color:#b08000;font-style:italic;">:root</span><span style="color:#ca60ca;">,</span> 0141 <span style="color:#b08000;font-style:italic;">:root:lang(en)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">"external link"</span><span style="color:#ca60ca;">;</span>} 0142 <span style="color:#b08000;font-style:italic;">:root:lang(de)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">"externer Link"</span><span style="color:#ca60ca;">;</span>} 0143 0144 a<span style="color:#0095ff;font-weight:bold;">[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:#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>} 0145 0146 one { <span style="color:#0057ae;">--foo</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0147 two { <span style="color:#0057ae;">--bar</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--foo</span><span style="color:#644a9b;">)</span> <span style="color:#ca60ca;">+</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> } 0148 three { <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--bar</span><span style="color:#644a9b;">)</span> <span style="color:#ca60ca;">+</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> } 0149 <span style="color:#644a9b;">.foo</span> { 0150 <span style="color:#0057ae;">--gap</span>: <span style="color:#b08000;">20</span><span style="color:#ca60ca;">;</span> 0151 <span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span>px<span style="color:#ca60ca;">;</span> <span style="color:#898887;">/*20 px*/</span> 0152 <span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span> <span style="color:#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> 0153 } 0154 0155 foo { 0156 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#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> 0157 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#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> 0158 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#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> 0159 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#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> 0160 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">-var(</span><span style="color:#ca60ca;">-</span>-a<span style="color:#644a9b;">))</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* invalid */</span> 0161 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">*-</span><span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0162 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">-</span> <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0163 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">+</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> 0164 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#ca60ca;">+</span>(<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>)<span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0165 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">-</span>(<span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--a</span><span style="color:#644a9b;">)</span>)<span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0166 } 0167 0168 sweet-alert input<span style="color:#b08000;font-style:italic;">:focus::-moz-placeholder</span> { 0169 <span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span><span style="color:#ca60ca;">;</span> 0170 <span style="font-weight:bold;">transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span><span style="color:#ca60ca;">;</span> 0171 <span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.5</span><span style="color:#ca60ca;">;</span> 0172 } 0173 0174 0175 <span style="color:#ff5500;">@font-feature-values</span> Font One { 0176 <span style="color:#ff5500;">@styleset</span> { 0177 nice-style: <span style="color:#b08000;">12</span><span style="color:#ca60ca;">;</span> 0178 } 0179 } 0180 0181 <span style="color:#ff5500;">@font-feature-values</span> Font Two { 0182 <span style="color:#ff5500;">@styleset</span> { 0183 nice-style: <span style="color:#b08000;">4</span><span style="color:#ca60ca;">;</span> 0184 } 0185 } 0186 0187 <span style="color:#ff5500;">@counter-style</span> thumbs { 0188 system: cyclic<span style="color:#ca60ca;">;</span> 0189 symbols: <span style="color:#bf0303;">"</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">"</span><span style="color:#ca60ca;">;</span> 0190 suffix: <span style="color:#bf0303;">" "</span><span style="color:#ca60ca;">;</span> 0191 } 0192 0193 <span style="color:#ff5500;">@font-face</span> { 0194 <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">"Open Sans"</span><span style="color:#ca60ca;">;</span> 0195 <span style="font-weight:bold;">src</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> 0196 <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> 0197 } 0198 0199 <span style="color:#ff5500;">@page</span> { 0200 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">cm</span><span style="color:#ca60ca;">;</span> 0201 } 0202 0203 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:first</span> { 0204 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span><span style="color:#ca60ca;">;</span> 0205 <span style="color:#898887;">/* comments */</span> 0206 <span style="font-weight:bold;">marks</span>: <span style="color:#b08000;">crop</span> <span style="color:#b08000;">cross</span><span style="color:#ca60ca;">;</span> 0207 } 0208 0209 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:unknown</span> { 0210 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span><span style="color:#ca60ca;">;</span> 0211 } 0212 0213 <span style="color:#ff5500;">@font-face</span> { 0214 unknown: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0215 <span style="color:#898887;">/* comments */</span> 0216 <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">"Bitstream Vera Serif Bold"</span><span style="color:#ca60ca;">;</span> 0217 <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">"/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0218 } 0219 0220 <span style="color:#ff5500;">@viewport</span> { 0221 <span style="font-weight:bold;">zoom</span>: <span style="color:#b08000;">0.75</span><span style="color:#ca60ca;">;</span> 0222 <span style="color:#898887;">/* comments */</span> 0223 <span style="font-weight:bold;">min-zoom</span>: <span style="color:#b08000;">0.5</span><span style="color:#ca60ca;">;</span> 0224 <span style="font-weight:bold;">max-zoom</span>: <span style="color:#b08000;">0.9</span><span style="color:#ca60ca;">;</span> 0225 } 0226 0227 <span style="color:#ff5500;">@viewport</span> { 0228 <span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span><span style="color:#ca60ca;">;</span> 0229 <span style="color:#898887;">/* comments */</span> 0230 <span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span><span style="color:#ca60ca;">;</span> 0231 } 0232 0233 <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> { 0234 h1 { 0235 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span><span style="color:#ca60ca;">;</span> 0236 } 0237 } 0238 0239 <span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span>) { 0240 div { 0241 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span><span style="color:#ca60ca;">;</span> 0242 } 0243 } 0244 0245 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>) { 0246 <span style="color:#644a9b;">.sidebar</span> { 0247 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span><span style="color:#ca60ca;">;</span> 0248 } 0249 } 0250 0251 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">"fineprint.css"</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span><span style="color:#ca60ca;">;</span> 0252 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">fineprint.css</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span><span style="color:#ca60ca;">;</span> 0253 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'bluish.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">speech</span><span style="color:#ca60ca;">;</span> 0254 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'custom.css'</span><span style="color:#ca60ca;">;</span> 0255 <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> 0256 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"common.css"</span> <span style="color:#b08000;">screen</span><span style="color:#ca60ca;">;</span> 0257 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'landscape.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">landscape</span>)<span style="color:#ca60ca;">;</span> 0258 0259 <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> 0260 <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> 0261 0262 <span style="color:#ff5500;">@keyframes</span> important1 { 0263 <span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0264 <span style="color:#b08000;">50%</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span><span style="color:#ca60ca;">;</span> } <span style="color:#898887;">/* ignored */</span> 0265 <span style="color:#b08000;">to</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0266 } 0267 0268 <span style="color:#ff5500;">@keyframes</span> important2 { 0269 <span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0270 <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0271 <span style="color:#b08000;">to</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">/* ignored */</span> 0272 <span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0273 } 0274 0275 <span style="color:#ff5500;">@keyframes</span> slidein { 0276 <span style="color:#b08000;">from</span> { 0277 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0278 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0279 } 0280 0281 <span style="color:#b08000;">to</span> { 0282 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0283 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0284 } 0285 } 0286 0287 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 0288 a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> } 0289 <span style="color:#898887;">/* comments */</span> 0290 a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> } 0291 } 0292 0293 <span style="color:#898887;">/**</span> 0294 <span style="color:#898887;"> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</span> 0295 <span style="color:#898887;"> */</span> 0296 0297 <span style="color:#006e28;font-weight:bold;">#main</span> p { 0298 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#00ff00</span><span style="color:#ca60ca;">;</span> 0299 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">97</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0300 0301 <span style="color:#644a9b;">.redbox</span> { 0302 <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#ff0000</span><span style="color:#ca60ca;">;</span> 0303 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#000000</span><span style="color:#ca60ca;">;</span> 0304 } 0305 } 0306 0307 a { 0308 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0309 <span style="font-weight:bold;">text-decoration</span>: <span style="color:#b08000;">none</span><span style="color:#ca60ca;">;</span> 0310 <span style="color:#ca60ca;">&</span><span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">text-decoration</span>: <span style="color:#b08000;">underline</span><span style="color:#ca60ca;">;</span> } 0311 body<span style="color:#644a9b;">.firefox</span> <span style="color:#ca60ca;">&</span> { <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">normal</span><span style="color:#ca60ca;">;</span> } 0312 } 0313 0314 <span style="color:#006e28;font-weight:bold;">#main</span> { 0315 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span><span style="color:#ca60ca;">;</span> 0316 a { 0317 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0318 <span style="color:#ca60ca;">&</span><span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> } 0319 } 0320 } 0321 0322 <span style="color:#006e28;font-weight:bold;">#main</span> { 0323 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span><span style="color:#ca60ca;">;</span> 0324 <span style="color:#ca60ca;">&</span>-sidebar { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span><span style="color:#ca60ca;">;</span> } 0325 } 0326 0327 <span style="color:#644a9b;">.funky</span> { 0328 <span style="font-weight:bold;">font</span>: { 0329 <span style="font-weight:bold;">family</span>: <span style="color:#b08000;">fantasy</span><span style="color:#ca60ca;">;</span> 0330 <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">em</span><span style="color:#ca60ca;">;</span> 0331 <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0332 } 0333 } 0334 0335 <span style="color:#644a9b;">.funky</span> { 0336 <span style="font-weight:bold;">font</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> { 0337 <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0338 } 0339 } 0340 0341 <span style="color:#898887;">/* This comment is</span> 0342 <span style="color:#898887;"> * several lines long.</span> 0343 <span style="color:#898887;"> * since it uses the CSS comment syntax,</span> 0344 <span style="color:#898887;"> * it will appear in the CSS output. */</span> 0345 body { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span><span style="color:#ca60ca;">;</span> } 0346 0347 <span style="color:#898887;">// These comments are only one line long each.</span> 0348 <span style="color:#898887;">// They won't appear in the CSS output,</span> 0349 <span style="color:#898887;">// since they use the single-line comment syntax.</span> 0350 a { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span><span style="color:#ca60ca;">;</span> } 0351 0352 <span style="color:#0057ae;">$version</span>: <span style="color:#bf0303;">"1.2.3"</span><span style="color:#ca60ca;">;</span> 0353 <span style="color:#898887;">/* This CSS is generated by My Snazzy Framework version #{$version}. */</span> 0354 0355 <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">em</span><span style="color:#ca60ca;">;</span> 0356 0357 <span style="color:#006e28;font-weight:bold;">#main</span> { 0358 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span><span style="color:#ca60ca;">;</span> 0359 } 0360 0361 <span style="color:#006e28;font-weight:bold;">#main</span> { 0362 <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">em</span> <span style="color:#0057ae;">!global</span><span style="color:#ca60ca;">;</span> 0363 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span><span style="color:#ca60ca;">;</span> 0364 } 0365 0366 <span style="color:#006e28;font-weight:bold;">#sidebar</span> { 0367 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span><span style="color:#ca60ca;">;</span> 0368 } 0369 0370 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">firefox-message</span>(<span style="color:#0057ae;">$selector</span>) { 0371 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> { 0372 <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">"Hi, Firefox users!"</span><span style="color:#ca60ca;">;</span> 0373 } 0374 } 0375 0376 <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> 0377 0378 <span style="color:#0057ae;">$map</span>: (key1: value1<span style="color:#ca60ca;">,</span> key2: value2<span style="color:#ca60ca;">,</span> key3: value3)<span style="color:#ca60ca;">;</span> 0379 0380 p { 0381 <span style="font-weight:bold;">font</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> 0382 <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">1000</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0383 <span style="font-weight:bold;">width</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> 0384 <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">round(</span><span style="color:#b08000;">1.5</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">/</span><span style="color:#b08000;">2</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// Uses a function, does division</span> 0385 <span style="font-weight:bold;">height</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> 0386 <span style="font-weight:bold;">margin-left</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> 0387 <span style="font-weight:bold;">font</span>: (<span style="color:#b08000;">italic</span> <span style="color:#b08000;">bold</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#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> 0388 } 0389 0390 p { 0391 <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0392 <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0393 <span style="font-weight:bold;">font</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> 0394 } 0395 0396 p { 0397 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#010203</span> <span style="color:#ca60ca;">+</span> <span style="color:#aa5500;">#040506</span><span style="color:#ca60ca;">;</span> 0398 <span style="font-weight:bold;">color</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> 0399 } 0400 0401 <span style="color:#0057ae;">$translucent-red</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> 0402 p { 0403 <span style="font-weight:bold;">color</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> 0404 <span style="font-weight:bold;">background-color</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> 0405 } 0406 0407 <span style="color:#0057ae;">$translucent-red</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> 0408 <span style="color:#0057ae;">$green</span>: <span style="color:#aa5500;">#00ff00</span><span style="color:#ca60ca;">;</span> 0409 div { 0410 <span style="font-weight:bold;">filter</span>: progid:DXImageTransform.Microsoft.<span style="color:#644a9b;">gradient(</span>enabled=<span style="color:#bf0303;">'false'</span><span style="color:#ca60ca;">,</span> startColorstr=<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:#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> 0411 } 0412 p { 0413 <span style="font-weight:bold;">cursor</span>: e <span style="color:#ca60ca;">+</span> -resize<span style="color:#ca60ca;">;</span> 0414 } 0415 p<span style="color:#b08000;font-style:italic;">:before</span> { 0416 <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">"Foo "</span> <span style="color:#ca60ca;">+</span> Bar<span style="color:#ca60ca;">;</span> 0417 <span style="font-weight:bold;">font-family</span>: sans- <span style="color:#ca60ca;">+</span> <span style="color:#bf0303;">"serif"</span><span style="color:#ca60ca;">;</span> 0418 } 0419 p<span style="color:#b08000;font-style:italic;">:before</span> { 0420 <span style="font-weight:bold;">content</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> 0421 } 0422 <span style="color:#0057ae;">$value</span>: <span style="color:#644a9b;font-weight:bold;">null</span><span style="color:#ca60ca;">;</span> 0423 p<span style="color:#b08000;font-style:italic;">:before</span> { 0424 <span style="font-weight:bold;">content</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> 0425 } 0426 p { 0427 <span style="font-weight:bold;">width</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> 0428 } 0429 p { 0430 <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">hsl(</span><span style="color:#0057ae;">$hue</span>: <span style="color:#b08000;">0</span><span style="color:#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> 0431 } 0432 <span style="color:#0057ae;">$name</span>: foo<span style="color:#ca60ca;">;</span> 0433 <span style="color:#0057ae;">$attr</span>: border<span style="color:#ca60ca;">;</span> 0434 p<span style="color:#644a9b;">.</span><span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$name</span><span style="color:#ca60ca;">}</span> { 0435 <span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$attr</span><span style="color:#ca60ca;">}</span>-color: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">;</span> 0436 } 0437 p { 0438 <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0439 <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0440 <span style="font-weight:bold;">font</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> 0441 } 0442 0443 <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> { 0444 <span style="color:#0057ae;">$selector</span>: &<span style="color:#ca60ca;">;</span> 0445 } 0446 0447 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">does-parent-exist</span> { 0448 <span style="color:#ff5500;">@if</span> & { 0449 <span style="color:#ca60ca;">&</span><span style="color:#b08000;font-style:italic;">:hover</span> { 0450 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0451 } 0452 } <span style="color:#ff5500;">@else</span> { 0453 a { 0454 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0455 } 0456 } 0457 } 0458 0459 <span style="color:#0057ae;">$content</span>: <span style="color:#bf0303;">"First content"</span><span style="color:#ca60ca;">;</span> 0460 <span style="color:#0057ae;">$content</span>: <span style="color:#bf0303;">"Second content?"</span> <span style="color:#0057ae;">!default</span><span style="color:#ca60ca;">;</span> 0461 <span style="color:#0057ae;">$new_content</span>: <span style="color:#bf0303;">"First time reference"</span> <span style="color:#0057ae;">!default</span><span style="color:#ca60ca;">;</span> 0462 0463 <span style="color:#006e28;font-weight:bold;">#main</span> { 0464 <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$content</span><span style="color:#ca60ca;">;</span> 0465 new-content: <span style="color:#0057ae;">$new_content</span><span style="color:#ca60ca;">;</span> 0466 } 0467 0468 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"foo.css"</span><span style="color:#ca60ca;">;</span> 0469 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"foo"</span> <span style="color:#b08000;">screen</span><span style="color:#ca60ca;">;</span> 0470 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"http://foo.com/bar"</span><span style="color:#ca60ca;">;</span> 0471 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">foo</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0472 0473 <span style="color:#0057ae;">$family</span>: <span style="color:#644a9b;">unquote(</span><span style="color:#bf0303;">"Droid+Sans"</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0474 <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> 0475 <span style="color:#006e28;font-weight:bold;">#main</span> { 0476 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"example"</span><span style="color:#ca60ca;">;</span> 0477 } 0478 0479 <span style="color:#644a9b;">.sidebar</span> { 0480 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0481 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) { 0482 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0483 } 0484 } 0485 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> { 0486 <span style="color:#644a9b;">.sidebar</span> { 0487 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) { 0488 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0489 } 0490 } 0491 } 0492 0493 <span style="color:#0057ae;">$media</span>: screen<span style="color:#ca60ca;">;</span> 0494 <span style="color:#0057ae;">$feature</span>: -webkit-min-device-pixel-ratio<span style="color:#ca60ca;">;</span> 0495 <span style="color:#0057ae;">$value</span>: <span style="color:#b08000;">1.5</span><span style="color:#ca60ca;">;</span> 0496 0497 <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:#0057ae;">$feature</span>: <span style="color:#0057ae;">$value</span>) { 0498 <span style="color:#644a9b;">.sidebar</span> { 0499 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0500 } 0501 } 0502 0503 <span style="color:#644a9b;">.error</span> { 0504 <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">#f00</span><span style="color:#ca60ca;">;</span> 0505 <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#fdd</span><span style="color:#ca60ca;">;</span> 0506 } 0507 <span style="color:#644a9b;">.seriousError</span> { 0508 <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.error</span><span style="color:#ca60ca;">;</span> 0509 <span style="font-weight:bold;">border-width</span>: <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0510 } 0511 0512 <span style="color:#644a9b;">.hoverlink</span> { 0513 <span style="color:#ff5500;">@extend</span> a<span style="color:#b08000;font-style:italic;">:hover</span><span style="color:#ca60ca;">;</span> 0514 } 0515 a<span style="color:#b08000;font-style:italic;">:hover</span> { 0516 <span style="font-weight:bold;">text-decoration</span>: <span style="color:#b08000;">underline</span><span style="color:#ca60ca;">;</span> 0517 } 0518 0519 <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> { 0520 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">;</span> 0521 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0522 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span><span style="color:#ca60ca;">;</span> 0523 } 0524 <span style="color:#644a9b;">.notice</span> { 0525 <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%extreme</span><span style="color:#ca60ca;">;</span> 0526 } 0527 0528 a<span style="color:#644a9b;">.important</span> { 0529 <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.notice</span> !optional<span style="color:#ca60ca;">;</span> 0530 } 0531 0532 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 0533 <span style="color:#644a9b;">.page</span> { 0534 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">8</span><span style="color:#0057ae;">in</span><span style="color:#ca60ca;">;</span> 0535 <span style="color:#ff5500;">@at-root</span> (<span style="font-weight:bold;">without</span>: media) { 0536 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0537 } 0538 } 0539 } 0540 0541 <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> 0542 0543 <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>) { 0544 <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$x</span><span style="color:#644a9b;">)</span> { 0545 <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> 0546 <span style="color:#0057ae;">$x</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> 0547 } 0548 <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$y</span><span style="color:#644a9b;">)</span> { 0549 <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> 0550 <span style="color:#0057ae;">$y</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> 0551 } 0552 <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">relative</span><span style="color:#ca60ca;">;</span> <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$x</span><span style="color:#ca60ca;">;</span> <span style="font-weight:bold;">top</span>: <span style="color:#0057ae;">$y</span><span style="color:#ca60ca;">;</span> 0553 } 0554 0555 <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>) { 0556 <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$x</span><span style="color:#644a9b;">)</span> { 0557 <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> 0558 } 0559 <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$y</span><span style="color:#644a9b;">)</span> { 0560 <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> 0561 } 0562 <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">relative</span><span style="color:#ca60ca;">;</span> <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$x</span><span style="color:#ca60ca;">;</span> <span style="font-weight:bold;">top</span>: <span style="color:#0057ae;">$y</span><span style="color:#ca60ca;">;</span> 0563 } 0564 0565 p { 0566 <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:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span><span style="color:#ca60ca;">;</span> } 0567 <span style="color:#ff5500;">@if</span> <span style="color:#b08000;">5</span> <span style="color:#ca60ca;"><</span> <span style="color:#b08000;">3</span> { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">dotted</span><span style="color:#ca60ca;">;</span> } 0568 <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;font-weight:bold;">null</span> { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">double</span><span style="color:#ca60ca;">;</span> } 0569 } 0570 0571 <span style="color:#0057ae;">$type</span>: monster<span style="color:#ca60ca;">;</span> 0572 p { 0573 <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$type</span> <span style="color:#ca60ca;">==</span> ocean { 0574 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">;</span> 0575 } <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$type</span> <span style="color:#ca60ca;">==</span> matador { 0576 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0577 } <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$type</span> <span style="color:#ca60ca;">==</span> monster { 0578 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span><span style="color:#ca60ca;">;</span> 0579 } <span style="color:#ff5500;">@else</span> { 0580 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span><span style="color:#ca60ca;">;</span> 0581 } 0582 } 0583 0584 <span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$i</span> from <span style="color:#b08000;">1</span> through <span style="color:#b08000;">3</span> { 0585 <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:#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> } 0586 } 0587 0588 <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$animal</span> in puma, sea-slug, egret, salamander { 0589 <span style="color:#644a9b;">.</span><span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$animal</span><span style="color:#ca60ca;">}</span>-icon { 0590 <span style="font-weight:bold;">background-image</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> 0591 } 0592 } 0593 0594 <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$animal</span>, <span style="color:#0057ae;">$color</span>, <span style="color:#0057ae;">$cursor</span> in (puma, <span style="color:#aa5500;">black</span>, <span style="color:#b08000;">default</span>), 0595 (sea-slug, <span style="color:#aa5500;">blue</span>, <span style="color:#b08000;">pointer</span>), 0596 (egret, <span style="color:#aa5500;">white</span>, <span style="color:#b08000;">move</span>) { 0597 <span style="color:#644a9b;">.</span><span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$animal</span><span style="color:#ca60ca;">}</span>-icon { 0598 <span style="font-weight:bold;">background-image</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> 0599 <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#0057ae;">$color</span><span style="color:#ca60ca;">;</span> 0600 <span style="font-weight:bold;">cursor</span>: <span style="color:#0057ae;">$cursor</span><span style="color:#ca60ca;">;</span> 0601 } 0602 } 0603 0604 <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$header</span>, <span style="color:#0057ae;">$size</span> in (h1: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>, h2: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span>, h3: <span style="color:#b08000;">1.2</span><span style="color:#0057ae;">em</span>) { 0605 <span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$header</span><span style="color:#ca60ca;">}</span> { 0606 <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span><span style="color:#ca60ca;">;</span> 0607 } 0608 } 0609 0610 <span style="color:#0057ae;">$i</span>: <span style="color:#b08000;">6</span><span style="color:#ca60ca;">;</span> 0611 <span style="color:#ff5500;">@while</span> <span style="color:#0057ae;">$i</span> > <span style="color:#b08000;">0</span> { 0612 <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:#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> } 0613 <span style="color:#0057ae;">$i</span>: <span style="color:#0057ae;">$i</span> <span style="color:#ca60ca;">-</span> <span style="color:#b08000;">2</span><span style="color:#ca60ca;">;</span> 0614 } 0615 0616 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">large-text</span> { 0617 <span style="font-weight:bold;">font</span>: { 0618 <span style="font-weight:bold;">family</span>: Arial<span style="color:#ca60ca;">;</span> 0619 <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0620 <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0621 } 0622 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#ff0000</span><span style="color:#ca60ca;">;</span> 0623 } 0624 0625 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">clearfix</span> { 0626 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span><span style="color:#ca60ca;">;</span> 0627 <span style="color:#ca60ca;">&</span><span style="color:#b08000;font-style:italic;">:after</span> { 0628 <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">"."</span><span style="color:#ca60ca;">;</span> 0629 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span><span style="color:#ca60ca;">;</span> 0630 <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">0</span><span style="color:#ca60ca;">;</span> 0631 <span style="font-weight:bold;">clear</span>: <span style="color:#b08000;">both</span><span style="color:#ca60ca;">;</span> 0632 <span style="font-weight:bold;">visibility</span>: <span style="color:#b08000;">hidden</span><span style="color:#ca60ca;">;</span> 0633 } 0634 <span style="color:#ca60ca;">*</span> html <span style="color:#ca60ca;">&</span> { <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> } 0635 } 0636 0637 <span style="color:#644a9b;">.page-title</span> { 0638 <span style="color:#ff5500;">@include</span> large-text<span style="color:#ca60ca;">;</span> 0639 <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0640 <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0641 } 0642 0643 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">compound</span> { 0644 <span style="color:#ff5500;">@include</span> highlighted-background<span style="color:#ca60ca;">;</span> 0645 <span style="color:#ff5500;">@include</span> header-text<span style="color:#ca60ca;">;</span> 0646 } 0647 0648 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">highlighted-background</span> { <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#fc0</span><span style="color:#ca60ca;">;</span> } 0649 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">header-text</span> { <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0650 0651 <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>) { 0652 <span style="font-weight:bold;">border</span>: { 0653 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span><span style="color:#ca60ca;">;</span> 0654 <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span><span style="color:#ca60ca;">;</span> 0655 <span style="font-weight:bold;">style</span>: <span style="color:#b08000;">dashed</span><span style="color:#ca60ca;">;</span> 0656 } 0657 } 0658 0659 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> } 0660 0661 p { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">sexy-border(</span><span style="color:#0057ae;">$color</span>: <span style="color:#aa5500;">blue</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> } 0662 h1 { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">sexy-border(</span><span style="color:#0057ae;">$color</span>: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">,</span> <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">in</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> } 0663 0664 0665 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">colors</span>(<span style="color:#0057ae;">$text</span><span style="color:#ca60ca;">,</span> <span style="color:#0057ae;">$background</span><span style="color:#ca60ca;">,</span> <span style="color:#0057ae;">$border</span>) { 0666 <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$text</span><span style="color:#ca60ca;">;</span> 0667 <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$background</span><span style="color:#ca60ca;">;</span> 0668 <span style="font-weight:bold;">border-color</span>: <span style="color:#0057ae;">$border</span><span style="color:#ca60ca;">;</span> 0669 } 0670 0671 <span style="color:#0057ae;">$values</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> 0672 <span style="color:#644a9b;">.primary</span> { 0673 <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$values</span><span style="color:#ca60ca;">...</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0674 } 0675 0676 <span style="color:#0057ae;">$value-map</span>: (<span style="color:#b08000;">text</span>: <span style="color:#aa5500;">#00ff00</span><span style="color:#ca60ca;">,</span> <span style="color:#aa5500;">background</span>: <span style="color:#aa5500;">#0000ff</span><span style="color:#ca60ca;">,</span> border: <span style="color:#aa5500;">#ff0000</span>)<span style="color:#ca60ca;">;</span> 0677 <span style="color:#644a9b;">.secondary</span> { 0678 <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> 0679 } 0680 0681 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">apply-to-ie6-only</span> { 0682 <span style="color:#ca60ca;">*</span> html { 0683 <span style="color:#ff5500;">@content</span><span style="color:#ca60ca;">;</span> 0684 } 0685 } 0686 <span style="color:#ff5500;">@include</span> apply-to-ie6-only { 0687 <span style="color:#006e28;font-weight:bold;">#logo</span> { 0688 <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">/logo.gif</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0689 } 0690 } 0691 0692 <span style="color:#0057ae;">$grid-width</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0693 <span style="color:#0057ae;">$gutter-width</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0694 0695 <span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">grid-width</span>(<span style="color:#0057ae;">$n</span>) { 0696 <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> 0697 } 0698 0699 <span style="color:#006e28;font-weight:bold;">#sidebar</span> { <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">grid-width(</span><span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> } 0700 0701 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>) { 0702 <span style="color:#ff5500;">@at-root</span> <span style="color:#ca60ca;">#{</span><span style="color:#644a9b;">selector-unify(</span>&<span style="color:#ca60ca;">,</span> <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">}</span> { 0703 <span style="color:#ff5500;">@content</span><span style="color:#ca60ca;">;</span> 0704 } 0705 } 0706 0707 <span style="color:#b08000;font-style:italic;">:root</span> { 0708 <span style="color:#0057ae;">--font-family-sans-serif</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> 0709 <span style="color:#0057ae;">--font-family-monospace</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> 0710 } 0711 0712 div { 0713 <span style="font-weight:bold;">background-image</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> 0714 <span style="font-weight:bold;">font</span>: <span style="color:#ca60ca;">#{</span><span style="color:#bf0303;">"string"</span><span style="color:#ca60ca;">}</span><span style="color:#ca60ca;">;</span> 0715 0716 <span style="color:#644a9b;">.icon-</span><span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$name</span><span style="color:#ca60ca;">}</span> { 0717 <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span><span style="color:#ca60ca;">;</span> 0718 <span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$top-or-bottom</span><span style="color:#ca60ca;">}</span>: <span style="color:#b08000;">0</span><span style="color:#ca60ca;">;</span> 0719 -<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:#0057ae;">$value</span><span style="color:#ca60ca;">;</span> 0720 <span style="color:#644a9b;">.icon-</span><span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$name</span><span style="color:#ca60ca;">}</span> { 0721 <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span><span style="color:#ca60ca;">;</span> 0722 <span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$top-or-bottom</span><span style="color:#ca60ca;">}</span>: <span style="color:#b08000;">0</span><span style="color:#ca60ca;">;</span> 0723 -<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:#0057ae;">$value</span> 0724 } 0725 } 0726 0727 <span style="color:#898887;">/*</span> 0728 <span style="color:#898887;"> * SCSS Syntax Highlight Sample File (Standard)</span> 0729 <span style="color:#898887;"> *</span> 0730 <span style="color:#898887;"> * This file contains most SCSS syntax, CSS3 properties, advanced code structure.</span> 0731 <span style="color:#898887;"> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</span> 0732 <span style="color:#898887;"> *</span> 0733 <span style="color:#898887;"> * @author Guo Yunhe guoyunhebrave@gmail.com</span> 0734 <span style="color:#898887;"> * @date 2016-09-15</span> 0735 <span style="color:#898887;"> */</span> 0736 0737 <span style="color:#898887;">/*</span> 0738 <span style="color:#898887;"> * Block comment</span> 0739 <span style="color:#898887;"> *</span> 0740 <span style="color:#898887;"> * Alert keywords:</span> 0741 <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> 0742 <span style="color:#898887;"> */</span> 0743 0744 <span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">"UTF-8"</span><span style="color:#ca60ca;">;</span> 0745 0746 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"mixins/button"</span><span style="color:#ca60ca;">;</span> 0747 0748 <span style="color:#898887;">// Variable define</span> 0749 0750 <span style="color:#0057ae;">$image-path</span>: <span style="color:#bf0303;">"../../static/images"</span><span style="color:#ca60ca;">;</span> 0751 <span style="color:#0057ae;">$default-text-color</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> 0752 <span style="color:#0057ae;">$default-font-size</span>: <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!default</span><span style="color:#ca60ca;">;</span> 0753 <span style="color:#0057ae;">$default-font-family</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> 0754 <span style="color:#0057ae;">$default-font-weight</span>: <span style="color:#b08000;">400</span><span style="color:#ca60ca;">;</span> 0755 <span style="color:#0057ae;">$default-line-height</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> 0756 <span style="color:#0057ae;">$shadow-transparence</span>: <span style="color:#b08000;">0.25</span><span style="color:#ca60ca;">;</span> 0757 <span style="color:#0057ae;">$box-shadow</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> 0758 <span style="color:#0057ae;">$page-width</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> 0759 <span style="color:#0057ae;">$gapOfArticle</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// camelCase</span> 0760 <span style="color:#0057ae;">$body_background_color</span>: <span style="color:#aa5500;">white</span><span style="color:#ca60ca;">;</span> <span style="color:#898887;">// snake_case</span> 0761 0762 <span style="color:#898887;">// Mixins</span> 0763 0764 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">border-radius</span>(<span style="color:#0057ae;">$radius</span>) { 0765 <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">$radius</span><span style="color:#ca60ca;">;</span> 0766 <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">$radius</span><span style="color:#ca60ca;">;</span> 0767 -ms-border-radius: <span style="color:#0057ae;">$radius</span><span style="color:#ca60ca;">;</span> 0768 <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">$radius</span><span style="color:#ca60ca;">;</span> 0769 } 0770 0771 <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> } 0772 0773 <span style="color:#898887;">// Nesting</span> 0774 0775 <span style="color:#006e28;font-weight:bold;">#home-page</span> { 0776 0777 header { 0778 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">80</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0779 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#644a9b;font-weight:bold;">auto</span><span style="color:#ca60ca;">;</span> 0780 0781 <span style="color:#644a9b;">.cover</span> { 0782 <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> 0783 <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0784 0785 <span style="color:#ca60ca;">&</span><span style="color:#b08000;font-style:italic;">:hover</span> { 0786 <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">#ffffff</span><span style="color:#ca60ca;">;</span> 0787 } 0788 0789 <span style="color:#644a9b;">.like-button</span> { 0790 <span style="font-weight:bold;">font-size</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> 0791 0792 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">200</span><span style="color:#0057ae;">px</span>) { 0793 <span style="font-weight:bold;">font-size</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> 0794 0795 <span style="color:#644a9b;">.icon</span> { 0796 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0797 <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0798 } 0799 } 0800 0801 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 0802 <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span><span style="color:#ca60ca;">;</span> 0803 } 0804 } 0805 } 0806 } 0807 } 0808 0809 <span style="color:#898887;">// Extend and inheritance</span> 0810 0811 <span style="color:#644a9b;">.message</span> { 0812 <span style="font-weight:bold;">border</span>: <span style="color:#0057ae;">$border-light</span><span style="color:#ca60ca;">;</span> 0813 <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#f0f0f0</span><span style="color:#ca60ca;">;</span> 0814 } 0815 0816 <span style="color:#644a9b;">.message-danger</span> { 0817 <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.message</span><span style="color:#ca60ca;">;</span> 0818 } 0819 0820 0821 <span style="color:#898887;">// Control structures</span> 0822 0823 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">does-parent-exist</span> { 0824 <span style="color:#ff5500;">@if</span> & { 0825 <span style="color:#ca60ca;">&</span><span style="color:#b08000;font-style:italic;">:hover</span> { 0826 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0827 } 0828 } <span style="color:#ff5500;">@else</span> { 0829 a { 0830 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span><span style="color:#ca60ca;">;</span> 0831 } 0832 } 0833 } 0834 0835 0836 <span style="color:#898887;">// Operators</span> 0837 0838 <span style="color:#644a9b;">.container</span> { <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> } 0839 0840 article<span style="color:#0095ff;font-weight:bold;">[role</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">"main"</span><span style="color:#0095ff;font-weight:bold;">]</span> { 0841 <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span><span style="color:#ca60ca;">;</span> 0842 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">/</span> <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">*</span> <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0843 } 0844 0845 aside<span style="color:#0095ff;font-weight:bold;">[role</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">"complementary"</span><span style="color:#0095ff;font-weight:bold;">]</span> { 0846 <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">right</span><span style="color:#ca60ca;">;</span> 0847 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">/</span> <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">*</span> <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0848 } 0849 0850 0851 <span style="color:#898887;">// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</span> 0852 0853 <span style="color:#0057ae;">$color1</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> 0854 <span style="color:#0057ae;">$color2</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> 0855 <span style="color:#0057ae;">$color3</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> 0856 0857 0858 <span style="color:#898887;">// Properties</span> 0859 0860 html<span style="color:#ca60ca;">,</span> body { 0861 <span style="font-weight:bold;">font-family</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> 0862 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11</span><span style="color:#0057ae;">pt</span><span style="color:#ca60ca;">;</span> 0863 <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span><span style="color:#ca60ca;">;</span> 0864 <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> <span style="color:#ca60ca;">+</span> <span style="color:#0057ae;">$page-width</span> <span style="color:#ca60ca;">-</span> <span style="color:#0057ae;">$gap</span> <span style="color:#ca60ca;">/</span> <span style="color:#b08000;">2</span><span style="color:#ca60ca;">;</span> 0865 <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">$bg_color</span><span style="color:#ca60ca;">;</span> 0866 <span style="font-weight:bold;">text-shadow</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:#0057ae;">$transparence</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0867 <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span><span style="color:#ca60ca;">;</span> 0868 } 0869 0870 0871 <span style="color:#898887;">// Selectors</span> 0872 0873 blockquote { 0874 <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span><span style="color:#ca60ca;">;</span> 0875 } 0876 0877 header <span style="color:#006e28;font-weight:bold;">#logo</span> { 0878 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0879 } 0880 0881 div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> { 0882 <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">;</span> 0883 } 0884 0885 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;">[type</span><span style="color:#ca60ca;">=</span><span style="color:#bf0303;">"text"</span><span style="color:#0095ff;font-weight:bold;">]</span> { 0886 <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0887 } 0888 0889 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(2n + 1):hover</span> input<span style="color:#0095ff;font-weight:bold;">[class</span><span style="color:#ca60ca;">*=</span><span style="color:#bf0303;">"small-"</span><span style="color:#0095ff;font-weight:bold;">]</span> { 0890 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0891 } 0892 0893 0894 <span style="color:#898887;">// Media Queries</span> 0895 0896 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> { 0897 <span style="color:#644a9b;">.container</span> { 0898 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0899 } 0900 } 0901 0902 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) { 0903 <span style="color:#644a9b;">.container</span> { 0904 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0905 } 0906 } 0907 0908 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span>) { 0909 <span style="color:#644a9b;">.container</span> { 0910 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 0911 } 0912 } 0913 0914 0915 <span style="color:#898887;">// Fontface</span> 0916 0917 <span style="color:#ff5500;">@font-face</span> { 0918 <span style="font-weight:bold;">font-family</span>: MyHelvetica<span style="color:#ca60ca;">;</span> 0919 <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">"Helvetica Neue Bold"</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">,</span> 0920 <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">"HelveticaNeue-Bold"</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">,</span> 0921 <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">MgOpenModernaBold.ttf</span><span style="color:#644a9b;">)</span><span style="color:#ca60ca;">;</span> 0922 <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span><span style="color:#ca60ca;">;</span> 0923 } 0924 0925 <span style="color:#898887;">// Animation (Keyframes)</span> 0926 0927 <span style="color:#ff5500;">@keyframes</span> slidein { 0928 <span style="color:#b08000;">from</span> { 0929 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0930 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0931 } 0932 0933 <span style="color:#b08000;">to</span> { 0934 <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0935 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span><span style="color:#ca60ca;">;</span> 0936 } 0937 } 0938 0939 <span style="color:#898887;">/*</span> 0940 <span style="color:#898887;"> * SCSS Syntax Highlight Sample File (Complex)</span> 0941 <span style="color:#898887;"> *</span> 0942 <span style="color:#898887;"> * This file contains complex SCSS syntax that can test unexpected situations.</span> 0943 <span style="color:#898887;"> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</span> 0944 <span style="color:#898887;"> *</span> 0945 <span style="color:#898887;"> * @author Guo Yunhe guoyunhebrave@gmail.com</span> 0946 <span style="color:#898887;"> * @date 2016-09-16</span> 0947 <span style="color:#898887;"> */</span> 0948 0949 0950 <span style="color:#898887;">// Comments with special content</span> 0951 0952 <span style="color:#898887;">// .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text</span> 0953 0954 <span style="color:#898887;">/*</span> 0955 <span style="color:#898887;"> * .class-selector #id "string" 'comment' // comment {} [] () /* comment</span> 0956 <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> 0957 <span style="color:#898887;"> * body {</span> 0958 <span style="color:#898887;"> * margin: 0 !important;</span> 0959 <span style="color:#898887;"> * }</span> 0960 <span style="color:#898887;"> */</span> 0961 0962 <span style="color:#898887;">// Comments in special positions</span> 0963 0964 <span style="color:#0057ae;">$color</span>: <span style="color:#aa5500;">black</span> <span style="color:#898887;">/* comment here */</span><span style="color:#ca60ca;">;</span> 0965 0966 header<span style="color:#898887;">/* comment here */</span><span style="color:#644a9b;">.active</span> <span style="color:#898887;">/* comment here */</span> { 0967 <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">color</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> 0968 <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#898887;">/* comment here */</span><span style="color:#ca60ca;">,</span> 0969 <span style="color:#bf0303;">"Droid Sans"</span><span style="color:#ca60ca;">,</span> <span style="color:#898887;">/* comment here */</span> 0970 <span style="color:#b08000;">sans-serif</span><span style="color:#898887;">/* comment here */</span><span style="color:#ca60ca;">;</span> 0971 } 0972 0973 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="color:#898887;">/* comment here */</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> <span style="color:#898887;">/* comment here */</span>) <span style="color:#898887;">/* comment here */</span> {<span style="color:#898887;">/* comment here */</span>} 0974 0975 0976 <span style="color:#898887;">// Strings with special content</span> 0977 0978 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"{} $variable /* comment */"</span><span style="color:#ca60ca;">;</span> 0979 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">"{}"</span><span style="color:#ca60ca;">;</span> 0980 0981 <span style="color:#898887;">// Without extra breaklines and spaces</span> 0982 0983 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(2n-1)</span>{<span style="font-weight:bold;">font-size</span>:<span style="color:#0057ae;">$default-font-size</span><span style="color:#ca60ca;">;</span><span style="font-weight:bold;">font-family</span>:<span style="color:#bf0303;">"Noto Sans"</span><span style="color:#ca60ca;">;</span><span style="font-weight:bold;">-webkit-box-shadow</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>} 0984 0985 <span style="color:#898887;">// With unnecessary breaklines and spaces</span> 0986 0987 blockquote <span style="color:#644a9b;">.ref</span> 0988 { 0989 <span style="font-weight:bold;">flex</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> 0990 <span style="font-weight:bold;">flex-wrap</span> : wrap<span style="color:#ca60ca;">;</span> 0991 } 0992 0993 <span style="color:#644a9b;">.sidebar</span> { 0994 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } 0995 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) { 0996 <span style="color:#644a9b;">.sidebar</span> { 0997 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> } } 0998 0999 <span style="color:#898887;">// Variable interpolation: #{}</span> 1000 1001 <span style="color:#0057ae;">$name</span>: foo<span style="color:#ca60ca;">;</span> 1002 <span style="color:#0057ae;">$attr</span>: border<span style="color:#ca60ca;">;</span> 1003 p<span style="color:#644a9b;">.</span><span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$name</span><span style="color:#ca60ca;">}</span> { 1004 <span style="color:#ca60ca;">#{</span><span style="color:#0057ae;">$attr</span><span style="color:#ca60ca;">}</span>-color: <span style="color:#aa5500;">blue</span><span style="color:#ca60ca;">;</span> 1005 } 1006 1007 p { 1008 <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 1009 <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 1010 <span style="font-weight:bold;">font</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> 1011 } 1012 1013 <span style="color:#898887;">// Special selectors: HTML5 allows user defined tags</span> 1014 1015 header { 1016 flex { 1017 <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span><span style="color:#ca60ca;">;</span> 1018 } 1019 } 1020 </pre></body></html>