<Comment>/*</Comment><br/>
<Comment> * SCSS Syntax Highlight Sample File (Complex)</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * This file contains complex SCSS syntax that can test unexpected situations.</Comment><br/>
<Comment> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</Comment><br/>
<Comment> *</Comment><br/>
<Comment> * @author  Guo Yunhe guoyunhebrave@gmail.com</Comment><br/>
<Comment> * @date    2016-09-16</Comment><br/>
<Comment> */</Comment><br/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Comments with special content</Comment><br/>
<Normal Text></Normal Text><br/>
<Comment>// .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text</Comment><br/>
<Normal Text></Normal Text><br/>
<Comment>/*</Comment><br/>
<Comment> * .class-selector #id "string" 'comment' // comment {} [] ()  /* comment</Comment><br/>
<Comment> * </Comment><Alert Level 2>TODO</Alert Level 2><Comment> </Comment><Alert Level 2>BUG</Alert Level 2><Comment> DEBUG</Comment><br/>
<Comment> * body {</Comment><br/>
<Comment> *    margin: 0 !important;</Comment><br/>
<Comment> * }</Comment><br/>
<Comment> */</Comment><br/>
<Normal Text></Normal Text><br/>
<Comment>// Comments in special positions</Comment><br/>
<Normal Text></Normal Text><br/>
<Variable>$color</Variable><Normal Text>: </Normal Text><Color>black</Color><Normal Text> </Normal Text><Comment>/* comment here */</Comment><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<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/>
<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/>
<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: Arial </Normal Text><Comment>/* comment here */</Comment><Separator Symbol>,</Separator Symbol><br/>
<Normal Text>        </Normal Text><String>"Droid Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Comment>/* comment here */</Comment><br/>
<Normal Text>        </Normal Text><Value>sans-serif</Value><Comment>/* comment here */</Comment><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<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/>
<Normal Text></Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Strings with special content</Comment><br/>
<Normal Text></Normal Text><br/>
<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"{} $variable /* comment */"</String><Separator Symbol>;</Separator Symbol><br/>
<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"{}"</String><Separator Symbol>;</Separator Symbol><br/>
<Normal Text></Normal Text><br/>
<Comment>// Without extra breaklines and spaces</Comment><br/>
<Normal Text></Normal Text><br/>
<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/>
<Normal Text></Normal Text><br/>
<Comment>// With unnecessary breaklines and spaces</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>blockquote</Selector Tag><Normal Text> </Normal Text><Selector Class>.ref</Selector Class><br/>
<Normal Text>    {</Normal Text><br/>
<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/>
<Normal Text>        </Normal Text><Property>flex-wrap</Property><Unknown Property> </Unknown Property><Normal Text>: wrap</Normal Text><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
<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/>
<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/>
<Normal Text>    </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
<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/>
<Normal Text></Normal Text><br/>
<Comment>// Variable interpolation: #{}</Comment><br/>
<Normal Text></Normal Text><br/>
<Variable>$name</Variable><Normal Text>: foo</Normal Text><Separator Symbol>;</Separator Symbol><br/>
<Variable>$attr</Variable><Normal Text>: border</Normal Text><Separator Symbol>;</Separator Symbol><br/>
<Selector Tag>p</Selector Tag><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
<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/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<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/>
<Normal Text>}</Normal Text><br/>
<Normal Text></Normal Text><br/>
<Comment>// Special selectors: HTML5 allows user defined tags</Comment><br/>
<Normal Text></Normal Text><br/>
<Selector Tag>header</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>    </Normal Text><Selector Tag>flex</Selector Tag><Normal Text> {</Normal Text><br/>
<Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
<Normal Text>    }</Normal Text><br/>
<Normal Text>}</Normal Text><br/>
