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.
  */
 
 @import url("othersheet.css") screen, tv;
 
 body {
         font-size: 15pt;
         font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
         margin-top: 0px;                        /* yet another comment */
         margin-bottom: 0px;
         margin-left: 0px;
         margin-right: 0px;
 }
 
 .something
 {
         margin-right: 0px;
         color: #cdd;
         color: #AAFE04;
         color: rgb(10%,30%,43%);
         background: maroon;
 }
 
 a:hover {
 }
 
 #header,
 p.intro:first-letter,
 p:lang(nl),
 img[align="right"]
 {
         border: 1px solid Qt::red !important;
         -moz-border-radius: 15px; /* unknown properties render italic */
 }
 
 @media print {
 
         #header
         {
                 display: none;
         }
 
 }
 
 /*
 TODO: add more tests, e.g. media
 */
 
 
 .nice-look {
         font-variant-alternates: styleset(nice-style);
 }
 
 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;
         }
 }
 
 @counter-style thumbs {
         system: cyclic;
         symbols: "\1F44D";
         suffix: " ";
 }
 
 @font-face {
         font-family: "Open Sans";
         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;
 }
 
 @font-face {
         unknown: 2px;
         /* comments */
         font-family: "Bitstream Vera Serif Bold";
         src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
 }
 
 @viewport {
         zoom: 0.75;
         /* comments */
         min-zoom: 0.5;
         max-zoom: 0.9;
 }
 
 @viewport {
         orientation: landscape;
         /* comments */
         orientation: landscape;
 }
 
 @document url("https://www.example.com/") {
         h1 {
                 color: green;
         }
 }
 
 @supports (display: grid) {
         div {
                 display: grid;
         }
 }
 
 @media (max-width: 600px) {
         .sidebar {
                 display: none;
         }
 }
 
 @import url("fineprint.css") print;
 @import url(fineprint.css) print;
 @import url('bluish.css') speech;
 @import 'custom.css';
 @import url("chrome://communicator/skin/");
 @import "common.css" screen;
 @import url('landscape.css') screen and (orientation:landscape);
 
 @namespace url(http://www.w3.org/1999/xhtml);
 @namespace svg url(http://www.w3.org/2000/svg);
 
 @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 print {
         a:hover { color: red }
         /* comments */
         a:hover { color: red }
 }
 
 /**
  * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
  */
 
 #main p {
   color: #00ff00;
   width: 97%;
 
   .redbox {
     background-color: #ff0000;
     color: #000000;
   }
 }
 
 a {
   font-weight: bold;
   text-decoration: none;
   &:hover { text-decoration: underline; }
   body.firefox & { font-weight: normal; }
 }
 
 #main {
   color: black;
   a {
     font-weight: bold;
     &:hover { color: red; }
   }
 }
 
 #main {
   color: black;
   &-sidebar { border: 1px solid; }
 }
 
 .funky {
   font: {
     family: fantasy;
     size: 30em;
     weight: bold;
   }
 }
 
 .funky {
   font: 20px/24px fantasy {
     weight: bold;
   }
 }
 
 /* This comment is
  * several lines long.
  * since it uses the CSS comment syntax,
  * it will appear in the CSS output. */
 body { color: black; }
 
 // These comments are only one line long each.
 // They won't appear in the CSS output,
 // since they use the single-line comment syntax.
 a { color: green; }
 
 $version: "1.2.3";
 /* This CSS is generated by My Snazzy Framework version #{$version}. */
 
 $width: 5em;
 
 #main {
   width: $width;
 }
 
 #main {
   $width: 5em !global;
   width: $width;
 }
 
 #sidebar {
   width: $width;
 }
 
 @mixin firefox-message($selector) {
   body.firefox #{$selector}:before {
     content: "Hi, Firefox users!";
   }
 }
 
 @include firefox-message(".header");
 
 $map: (key1: value1, key2: value2, key3: value3);
 
 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);
 }
 
 $translucent-red: rgba(255, 0, 0, 0.5);
 p {
   color: opacify($translucent-red, 0.3);
   background-color: transparentize($translucent-red, 0.25);
 }
 
 $translucent-red: rgba(255, 0, 0, 0.5);
 $green: #00ff00;
 div {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
 }
 p {
   cursor: e + -resize;
 }
 p:before {
   content: "Foo " + Bar;
   font-family: sans- + "serif";
 }
 p:before {
   content: "I ate #{5 + 10} pies!";
 }
 $value: null;
 p:before {
   content: "I ate #{$value} pies!";
 }
 p {
   width: 1em + (2em * 3);
 }
 p {
   color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
 }
 $name: foo;
 $attr: border;
 p.#{$name} {
   #{$attr}-color: blue;
 }
 p {
   $font-size: 12px;
   $line-height: 30px;
   font: #{$font-size}/#{$line-height};
 }
 
 .foo.bar .baz.bang, .bip.qux {
     $selector: &;
 }
 
 @mixin does-parent-exist {
   @if & {
     &:hover {
       color: red;
     }
   } @else {
     a {
       color: red;
     }
   }
 }
 
 $content: "First content";
 $content: "Second content?" !default;
 $new_content: "First time reference" !default;
 
 #main {
   content: $content;
   new-content: $new_content;
 }
 
 @import "foo.css";
 @import "foo" screen;
 @import "http://foo.com/bar";
 @import url(foo);
 
 $family: unquote("Droid+Sans");
 @import url("http://fonts.googleapis.com/css?family=#{$family}");
 #main {
   @import "example";
 }
 
 .sidebar {
   width: 300px;
   @media screen and (orientation: landscape) {
     width: 500px;
   }
 }
 @media screen {
   .sidebar {
     @media (orientation: landscape) {
       width: 500px;
     }
   }
 }
 
 $media: screen;
 $feature: -webkit-min-device-pixel-ratio;
 $value: 1.5;
 
 @media #{$media} and ($feature: $value) {
   .sidebar {
     width: 500px;
   }
 }
 
 .error {
   border: 1px #f00;
   background-color: #fdd;
 }
 .seriousError {
   @extend .error;
   border-width: 3px;
 }
 
 .hoverlink {
   @extend a:hover;
 }
 a:hover {
   text-decoration: underline;
 }
 
 #context a%extreme a %extreme {
   color: blue;
   font-weight: bold;
   font-size: 2em;
 }
 .notice {
   @extend %extreme;
 }
 
 a.important {
   @extend .notice !optional;
 }
 
 @media print {
   .page {
     width: 8in;
     @at-root (without: media) {
       color: red;
     }
   }
 }
 
 @debug 10em + 12em;
 
 @mixin adjust-location($x, $y) {
   @if unitless($x) {
     @warn "Assuming #{$x} to be in pixels";
     $x: 1px * $x;
   }
   @if unitless($y) {
     @warn "Assuming #{$y} to be in pixels";
     $y: 1px * $y;
   }
   position: relative; left: $x; top: $y;
 }
 
 @mixin adjust-location($x, $y) {
   @if unitless($x) {
     @error "$x may not be unitless, was #{$x}.";
   }
   @if unitless($y) {
     @error "$y may not be unitless, was #{$y}.";
   }
   position: relative; left: $x; top: $y;
 }
 
 p {
   @if 1 + 1 == 2 { border: 1px solid;  }
   @if 5 < 3      { border: 2px dotted; }
   @if null       { border: 3px double; }
 }
 
 $type: monster;
 p {
   @if $type == ocean {
     color: blue;
   } @else if $type == matador {
     color: red;
   } @else if $type == monster {
     color: green;
   } @else {
     color: black;
   }
 }
 
 @for $i from 1 through 3 {
   .item-#{$i} { width: 2em * $i; }
 }
 
 @each $animal in puma, sea-slug, egret, salamander {
   .#{$animal}-icon {
     background-image: url('/images/#{$animal}.png');
   }
 }
 
 @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;
   }
 }
 
 $i: 6;
 @while $i > 0 {
   .item-#{$i} { width: 2em * $i; }
   $i: $i - 2;
 }
 
 @mixin large-text {
   font: {
     family: Arial;
     size: 20px;
     weight: bold;
   }
   color: #ff0000;
 }
 
 @mixin clearfix {
   display: inline-block;
   &:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   }
   * html & { height: 1px }
 }
 
 .page-title {
   @include large-text;
   padding: 4px;
   margin-top: 10px;
 }
 
 @mixin compound {
   @include highlighted-background;
   @include header-text;
 }
 
 @mixin highlighted-background { background-color: #fc0; }
 @mixin header-text { font-size: 20px; }
 
 @mixin sexy-border($color, $width) {
   border: {
     color: $color;
     width: $width;
     style: dashed;
   }
 }
 
 p { @include sexy-border(blue, 1in); }
 
 p { @include sexy-border($color: blue); }
 h1 { @include sexy-border($color: blue, $width: 2in); }
 
 
 @mixin colors($text, $background, $border) {
   color: $text;
   background-color: $background;
   border-color: $border;
 }
 
 $values: #ff0000, #00ff00, #0000ff;
 .primary {
   @include colors($values...);
 }
 
 $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
 .secondary {
   @include colors($value-map...);
 }
 
 @mixin apply-to-ie6-only {
   * html {
     @content;
   }
 }
 @include apply-to-ie6-only {
   #logo {
     background-image: url(/logo.gif);
   }
 }
 
 $grid-width: 40px;
 $gutter-width: 10px;
 
 @function grid-width($n) {
   @return $n * $grid-width + ($n - 1) * $gutter-width;
 }
 
 #sidebar { width: grid-width(5); }
 
 @mixin unify-parent($child) {
   @at-root #{selector-unify(&, $child)} {
     @content;
   }
 }
 
 :root {
   --font-family-sans-serif: #{inspect($font-family-sans-serif)};
   --font-family-monospace: #{inspect($font-family-monospace)};
 }
 
 div {
   background-image: url("/icons/#{$name}.svg");
   font: #{"string"};
 
 .icon-#{$name} {
   position: absolute;
   #{$top-or-bottom}: 0;
   -#{$prefix}-#{$property}: $value;
   .icon-#{$name} {
     position: absolute;
     #{$top-or-bottom}: 0;
     -#{$prefix}-#{$property}-image: $value
   }
 }
 
 /*
  * SCSS Syntax Highlight Sample File (Standard)
  *
  * This file contains most SCSS syntax, CSS3 properties, advanced code structure.
  * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.
  *
  * @author  Guo Yunhe guoyunhebrave@gmail.com
  * @date    2016-09-15
  */
 
 /*
  * Block comment
  *
  * Alert keywords:
  * TODO BUG FIXME
  */
 
 @charset "UTF-8";
 
 @import "mixins/button";
 
 // Variable define
 
 $image-path:            "../../static/images";
 $default-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
 
 // Mixins
 
 @mixin border-radius($radius) {
   -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
       -ms-border-radius: $radius;
           border-radius: $radius;
 }
 
 .box { @include border-radius(10px); }
 
 // 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;
                 }
             }
         }
     }
 }
 
 // Extend and inheritance
 
 .message {
     border: $border-light;
     background-color: #f0f0f0;
 }
 
 .message-danger {
     @extend .message;
 }
 
 
 // Control structures
 
 @mixin does-parent-exist {
     @if & {
         &:hover {
             color: red;
         }
     } @else {
         a {
             color: red;
         }
     }
 }
 
 
 // Operators
 
 .container { width: 100%; }
 
 article[role="main"] {
   float: left;
   width: 600px / 960px * 100%;
 }
 
 aside[role="complementary"] {
   float: right;
   width: 300px / 960px * 100%;
 }
 
 
 // Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html
 
 $color1: hsl(120deg, 100%, 50%);
 $color2: rgb($red, $green, blue($color1));
 $color3: mix($color1, $color2, [$weight]);
 
 
 // Properties
 
 html, body {
     font-family: "Droid Sans", Arial, sans-serif;
     font-size: 11pt;
     line-height: 1.5em;
     max-width: 300px + $page-width - $gap / 2;
     background: $bg_color;
     text-shadow: 0 0 2px rgba(0,0,0, $transparence);
     box-sizing: border-box;
 }
 
 
 // Selectors
 
 blockquote {
     margin: 0;
 }
 
 header #logo {
     width: 100px;
 }
 
 div#footer .link {
     color: blue;
 }
 
 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;
 }
 
 
 // Media Queries
 
 @media print {
     .container {
         width: 100%;
     }
 }
 
 @media screen and (min-width: 768px) {
     .container {
         width: 600px;
     }
 }
 
 @media screen and (min-width: 768px) and (max-width: 960px) {
     .container {
         width: 720px;
     }
 }
 
 
 // Fontface
 
 @font-face {
     font-family: MyHelvetica;
     src: local("Helvetica Neue Bold"),
         local("HelveticaNeue-Bold"),
         url(MgOpenModernaBold.ttf);
     font-weight: bold;
 }
 
 // Animation (Keyframes)
 
 @keyframes slidein {
     from {
         margin-left: 100%;
         width: 300%;
     }
 
     to {
         margin-left: 0%;
         width: 100%;
     }
 }
 
 /*
  * 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;
     }
 }