    /*
     * CSS Syntax Highlight Sample File (Complex)
     *
     * This file contains complex CSS syntax that can test unexpected situations.
     *
     * @author  Guo Yunhe guoyunhebrave@gmail.com
     * @date    2016-09-16
     */

    /* Comments with special content */

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

    /* Comments in special positions */

    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 url("{} $variable /* comment */");

    /* Without extra breaklines and spaces */

    pre.primary:hover.large:nth-child(2n-1){font-size:17px;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;
        }

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

    /* Special selectors: HTML5 allows user defined tags */

    header {
        flex {
            width: 300px;
        }
    }