highlight.scss

    /**
     * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.
     */

    /* Properties */

    body {
    	font-size: 15pt;
    	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
    	margin-top: 0px;			/* yet another comment */
    	margin-bottom: 0px;
    	// this is no comment, it's just broken!
    	background-color: hsl(0, 0%, calc(95% - 3%));
        font-family: "Droid Sans", Arial, sans-serif;
        font-size: 11pt;
        line-height: 1.5em;
        background: #fff000;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
        box-sizing: border-box;
    	font-variant-alternates: styleset(nice-style);
    }

    /* Selectors */

    body, blockquote {
        margin: 0;
    }

    header #logo {
        width: 100px;
    }

    div#footer .link {
        color: blue;
    }

    .something
    {
    	margin-right: 0px;
    	color: #cdd;
    	color: #AAFE04;
    	color: rgb(10%,30%,43%);
    	background: maroon;
    }

    sidebar #subscribe .subscribe_form input[type="text"] {
        font-size: 20px;
    }

    sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
        font-weight: bold;
    }

    input[value=text]
    input[value= text ]
    input[value= text i]
    input[value= "text" i]
    input[value=i]
    input[value= i] {
        font-size: 20px;
    }

    #header,
    a:hover,
    p.intro:first-letter,
    p:lang(nl),
    img[align="right"]
    {
    	border: 1px solid Qt::red !important;
    	-moz-border-radius: 15px; /* unknown properties render italic */
    }

    .nice-look {
    }

    ul {
    	list-style: thumbs;
    }

    /* SVG <a> */
    svg|a {}

    /* XHTML and SVG <a> */
    *|a {}

    *{}
    .class{}
    #id{}
    :hover{}
    :lang(fr){}
    E{}
    E F{}
    E>F{}
    E > F{}
    E~F{}
    E ~ F{}
    E:first-child{}
    E:visited{}
    E::after{}
    E:lang(c){}
    E:lang(fr-ca){}
    E + F{}
    E+F{}
    E[foo]{}
    E[foo=warning]{}
    E[foo="warning"]{}
    E[foo~="warning"]{}
    E[foo^="warning"]{}
    E[foo$="warning"]{}
    E[foo*="warning"]{}
    E[lang|="en"]{}
    DIV.warning{}
    DIV .warning{}
    E#myid{}
    E #myid{}
    E,E{}
    E, E{}
    E ,E{}
    E , E{}

    p:nth-child(2) {
    	background: red;
    }

    /* Elements that are not <div> or <span> elements */
    body :not(div):not(span) {
    	font-weight: bold;
    }

    /* Elements that are not `.crazy` or `.fancy` */
    /* Note that this syntax is not well supported yet. */
    body :not(.crazy, .fancy) {
    	font-family: sans-serif;
    }

    :nth-child(odd) { color: lime; }
    :nth-child(even) { color: lime; }
    :nth-child(4) { color: lime; }
    :nth-child(4n) { color: lime; }
    :nth-child(3n+4) { color: lime; }
    :nth-child(-n+3) { color: lime; }
    :nth-child(n+8):nth-child(-n+15) { color: lime; }

    .first span:nth-child(2n+1),
    .second span:nth-child(2n+1),
    .third span:nth-of-type(2n+1) {
    	background-color: lime;
    	unknown-property: lime;
    }

    :root{
    	--foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */
    }

    :root,
    :root:lang(en) {--external-link: "external link";}
    :root:lang(de) {--external-link: "externer Link";}

    a[href^="http"]::after {content: " (" var(--external-link) ")"}

    one   { --foo: 10px; }
    two   { --bar: calc(var(--foo) + 10px); }
    three { --foo: calc(var(--bar) + 10px); }
    .foo {
    	--gap: 20;
    	margin-top: var(--gap)px; /*20 px*/
    	margin-top: calc(var(--gap) * 1px); /*20px*/
    }

    foo {
    	width: calc(50% -8px); /* invalid */
    	width: calc(50%- 8px); /* invalid */
    	width: calc(50% +8px); /* invalid */
    	width: calc(50%+ 8px); /* invalid */
    	width: calc(2px -var(--a)); /* invalid */
    	width: calc(50%*-8px);
    	width: calc(50% - 8px);
    	width: calc(50% + -8px);
    	width: calc(50% +(8px));
    	width: calc(2px -(var(--a)));
    }

    sweet-alert input:focus::-moz-placeholder {
    	-webkit-transition: opacity 0.3s 0.03s ease;
    	transition: opacity 0.3s 0.03s ease;
    	opacity: 0.5;
    }

    @font-feature-values Font One {
    	@styleset {
    		nice-style: 12;
    	}
    }

    @font-feature-values Font Two {
    	@styleset {
    		nice-style: 4;
    	}
    }

    @font-palette-values --identifier {
      font-family: Bixa;
    }

    @counter-style thumbs {
    	system: cyclic;
    	symbols: "\1F44D";
    	suffix: " ";
    }

    @font-face {
    	font-family: "Open Sans";
    	/* comments */
    	unknown: 2px;
    	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
    	url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
    }

    @page {
    	margin: 1cm;
    }

    @page :first {
    	margin: 2cm;
    	/* comments */
    	marks: crop cross;
    }

    @page :unknown {
    	margin: 2cm;
    }

    @document url("https://www.example.com/") {
    	h1 {
    		color: green;
    	}
    }

    @charset "UTF-8";

    @import 'custom.css';
    @import "common.css" screen;
    @import url("fineprint.css") print;
    @import url(fineprint.css) print;
    @import url('bluish.css') speech;
    @import url("chrome://communicator/skin/");
    @import url('landscape.css') screen and (orientation:landscape);
    @import url("othersheet.css") screen, print;

    @namespace url(http://www.w3.org/1999/xhtml);
    @namespace svg url(http://www.w3.org/2000/svg);

    /* Animation (Keyframes) */

    @keyframes important1 {
    	from { margin-top: 50px; }
    	50%  { margin-top: 150px !important; } /* ignored */
    	to   { margin-top: 100px; }
    }

    @keyframes important2 {
    	from { margin-top: 50px;
    		margin-bottom: 100px; }
    	to   { margin-top: 150px !important; /* ignored */
    		margin-bottom: 50px; }
    }

    @keyframes slidein {
    	from {
    		margin-left: 100%;
    		width: 300%;
    	}

    	to {
    		margin-left: 0%;
    		width: 100%;
    	}
    }

    /* Media Queries */

    @media print {
        .container {
            width: 100%;
        }
    	a:hover { color: red }
    	/* comments */
    	a:hover { color: red }

    	#header
    	{
    		display: none;
    	}
    }

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

    @media screen and (min-width: 768px) and (max-width: 960px) {
        .container {
            width: 720px;
        }
    }

    @media (max-width: 600px) {
    	.sidebar {
    		display: none;
    	}
    }

    @media print {
    }

    @media (height > 600px) {
      body {
        line-height: 1.4;
      }
    }

    @media (400px <= width <= 700px) {
      body {
        line-height: 1.4;
      }
    }

    @supports (display: grid) {
    	div {
    		display: grid;
    	}
    }

    @supports font-tech(color-COLRv1) {
      div {}
    }

    @supports not (not (transform-origin: 2px)) {
      div {}
    }

    @supports (display: grid) and (not (display: inline-grid)) {
      div {}
    }

    /*
     * CSS Syntax Highlight Sample File (Standard)
     *
     * This file contains most CSS syntax, CSS3 properties, @media, @font-face and
     * @keyframes annotations.
     *
     * @author  Guo Yunhe guoyunhebrave@gmail.com
     * @date    2016-09-16
     */

    /*
     * Block comment
     *
     * Alert keywords:
     * TODO BUG FIXME
     */

    /* Region markers */

    /*BEGIN Comment */

    /*END Comment */

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

    /* CSS Nesting */

    header {
        .abc {
            width: 300px;
        }
        width: 300px;
        & width:hover {
            width: 300px;
        }
        width: 300px;
    }

    /**
     * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
     */
    // These comments are only one line long each.
    // They won't appear in the CSS output,
    // since they use the single-line comment syntax.

    #sidebar { width: grid-width(5); }

    #main {
      content: $content;
      new-content: $new_content;
    }

    #main {
      $width: 5em !global;
      width: $width;
    }

    #main {
      @import "example";
    }

    #main {
      color: black;
      &-sidebar { border: 1px solid; }
    }

    #main p {
      color: #00ff00;
      width: 97%;

      .redbox {
        background-color: #ff0000;
        color: #000000;
      }
    }

    #main {
      color: black;
      a {
        font-weight: bold;
        &:hover { color: red; }
      }
    }

    .sidebar {
      float: left;
      margin-left: pow(4, 3) * 1px;
    }

    .banner {
      background-color: $primary-color;
      color: scale-color($primary-color, $lightness: +40%);
    }

    .micro {
      width: sum(50px, 30px, 100px);
      width: min($widths...);
    }

    a.funky:hover {
      font: 20px/24px fantasy {
        weight: bold;
      }
    }

    .foo.bar .baz.bang, .bip.qux {
        $selector: &;
    }

    ul, ol {
      text-align: left;

      & & {
        padding: {
          bottom: 0;
          left: 0;
        }
      }

      font-size: scale-below(20px, 16px);
      border-radius: $border-radius;
      box-shadow: $box-shadow;
    }

    ul li {
      $padding: 16px;
      padding-left: $padding;
      [dir=rtl] & {
        padding: {
          left: 0;
          right: $padding;
        }
      }
    }

    div {
      background-image: url("/icons/#{$name}.svg");
      font: #{"string"};
    }

    p {
      font: 10px/8px;             // Plain CSS, no division
      $width: 1000px;
      width: $width/2;            // Uses a variable, does division
      width: round(1.5)/2;        // Uses a function, does division
      height: (500px/2);          // Uses parentheses, does division
      margin-left: 5px + 8px/2px; // Uses +, does division
      font: (italic bold 10px/8px); // In a list, parentheses don't count
    }

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

    p {
      color: #010203 + #040506;
      color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
    }

    p {
      color: opacify($translucent-red, 0.3);
      background-color: transparentize($translucent-red, 0.25);
    }

    div {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
    }

    p {
      cursor: e + -resize;
    }

    p {
      width: 1em + (2em * 3);
      width: #{$n}px;
    }

    p {
      color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
    }

    :root {
      --font-family-sans-serif: #{inspect($font-family-sans-serif)};
      --font-family-monospace: #{inspect($font-family-monospace)};
    }

    p:before {
      font-family: sans- + "serif";
      content: "Foo " + Bar;
      content: "I ate #{5 + 10} pies!";
      content: "I ate #{$value} pies!";
    }

    a {
      font-weight: bold;
      text-decoration: none;
      &:hover { text-decoration: underline; }
      body.firefox & { font-weight: normal; }
    }

    #context a%extreme a %extreme {
      color: blue;
      font-weight: bold;
      font-size: 2em;
    }

    %strong-alert:hover {
      color: red;
    }
    .alert:hover, %strong-alert {
      font-weight: bold;
    }

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

    p {
        background: {
            color: red;
        }
        background-#{prop}: red;
        #{prop}-color: red;

        #a#{""}c .a#{""}c a#{""}c {
        }
    }

    .icon-#{$name} {
      position: absolute;
      #{$top-or-bottom}: 0;
      -#{$prefix}-#{$property}: $value;
      .icon-#{$name} {
        position: absolute;
        #{$top-or-bottom}: 0;
        -#{$prefix}-#{$property}-image: $value
      }
    }

    @mixin firefox-message($selector) {
      body.firefox #{$selector}:before {
        content: "Hi, Firefox users!";
      }
    }

    @mixin clearfix {
      display: inline-block;
      &:after {
        content: ".";
        display: block;
      }
      * html & { height: 1px }
    }

    @mixin apply-to-ie6-only {
      * html {
        @content;
      }
    }

    @mixin highlighted-background { background-color: #fc0; }

    @mixin sexy-border($color, $width) {
      border: {
        color: $color;
        width: $width;
        style: dashed;
      }
      color: #ff0000;
    }

    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
         -moz-border-radius: $radius;
          -ms-border-radius: $radius;
              border-radius: $radius;
    }

    @mixin define-emoji($name, $glyph) {
      span.emoji-#{$name} {
        font-family: IconFont;
      }
    }

    @mixin styles {
      code {
        border-radius: $-border-radius;
        box-shadow: -box-shadow();
      }
    }

    @mixin rtl($property, $ltr-value, $rtl-value) {
      #{$property}: $ltr-value;

      [dir=rtl] & {
        #{$property}: $rtl-value;
      }
    }

    @mixin replace-text($image, $x: 50%, $y: 50%) {
      text-indent: -99999em;
      overflow: hidden;
      text-align: left;

      background: {
        image: $image;
        repeat: no-repeat;
        position: $x $y;
      }
    }

    @mixin btn($args...) {
      @warn "The btn() mixin is deprecated. Include button() instead.";
      @import url("http://fonts.googleapis.com/css?family=#{$family}");
      @include button($args...);
    }

    @mixin hover {
      &:not([disabled]):hover {
        @content;
      }
    }

    @mixin adjust-location($x, $y) {
      @if unitless($x) {
        @error "$x may not be unitless, was #{$x}.";
        @warn "Assuming #{$x} to be in pixels";
        $x: 1px * $x;
      }
      @if unitless($y) {
        @error "$y may not be unitless, was #{$y}.";
        @warn "Assuming #{$y} to be in pixels";
        $y: 1px * $y;
      }
      position: relative; left: $x; top: $y;
    }

    @mixin avatar($size, $circle: false) {
      width: $size;
      height: $size;

      @if $circle != 0 {
        border-radius: math.div($size, 2);
      }
    }

    @mixin theme-colors($light-theme: true) {
      @if $light-theme {
        background-color: $light-background;
        color: $light-text;
      } @else {
        background-color: $dark-background;
        color: $dark-text;
      }
    }

    @mixin configure($black: null, $border-radius: null, $box-shadow: null) {
      @if $black {
        $-black: $black !global;
      }
      @if $border-radius {
        $-border-radius: $border-radius !global;
      }
    }

    @mixin does-parent-exist {
        @if & {
            &:hover {
                color: red;
            }
        } @else {
            a {
                color: red;
            }
        }
    }

    @mixin order($height, $selectors...) {
      @for $i from 0 to length($selectors) {
        #{nth($selectors, $i + 1)} {
          position: absolute;
          height: $height;
          margin-top: $i * $height;
        }
      }
    }

    @mixin syntax-colors($args...) {
      @debug meta.keywords($args);
      // (string: #080, comment: #800, variable: #60b)

      @each $name, $color in meta.keywords($args) {
        pre span.stx-#{$name} {
          color: $color;
        }
      }
    }

    @mixin media($types...) {
      @each $type in $types {
        @media #{$type} {
          @content($type);
        }
      }
    }

    @mixin reflexive-position($property, $value) {
      @if $property != left and $property != right {
        @error "Property #{$property} must be either left or right.";
      }

      $left-value: if($property == right, initial, $value);
      $right-value: if($property == right, $value, initial);

      left: $left-value;
      right: $right-value;
      [dir=rtl] & {
        left: $right-value;
        right: $left-value;
      }
    }

    @mixin prefix($property, $value, $prefixes) {
      @each $prefix in $prefixes {
        @if not index($known-prefixes, $prefix) {
          @warn "Unknown prefix #{$prefix}.";
        }

        -#{$prefix}-#{$property}: $value;
      }
      #{$property}: $value;
    }

    @mixin inset-divider-offset($offset, $padding) {
      $divider-offset: (2 * $padding) + $offset;
      @debug "divider offset: #{$divider-offset}";

      margin-left: $divider-offset;
      width: calc(100% - #{$divider-offset});
    }

    @mixin sticky-position {
      position: fixed;
      @supports (position: sticky) {
        position: sticky;
      }
    }

    @at-root (without: media) {
        color: #111;
    }
    @at-root (with: rule) {
        font-size: 1.2em;
    }

    @mixin unify-parent($child) {
      @at-root #{selector.unify(&, $child)} {
        @content;
      }
      @at-root #{selector-unify(&, $child)} {
        @content;
      }
    }

    @media print {
      .page {
        width: 8in;
        @at-root (without: media) {
          color: red;
        }
      }
    }

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

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

    @media (min-width: $layout-breakpoint-small) {
      .hide-extra-small {
        display: none;
      }
    }

    @media (hover: hover) {
      .button:hover {
        border: 2px solid black;

        @media (color) {
          border-color: #036;
        }
      }
    }

    @media #{$media} and ($feature: $value) {
      .sidebar {
        width: 500px;
      }
    }

    @extend .error;

    .hoverlink {
      @extend a:hover;
      @extend %extreme;
      @extend .message;
      @extend .notice !optional;
      border-width: 3px;
    }

    .error {
      border: 1px #f00;
      background-color: #fdd;

      &--serious {
        @extend .error;
        border-width: 3px;
      }
    }

    p {
      @if 1 + 1 == 2 { border: 1px solid;  }
      @if 5 < 3      { border: 2px dotted; }
      @if null       { border: 3px double; }
    }

    p {
      @if $type == ocean {
        color: blue;
      } @else if $type == matador {
        color: red;
      } @else if $type == monster {
        color: green;
      } @else {
        color: black;
      }
    }

    @each $animal in puma, sea-slug, egret, salamander {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
      }
    }

    @each $name, $glyph in $icons {
      .icon-#{$name}:before {
        display: inline-block;
        font-family: "Icon Font";
        content: $glyph;
      }
    }

    @each $size in $sizes {
      .icon-#{$size} {
        font-size: $size;
        height: $size;
        width: $size;
      }
    }

    @each $animal, $color, $cursor in (puma, black, default),
                                      (sea-slug, blue, pointer),
                                      (egret, white, move) {
      .#{$animal}-icon {
        background-image: url('/images/#{$animal}.png');
        border: 2px solid $color;
        cursor: $cursor;
      }
    }

    @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
      #{$header} {
        font-size: $size;
      }
    }

    @for $i from 1 through 3 {
      .item-#{$i} { width: 2em * $i; }
    }

    @for $i from 1 to 3 {
      ul:nth-child(3n + #{$i}) {
        background-color: lighten($base-color, $i * 5%);
      }
    }

    @while $i > 0 {
      .item-#{$i} { width: 2em * $i; }
      $i: $i - 2;
    }

    @include order(150px, $form-selectors...);
    @include order(150px, "input.name", "input.address", "input.zip");
    @include unify-parent("input") { }
    @include google-font("Droid Sans");
    @include library.styles;
    @include library.configure(
      $black: #222,
      $border-radius: 0.1rem
    );
    @include firefox-message(".header");
    @include apply-to-ie6-only {
      #logo {
        background-image: url(/logo.gif);
      }
    }

    @include media(screen, print) using ($type) {
      h1 {
        font-size: 40px;
        @if $type == print {
          font-family: Calluna;
        }
      }
    }

    p { @include sexy-border(blue, 1in); }
    h1 { @include sexy-border($color: blue, $width: 2in); }
    nav ul {
      @include corners.rounded;
      padding: 5px + corners.$radius;
      @include horizontal-list;
      @include rtl(float, left, right);
      @include hover {
        border-width: 2px;
      }
      @include replace-text(url("/images/mail.svg"), 0);
      @include square(100px, $radius: 4px);
      // Oops, we typo'd "webkit" as "wekbit"!
      @include prefix(transform, rotate(15deg), wekbit ms);
    }

    .primary {
      @include colors($value-map...);
    }
    .box { @include border-radius(10px); }

    .wrapper .field {
      @include unify-parent("input") {
        /* ... */
      }
      @include unify-parent("select") {
        /* ... */
      }
    }

    .banner {
      @include theme-colors($light-theme: true);
      body.dark & {
        @include theme-colors($light-theme: false);
      }
    }

    @function grid-width($n) {
      @return $n * $grid-width + ($n - 1) * $gutter-width;
    }

    @function scale-below($value, $base, $ratio: 1.618) {
      @while $value > $base {
        $value: math.div($value, $ratio);
      }
      @return $value;
    }

    /// If the user has configured `$-box-shadow`, returns their configured value.
    /// Otherwise returns a value derived from `$-black`.
    @function -box-shadow() {
      @return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
    }

    @function pow($base, $exponent) {
      $result: 1;
      @for $_ from 1 through $exponent {
        $result: $result * $base;
      }
      @return $result;
    }

    @function invert($color, $amount: 100%) {
      $inverse: change-color($color, $hue: hue($color) + 180);
      @return mix($inverse, $color, $amount);
    }

    @function sum($numbers...) {
      $sum: 0;
      @each $number in $numbers {
        $sum: $sum + $number;
      }
      @return $sum;
    }

    @function fg($args...) {
      @warn "The fg() function is deprecated. Call foreground() instead.";
      @return foreground($args...);
    }

    @function str-insert($string, $insert, $index) {
      // Avoid making new strings if we don't need to.
      @if string.length($string) == 0 {
        @return $insert;
      }

      $before: string.slice($string, 0, $index);
      $after: string.slice($string, $index);
      @return $before + $insert + $after;
    }

    // Variable define

    $image-path:            "../../static/images";
    $-text-color:    #333 !default; // Default can be overrided
    $default-font-size:     16px !default;
    $default-font-family:   Roboto, "Droid Sans", sans-serif;
    $default-font-weight:   400;
    $default-line-height:   $default-font-size * 1.8;
    $shadow-transparence:   0.25;
    $box-shadow:            0 0 3px rgba(0,0,0,$shadow-transparence);
    $page-width:            100rem; // kabab-case
    $gapOfArticle:          20px;   // camelCase
    $body_background_color: white;  // snake_case
    $-box-shadow: null;
    $sizes: 40px, 50px, 80px;
    $icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f");
    $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
    $map: (key1: value1, key2: value2, key3: value3);
    $icons:
      "eye" "\f112" 12px,
      "start" "\f12e" 16px,
      "stop" "\f12f" 10px;
    $known-prefixes: webkit, moz, ms, o;
    $primary-color: #036;
    $form-selectors: "input.name", "input.address", "input.zip" !default;
    $color1: hsl(120deg, 100%, 50%);
    $color2: rgb($red, $green, blue($color1));
    $color3: mix($color1, $color2, [$weight]);
    $translucent-red: rgba(255, 0, 0, 0.5);
    $name: foo;
    $attr: border;
    $media: screen;
    $feature: -webkit-min-device-pixel-ratio;
    $value: 1.5;
    $values: #ff0000, #00ff00, #0000ff;
    library.$color: blue;

    // Nesting

    #home-page {

        header {
            width: 80%;
            margin: 0 auto;

            .cover {
                @include border-radius(20px);
                max-width: 100%;

                &:hover {
                    background: #ffffff;
                }

                .like-button {
                    font-size: $default-font-size * 0.8;

                    @media (max-width: 300px) and (min-width: 200px) {
                        font-size: $default-font-size * 0.8;

                        .icon {
                            width: 20px;
                            height: 20px;
                        }
                    }

                    @media print {
                        display: none;
                    }
                }
            }
        }
    }

    @use "sass:selector";
    @use 'library';
    @use "src/corners" as *;
    @use "src/corners" as c;
    @use 'opinionated' with ($black: #333);
    @use 'library' with (
      $black: #222,
      $border-radius: 0.1rem
    );

    @forward "src/list" hide list-reset, $horizontal-list-gap;
    @forward "src/list" as list-*;
    @forward 'library' with (
        $black: #222 !default,
        $border-radius: 0.1rem !default
    );

    @import url("http://fonts.googleapis.com/css?family=#{$family}");
    @import 'foundation/code', 'foundation/lists';
    @import "http://fonts.googleapis.com/css?family=Droid+Sans";

    @error "Property #{$property} must be either left or right.";
    @error var(--abcd);

    @debug 10em + 12em;
    @debug library.$color;  //=> blue
    @debug radial-gradient($primary, $accent); // radial-gradient(#f2ece4, #e1d7d2)
    @debug -webkit-flex; // -webkit-flex

    @keyframes slide-in {
      from {
        margin-left: 100%;
        width: 300%;
      }

      #{$x}% {
        margin-left: 90%;
        width: 150%;
      }

      70% {
        margin-left: 90%;
        width: 150%;
      }
    }