    /*
     * 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
     */

    // Comments with special content

    // .class-selector #id "string" 'comment' // comment {} [] () /* comment */ text

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

    // Comments in special positions

    $color: black /* comment here */;

    header/* comment here */.active /* comment here */ {
        /* comment here */ color : /* comment here */ blue/* comment here */;
        font-family: Arial /* comment here */,
            "Droid Sans", /* comment here */
            sans-serif/* comment here */;
    }

    @media screen /* comment here */ and (max-width: 300px /* comment here */) /* comment here */ {/* comment here */}

    // Strings with special content

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

    // Without extra breaklines and spaces

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

    // With unnecessary breaklines and spaces

    blockquote .ref
        {
                 flex : 0 1 30%;
            flex-wrap : wrap;
        }

    .sidebar {
      width: 300px; }
      @media screen and (orientation: landscape) {
        .sidebar {
          width: 500px; } }

    // Variable interpolation: #{}

    $name: foo;
    $attr: border;
    p.#{$name} {
        #{$attr}-color: blue;
    }

    p {
        $font-size: 12px;
        $line-height: 30px;
        font: #{$font-size}/#{$line-height};
    }

    // Special selectors: HTML5 allows user defined tags

    header {
        flex {
            width: 300px;
        }
    }