<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/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Comments with special content</Comment><br/>
<dsNormal></dsNormal><br/>
<Comment>// .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text</Comment><br/>
<dsNormal></dsNormal><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/>
<dsNormal></dsNormal><br/>
<Comment>// Comments in special positions</Comment><br/>
<dsNormal></dsNormal><br/>
<Variable>$color</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> black </Normal Text><Comment>/* comment here */</Comment><Normal Text>;</Normal Text><br/>
<dsNormal></dsNormal><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><Property>{</Property><br/>
<Normal Text>    </Normal Text><Comment>/* comment here */</Comment><Normal Text> </Normal Text><Property>color</Property><Normal Text> </Normal Text><Property>:</Property><Normal Text> </Normal Text><Comment>/* comment here */</Comment><Normal Text> </Normal Text><Value>blue</Value><Comment>/* comment here */</Comment><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>font-family:</Property><Normal Text> Arial </Normal Text><Comment>/* comment here */</Comment><Normal Text>,</Normal Text><br/>
<Normal Text>        </Normal Text><String>"Droid Sans"</String><Normal Text>, </Normal Text><Comment>/* comment here */</Comment><br/>
<Normal Text>        </Normal Text><Value>sans-serif</Value><Comment>/* comment here */</Comment><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Media>@media</Media><Normal Text> </Normal Text><Media>screen </Media><Comment>/* comment here */</Comment><Media> and (max-width: </Media><Value>300px</Value><Media> </Media><Comment>/* comment here */</Comment><Media>) </Media><Comment>/* comment here */</Comment><Media> {</Media><Comment>/* comment here */</Comment><Media>}</Media><br/>
<dsNormal></dsNormal><br/>
<dsNormal></dsNormal><br/>
<Comment>// Strings with special content</Comment><br/>
<dsNormal></dsNormal><br/>
<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"{} $variable /* comment */"</String><At Rule>;</At Rule><br/>
<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"{}"</String><At Rule>;</At Rule><br/>
<dsNormal></dsNormal><br/>
<Comment>// Without extra breaklines and spaces</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>pre</Normal Text><Selector Class>.primary</Selector Class><Selector Pseudo>:hover</Selector Pseudo><Selector Class>.large</Selector Class><Selector Pseudo>:nth-child</Selector Pseudo><Normal Text>(2n-1)</Normal Text><Property>{font-size:</Property><Variable>$default-font-size</Variable><Property>;font-family:</Property><String>"Noto Sans"</String><Property>;-webkit-box-shadow:</Property><Value>1px</Value><Normal Text> </Normal Text><Value>1px</Value><Normal Text> </Normal Text><Value>3px</Value><Normal Text> </Normal Text><Value>rgba(0</Value><Normal Text>,</Normal Text><Value>0</Value><Normal Text>,</Normal Text><Value>0</Value><Normal Text>,</Normal Text><Value>0.3)</Value><Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Comment>// With unnecessary breaklines and spaces</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>blockquote </Normal Text><Selector Class>.ref</Selector Class><br/>
<Normal Text>    </Normal Text><Property>{</Property><br/>
<Normal Text>             </Normal Text><Property>flex</Property><Normal Text> </Normal Text><Property>:</Property><Normal Text> </Normal Text><Value>0</Value><Normal Text> </Normal Text><Value>1</Value><Normal Text> </Normal Text><Value>30%</Value><Property>;</Property><br/>
<Normal Text>        </Normal Text><Property>flex-wrap</Property><Normal Text> </Normal Text><Property>:</Property><Normal Text> wrap</Normal Text><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Selector Class>.sidebar</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>  </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>300px</Value><Property>;</Property><Normal Text> </Normal Text><Property>}</Property><br/>
<Normal Text>  </Normal Text><Media>@media</Media><Normal Text> </Normal Text><Media>screen and (orientation: </Media><Value>landscape</Value><Media>) {</Media><br/>
<Normal Text>    </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> </Normal Text><Property>{</Property><br/>
<Normal Text>      </Normal Text><Property>width:</Property><Normal Text> </Normal Text><Value>500px</Value><Property>;</Property><Normal Text> </Normal Text><Property>}</Property><Normal Text> </Normal Text><Media>}</Media><br/>
<dsNormal></dsNormal><br/>
<Comment>// Variable interpolation: #{}</Comment><br/>
<dsNormal></dsNormal><br/>
<Variable>$name</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> foo;</Normal Text><br/>
<Variable>$attr</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> border;</Normal Text><br/>
<Normal Text>p</Normal Text><Selector Class>.</Selector Class><Normal Text>#</Normal Text><Property>{</Property><Variable>$name} {</Variable><br/>
<Normal Text>    #</Normal Text><Property>{</Property><Variable>$attr}-color</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> blue;</Normal Text><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Normal Text>p </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Variable>$font-size</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> 12px;</Normal Text><br/>
<Normal Text>    </Normal Text><Variable>$line-height</Variable><Selector Pseudo>:</Selector Pseudo><Normal Text> 30px;</Normal Text><br/>
<Normal Text>    </Normal Text><Property>font:</Property><Normal Text> #{</Normal Text><Variable>$font-size}/#{$line-height}</Variable><Property>;</Property><br/>
<Property>}</Property><br/>
<dsNormal></dsNormal><br/>
<Comment>// Special selectors: HTML5 allows user defined tags</Comment><br/>
<dsNormal></dsNormal><br/>
<Normal Text>header </Normal Text><Property>{</Property><br/>
<Normal Text>    </Normal Text><Property>flex</Property><Normal Text> </Normal Text><Error>{</Error><br/>
<Normal Text>        </Normal Text><Error>width</Error><Property>:</Property><Normal Text> </Normal Text><Value>300px</Value><Property>;</Property><br/>
<Normal Text>    </Normal Text><Property>}</Property><br/>
<Property>}</Property><br/>
