Warning, /frameworks/syntax-highlighting/autotests/input/highlight.scss is written in an unsupported language. File is not indexed.

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