<beginfold id='3'>/*</beginfold id='3'>
 * SCSS Syntax Highlight Sample File (Complex)
 *
 * This file contains complex SCSS syntax that can test unexpected situations.
 * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
 *
 * @author  Guo Yunhe guoyunhebrave@gmail.com
 * @date    2016-09-16
 <endfold id='3'>*/</endfold id='3'>


<beginfold id='4'>//</beginfold id='4'> Comments with special content

<beginfold id='4'>//</beginfold id='4'> .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text

<beginfold id='3'>/*</beginfold id='3'>
 * .class-selector #id "string" 'comment' // comment {} [] ()  /* comment
 * TODO BUG DEBUG
 * body {
 *    margin: 0 !important;
 * }
 <endfold id='3'>*/</endfold id='3'>

<beginfold id='4'>//</beginfold id='4'> Comments in special positions

$color: black <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>;

header<beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>.active <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'> <beginfold id='1'>{</beginfold id='1'>
    <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'> color : <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'> blue<beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>;
    font-family: Arial <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>,
        "Droid Sans", <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>
        sans-serif<beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>;
<endfold id='1'>}</endfold id='1'>

@media screen <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'> and (max-width: 300px <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'>) <beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'> <beginfold id='5'>{</beginfold id='5'><beginfold id='3'>/*</beginfold id='3'> comment here <endfold id='3'>*/</endfold id='3'><endfold id='5'>}</endfold id='5'>


<beginfold id='4'>//</beginfold id='4'> Strings with special content

@import "{} $variable /* comment */";
@import "{}";

<beginfold id='4'>//</beginfold id='4'> Without extra breaklines and spaces

pre.primary:hover.large:nth-child(2n-1)<beginfold id='1'>{</beginfold id='1'>font-size:$default-font-size;font-family:"Noto Sans";-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.3)<endfold id='1'>}</endfold id='1'>

<beginfold id='4'>//</beginfold id='4'> With unnecessary breaklines and spaces

blockquote .ref
    <beginfold id='1'>{</beginfold id='1'>
             flex : 0 1 30%;
        flex-wrap : wrap;
    <endfold id='1'>}</endfold id='1'>

.sidebar <beginfold id='1'>{</beginfold id='1'>
  width: 300px; <endfold id='1'>}</endfold id='1'>
  @media screen and (orientation: landscape) <beginfold id='5'>{</beginfold id='5'>
    .sidebar <beginfold id='1'>{</beginfold id='1'>
      width: 500px; <endfold id='1'>}</endfold id='1'> <endfold id='5'>}</endfold id='5'>

<beginfold id='4'>//</beginfold id='4'> Variable interpolation: #{}

$name: foo;
$attr: border;
p.#<beginfold id='1'>{</beginfold id='1'>$name} {
    #<beginfold id='1'>{</beginfold id='1'>$attr}-color: blue;
<endfold id='1'>}</endfold id='1'>

p <beginfold id='1'>{</beginfold id='1'>
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
<endfold id='1'>}</endfold id='1'>

<beginfold id='4'>//</beginfold id='4'> Special selectors: HTML5 allows user defined tags

header <beginfold id='1'>{</beginfold id='1'>
    flex {
        width: 300px;
    <endfold id='1'>}</endfold id='1'>
<endfold id='1'>}</endfold id='1'>
