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