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