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