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); }
diff --git a/autotests/html/highlight.css.html b/autotests/html/highlight.css.html
index 8e96fbf..a3efe69 100644
--- a/autotests/html/highlight.css.html
+++ b/autotests/html/highlight.css.html
@@ -1,293 +1,293 @@
highlight.css
/**
* This is a pseudo CSS file to test Kate's CSS 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;
- // this is no comment, it's just broken!
+ // this is no comment, it's just broken!
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 }
}
diff --git a/autotests/html/highlight.scss.html b/autotests/html/highlight.scss.html
new file mode 100644
index 0000000..ec36e31
--- /dev/null
+++ b/autotests/html/highlight.scss.html
@@ -0,0 +1,700 @@
+
+
+
+highlight.scss
+
+
+/**
+ * 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); }
+
diff --git a/autotests/html/review128925-1.scss.html b/autotests/html/review128925-1.scss.html
index 322fba4..79db0f9 100644
--- a/autotests/html/review128925-1.scss.html
+++ b/autotests/html/review128925-1.scss.html
@@ -1,218 +1,218 @@
review128925-1.scss
/*
* 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-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: 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) {
+@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
-.box { @include border-radius(10px); }
+.box { @include border-radius(10px); }
// Nesting
#home-page {
header {
- width: 80%;
- margin: 0 auto;
+ width: 80%;
+ margin: 0 auto;
.cover {
- @include border-radius(20px);
- max-width: 100%;
+ @include border-radius(20px);
+ max-width: 100%;
&:hover {
- background: #ffffff;
+ background: #ffffff;
}
.like-button {
font-size: $default-font-size * 0.8;
- @media (max-width: 300px) and (min-width: 200px) {
+ @media (max-width: 300px) and (min-width: 200px) {
font-size: $default-font-size * 0.8;
.icon {
- width: 20px;
- height: 20px;
+ width: 20px;
+ height: 20px;
}
}
@media print {
display: none;
}
}
}
}
}
// Extend and inheritance
.message {
border: $border-light;
- background-color: #f0f0f0;
+ background-color: #f0f0f0;
}
.message-danger {
- @extend .message;
+ @extend .message;
}
// Control structures
-@mixin does-parent-exist {
+@mixin does-parent-exist {
@if & {
&:hover {
- color: red;
+ color: red;
}
} @else {
a {
- color: red;
+ color: red;
}
}
}
// Operators
-.container { width: 100%; }
+.container { width: 100%; }
-article[role="main"] {
+article[role="main"] {
float: left;
- width: 600px / 960px * 100%;
+ width: 600px / 960px * 100%;
}
-aside[role="complementary"] {
+aside[role="complementary"] {
float: right;
- width: 300px / 960px * 100%;
+ 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]);
+$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;
+ 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);
+ text-shadow: 0 0 2px rgba(0,0,0, $transparence);
box-sizing: border-box;
}
// Selectors
blockquote {
margin: 0;
}
header #logo {
- width: 100px;
+ width: 100px;
}
div#footer .link {
- color: blue;
+ color: blue;
}
-sidebar #subscribe .subscribe_form input[type="text"] {
- font-size: 20px;
+sidebar #subscribe .subscribe_form input[type="text"] {
+ font-size: 20px;
}
-sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
+sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
font-weight: bold;
}
// Media Queries
@media print {
.container {
- width: 100%;
+ width: 100%;
}
}
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 768px) {
.container {
- width: 600px;
+ width: 600px;
}
}
-@media screen and (min-width: 768px) and (max-width: 960px) {
+@media screen and (min-width: 768px) and (max-width: 960px) {
.container {
- width: 720px;
+ width: 720px;
}
}
// Fontface
@font-face {
font-family: MyHelvetica;
- src: local("Helvetica Neue Bold"),
- local("HelveticaNeue-Bold"),
- url(MgOpenModernaBold.ttf);
+ src: local("Helvetica Neue Bold"),
+ local("HelveticaNeue-Bold"),
+ url(MgOpenModernaBold.ttf);
font-weight: bold;
}
// Animation (Keyframes)
@keyframes slidein {
- from {
- margin-left: 100%;
- width: 300%;
+ from {
+ margin-left: 100%;
+ width: 300%;
}
- to {
- margin-left: 0%;
- width: 100%;
+ to {
+ margin-left: 0%;
+ width: 100%;
}
}
diff --git a/autotests/html/review128925-2.scss.html b/autotests/html/review128925-2.scss.html
index 8f7236d..3c6d98e 100644
--- a/autotests/html/review128925-2.scss.html
+++ b/autotests/html/review128925-2.scss.html
@@ -1,88 +1,88 @@
review128925-2.scss
/*
* 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 */;
+$color: black /* comment here */;
header/* comment here */.active /* comment here */ {
- /* comment here */ color : /* comment here */ blue/* 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 */}
+@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)}
+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 : 0 1 30%;
flex-wrap : wrap;
}
.sidebar {
- width: 300px; }
- @media screen and (orientation: landscape) {
+ width: 300px; }
+ @media screen and (orientation: landscape) {
.sidebar {
- width: 500px; } }
+ width: 500px; } }
// Variable interpolation: #{}
$name: foo;
$attr: border;
p.#{$name} {
- #{$attr}-color: blue;
+ #{$attr}-color: blue;
}
p {
- $font-size: 12px;
- $line-height: 30px;
+ $font-size: 12px;
+ $line-height: 30px;
font: #{$font-size}/#{$line-height};
}
// Special selectors: HTML5 allows user defined tags
header {
flex {
- width: 300px;
+ width: 300px;
}
}
diff --git a/autotests/input/highlight.scss b/autotests/input/highlight.scss
new file mode 100644
index 0000000..11a4028
--- /dev/null
+++ b/autotests/input/highlight.scss
@@ -0,0 +1,693 @@
+/**
+ * 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 */
+svg|a {}
+
+/* XHTML and SVG */
+*|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 or
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); }
diff --git a/autotests/reference/highlight.css.ref b/autotests/reference/highlight.css.ref
index 7abd710..280fa4f 100644
--- a/autotests/reference/highlight.css.ref
+++ b/autotests/reference/highlight.css.ref
@@ -1,286 +1,286 @@
/**
* This is a pseudo CSS file to test Kate's CSS 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;
- // this is no comment, it's just broken!
+ // this is no comment, it's just broken!
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 */
svg|a {}
/* XHTML and SVG */
*|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 or
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 }
}
diff --git a/autotests/reference/highlight.scss.ref b/autotests/reference/highlight.scss.ref
new file mode 100644
index 0000000..2b57a61
--- /dev/null
+++ b/autotests/reference/highlight.scss.ref
@@ -0,0 +1,693 @@
+/**
+ * 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 */
+svg|a {}
+
+/* XHTML and SVG */
+*|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 or
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); }
diff --git a/autotests/reference/review128925-1.scss.ref b/autotests/reference/review128925-1.scss.ref
index 0e01441..fee32c7 100644
--- a/autotests/reference/review128925-1.scss.ref
+++ b/autotests/reference/review128925-1.scss.ref
@@ -1,211 +1,211 @@
/*
* 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";
+@charset "UTF-8";
-@import "mixins/button";
+@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
+$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;
+@mixin border-radius($radius) {
+ -webkit-border-radius: $radius;
+ -moz-border-radius: $radius;
+ -ms-border-radius: $radius;
+ border-radius: $radius;
}
-.box { @include border-radius(10px); }
+.box { @include border-radius(10px); }
// Nesting
#home-page {
- header {
- width: 80%;
- margin: 0 auto;
+ header {
+ width: 80%;
+ margin: 0 auto;
.cover {
- @include border-radius(20px);
- max-width: 100%;
+ @include border-radius(20px);
+ max-width: 100%;
- &:hover {
- background: #ffffff;
+ &:hover {
+ background: #ffffff;
}
.like-button {
- font-size: $default-font-size * 0.8;
+ font-size: $default-font-size * 0.8;
- @media (max-width: 300px) and (min-width: 200px) {
- 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;
+ width: 20px;
+ height: 20px;
}
}
@media print {
- display: none;
+ display: none;
}
}
}
}
}
// Extend and inheritance
.message {
- border: $border-light;
- background-color: #f0f0f0;
+ border: $border-light;
+ background-color: #f0f0f0;
}
.message-danger {
- @extend .message;
+ @extend .message;
}
// Control structures
-@mixin does-parent-exist {
+@mixin does-parent-exist {
@if & {
- &:hover {
- color: red;
+ &:hover {
+ color: red;
}
} @else {
- a {
- color: red;
+ a {
+ color: red;
}
}
}
// Operators
-.container { width: 100%; }
+.container { width: 100%; }
-article[role="main"] {
- float: left;
- width: 600px / 960px * 100%;
+article[role="main"] {
+ float: left;
+ width: 600px / 960px * 100%;
}
-aside[role="complementary"] {
- float: right;
- width: 300px / 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]);
+$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;
+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;
+blockquote {
+ margin: 0;
}
-header #logo {
- width: 100px;
+header #logo {
+ width: 100px;
}
-div#footer .link {
- color: blue;
+div#footer .link {
+ color: blue;
}
-sidebar #subscribe .subscribe_form input[type="text"] {
- font-size: 20px;
+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;
+sidebar #subscribe .subscribe_form:nth-child(2n + 1):hover input[class*="small-"] {
+ font-weight: bold;
}
// Media Queries
@media print {
.container {
- width: 100%;
+ width: 100%;
}
}
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 768px) {
.container {
- width: 600px;
+ width: 600px;
}
}
-@media screen and (min-width: 768px) and (max-width: 960px) {
+@media screen and (min-width: 768px) and (max-width: 960px) {
.container {
- width: 720px;
+ width: 720px;
}
}
// Fontface
@font-face {
- font-family: MyHelvetica;
- src: local("Helvetica Neue Bold"),
- local("HelveticaNeue-Bold"),
- url(MgOpenModernaBold.ttf);
- font-weight: bold;
+ 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%;
+ from {
+ margin-left: 100%;
+ width: 300%;
}
- to {
- margin-left: 0%;
- width: 100%;
+ to {
+ margin-left: 0%;
+ width: 100%;
}
}
diff --git a/autotests/reference/review128925-2.css.ref b/autotests/reference/review128925-2.css.ref
index 8139eb6..f4c0211 100644
--- a/autotests/reference/review128925-2.css.ref
+++ b/autotests/reference/review128925-2.css.ref
@@ -1,62 +1,62 @@
/*
* 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 {
+ flex {
width: 300px;
}
}
diff --git a/autotests/reference/review128925-2.scss.ref b/autotests/reference/review128925-2.scss.ref
index 374bbe6..082c1e4 100644
--- a/autotests/reference/review128925-2.scss.ref
+++ b/autotests/reference/review128925-2.scss.ref
@@ -1,81 +1,81 @@
/*
* 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 */;
+$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 */;
+ /* 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 */}
+@media screen /* comment here */ and (max-width: 300px /* comment here */) /* comment here */ {/* comment here */}
// Strings with special content
-@import "{} $variable /* comment */";
-@import "{}";
+@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)}
+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
+blockquote .ref
{
- flex : 0 1 30%;
- flex-wrap : wrap;
+ flex : 0 1 30%;
+ flex-wrap : wrap;
}
.sidebar {
- width: 300px; }
- @media screen and (orientation: landscape) {
+ width: 300px; }
+ @media screen and (orientation: landscape) {
.sidebar {
- width: 500px; } }
+ width: 500px; } }
// Variable interpolation: #{}
-$name: foo;
-$attr: border;
-p.#{$name} {
- #{$attr}-color: blue;
+$name: foo;
+$attr: border;
+p.#{$name} {
+ #{$attr}-color: blue;
}
-p {
- $font-size: 12px;
- $line-height: 30px;
- font: #{$font-size}/#{$line-height};
+p {
+ $font-size: 12px;
+ $line-height: 30px;
+ font: #{$font-size}/#{$line-height};
}
// Special selectors: HTML5 allows user defined tags
-header {
- flex {
- width: 300px;
+header {
+ flex {
+ width: 300px;
}
}
diff --git a/autotests/reference/test.css.ref b/autotests/reference/test.css.ref
index 826a855..5862352 100644
--- a/autotests/reference/test.css.ref
+++ b/autotests/reference/test.css.ref
@@ -1,18 +1,18 @@
h1 {
text-color: "red";
}
/* PHP code, invalid in CSS context */
-for()
-
+for()
+
echo("hello");
// valid code in PHP context
for()
?>
h2 {
text-weight: bold;
}
diff --git a/data/syntax/css.xml b/data/syntax/css.xml
index c71ea86..25a614e 100644
--- a/data/syntax/css.xml
+++ b/data/syntax/css.xml
@@ -1,1701 +1,1735 @@
]>
-
+
- align-content
- align-items
- alignment-baseline
- align-self
- all
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-timing-function
- appearance
- azimuth
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-image-transform
- background-origin
- background-position
- background-repeat
- background-size
- baseline-shift
- block-size
- block-step
- block-step-align
- block-step-insert
- block-step-round
- block-step-size
- bookmark-label
- bookmark-level
- bookmark-state
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-boundary
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-transform
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-decoration-break
- box-shadow
- box-sizing
- box-snap
- break-after
- break-before
- break-inside
- caption-side
- caret
- caret-color
- caret-shape
- clear
- clip
- clip-path
- clip-rule
- color
- color-adjust
- color-interpolation-filters
- columns
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- contain
- content
- continue
- counter-increment
- counter-reset
- counter-set
- cue
- cue-after
- cue-before
- cursor
- direction
- display
- dominant-baseline
- elevation
- empty-cells
- fill
- fill-break
- fill-color
- fill-image
- fill-opacity
- fill-origin
- fill-position
- fill-repeat
- fill-rule
- fill-size
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- float-defer
- float-offset
- float-reference
- flood-color
- flood-opacity
- flow-from
- flow-into
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-max-size
- font-min-size
- font-optical-sizing
- font-palette
- font-size
- font-size-adjust
- font-stretch
- font-style
- font-synthesis
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-emoji
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- footnote-display
- footnote-policy
- gap
- glyph-orientation-vertical
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphenate-limit-last
- hyphenate-limit-lines
- hyphenate-limit-zone
- hyphens
- image-orientation
- image-rendering
- image-resolution
- initial-letter
- initial-letter-align
- initial-letter-wrap
- inline-size
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- line-break
- line-grid
- line-height
- line-height-step
- line-snap
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- marker
- marker-end
- marker-knockout-left
- marker-knockout-right
- marker-mid
- marker-pattern
- marker-segment
- marker-side
- marker-start
- marquee-direction
- marquee-loop
- marquee-speed
- marquee-style
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- max-block-size
- max-height
- max-inline-size
- max-lines
- max-width
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- nav-up
- nav-down
- nav-left
- nav-right
- object-fit
- object-position
- offset
- offset-after
- offset-anchor
- offset-before
- offset-distance
- offset-end
- offset-path
- offset-position
- offset-rotate
- offset-start
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-style
- overflow-wrap
- overflow-x
- overflow-y
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page
- page-break-after
- page-break-before
- page-break-inside
- pause
- pause-after
- pause-before
- perspective
- perspective-origin
- pitch
- pitch-range
- place-content
- place-items
- place-self
- play-during
- pointer-events
- position
- quotes
- region-fragment
- resize
- richness
- right
- rotation
- rotation-point
- row-gap
- ruby-align
- ruby-merge
- ruby-position
- running
- scrollbar-gutter
- shape-image-threshold
- shape-inside
- shape-margin
- shape-outside
- size
- speak
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- string-set
- table-layout
- tab-size
- text-align-all
- text-align
- text-align-last
- text-combine-upright
- text-decoration-color
- text-decoration
- text-decoration-line
- text-decoration-skip
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-width
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-skip
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
- text-space-collapse
- text-space-trim
- text-spacing
- text-transform
- text-underline-offset
- text-underline-position
- text-wrap
- top
- transform
- transform-box
- transform-origin
- transform-style
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- unicode-bidi
- user-select
- vertical-align
- visibility
- voice-family
- volume
- white-space
- widows
- width
- will-change
- word-break
- word-spacing
- word-wrap
- wrap-after
- wrap-before
- wrap-flow
- wrap-inside
- wrap-through
- writing-mode
- z-index
- -moz-animation
- -moz-animation-delay
- -moz-animation-direction
- -moz-animation-duration
- -moz-animation-fill-mode
- -moz-animation-iteration-count
- -moz-animation-name
- -moz-animation-play-state
- -moz-animation-timing-function
- -moz-appearance
- -moz-background-clip
- -moz-background-origin
- -moz-background-size
- -moz-border-image
- -moz-border-radius
- -moz-border-radius-bottomleft
- -moz-border-radius-bottomright
- -moz-border-radius-topleft
- -moz-border-radius-topright
- -moz-box-align
- -moz-box-direction
- -moz-box-flex
- -moz-box-flex-group
- -moz-box-ordinal-group
- -moz-box-orient
- -moz-box-pack
- -moz-box-shadow
- -moz-box-sizing
- -moz-box
- -moz-column-count
- -moz-column-fill
- -moz-column-gap
- -moz-column-rule
- -moz-column-rule-color
- -moz-column-rule-style
- -moz-column-rule-width
- -moz-columns
- -moz-column-width
- -moz-hyphens
- -moz-opacity
- -moz-outline-style
- -moz-perspective
- -moz-resize
- -moz-text-align-last
- -moz-text-decoration-color
- -moz-text-decoration-line
- -moz-text-decoration-style
- -moz-transform
- -moz-transform-origin
- -moz-transform-style
- -moz-transition
- -moz-transition-delay
- -moz-transition-duration
- -moz-transition-property
- -moz-transition-timing-function
- -moz-user-select
- -o-background-size
- -o-linear-gradient
- -o-text-overflow
- -o-transition
- -o-transform-origin
- konq_bgpos_x
- konq_bgpos_y
- -khtml-background-size
- -khtml-border-top-left-radius
- -khtml-border-top-right-radius
- -khtml-border-bottom-left-radius
- -khtml-border-bottom-right-radius
- -khtml-border-radius
- -khtml-box-shadow
- -khtml-opacity
- -webkit-appearance
- -webkit-animation
- -webkit-animation-name
- -webkit-animation-duration
- -webkit-animation-iteration
- -webkit-animation-direction
- -webkit-animation-delay
- -webkit-animation-play-state
- -webkit-animation-fill-mode
- -webkit-background-size
- -webkit-backface-visibility
- -webkit-border-image
- -webkit-border-bottom-colors
- -webkit-border-left-colors
- -webkit-border-radius
- -webkit-border-right-colors
- -webkit-border-top-colors
- -webkit-border-top-left-radius
- -webkit-border-top-right-radius
- -webkit-border-bottom-left-radius
- -webkit-border-bottom-right-radius
- -webkit-border-radius-bottomleft
- -webkit-border-radius-bottomright
- -webkit-box-align
- -webkit-box-direction
- -webkit-box-flex
- -webkit-box-ordinal-group
- -webkit-box-orient
- -webkit-box-pack
- -webkit-box-reflect
- -webkit-box-shadow
- -webkit-box-sizing
- -webkit-column-count
- -webkit-column-gap
- -webkit-hyphens
- -webkit-linear-gradient
- -webkit-gradient
- -webkit-overflow-scrolling
- -webkit-perspective
- -webkit-text-decoration
- -webkit-text-decoration-skip
- -webkit-text-fill-color
- -webkit-text-stroke-color
- -webkit-text-stroke-width
- -webkit-text-size-adjust
- -webkit-tap-highlight-color
- -webkit-transform
- -webkit-transform-origin
- -webkit-transform-style
- -webkit-transition
- -webkit-transition-property
- -webkit-transition-delay
- -webkit-transition-duration
- -webkit-user-select
- zoom
- -ms-animation-name
- -ms-animation-duration
- -ms-animation-iteration
- -ms-animation-direction
- -ms-animation-delay
- -ms-animation-play-state
- -ms-animation-fill-mode
- -ms-box-sizing
- -ms-filter
- -ms-flex
- -ms-flex-align
- -ms-flex-direction
- -ms-flex-flow
- -ms-flex-item-align
- -ms-flex-line-pack
- -ms-flex-negative
- -ms-flex-order
- -ms-flex-pack
- -ms-flex-positive
- -ms-flex-position
- -ms-flex-preferred-size
- -ms-flex-wrap
- -ms-interpolation-mode
- -ms-linear-gradient
- -ms-overflow-style
- -ms-text-size-adjust
- -ms-transform
- -ms-transition
- -ms-user-select
- inherit
- unset
- auto
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- italic
- oblique
- small-caps
- normal
- bold
- bolder
- lighter
- light
- transparent
- repeat
- repeat-x
- repeat-y
- no-repeat
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
- left
- right
- center
- justify
- konq-center
- disc
- circle
- square
- box
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-alpha
- lower-latin
- upper-alpha
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
- inline
- inline-block
- block
- list-item
- run-in
- compact
- marker
- table
- inline-table
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-column-group
- table-column
- table-cell
- table-caption
- crosshair
- default
- pointer
- move
- e-resize
- ne-resize
- nw-resize
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- text
- wait
- help
- above
- absolute
- always
- avoid
- below
- bidi-override
- blink
- both
- capitalize
- caption
- clip
- close-quote
- collapse
- condensed
- crop
- cross
- ellipsis
- ellipsis-word
- embed
- expanded
- extra-condensed
- extra-expanded
- fixed
- hand
- hide
- higher
- icon
- inside
- invert
- landscape
- level
- line-through
- loud
- lower
- lowercase
- ltr
- menu
- message-box
- mix
- narrower
- no-close-quote
- no-open-quote
- nowrap
- open-quote
- outside
- overline
- portrait
- pre
- pre-line
- pre-wrap
- relative
- rtl
- scroll
- semi-condensed
- semi-expanded
- separate
- show
- small-caption
- static
- static-position
- status-bar
- thick
- thin
- ultra-condensed
- ultra-expanded
- underline
- uppercase
- visible
- wider
- break
- serif
- sans-serif
- cursive
- fantasy
- monospace
- border-box
- content-box
- -epub-hyphens
- contain
- cover
- all
- ease
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- linear
- infinite
- reverse
- alternate
- alternate-reverse
- forwards
- backwards
- running
- paused
- black
- silver
- gray
- white
- maroon
- red
- purple
- fuchsia
- green
- lime
- olive
- yellow
- navy
- blue
- teal
- aqua
- orange
- aliceblue
- antiquewhite
- aquamarine
- azure
- beige
- bisque
- blanchedalmond
- blueviolet
- brown
- burlywood
- cadetblue
- chartreuse
- chocolate
- coral
- cornflowerblue
- cornsilk
- crimson
- cyan
- aqua
- darkblue
- darkcyan
- darkgoldenrod
- darkgray
- darkgreen
- darkgrey
- darkkhaki
- darkmagenta
- darkolivegreen
- darkorange
- darkorchid
- darkred
- darksalmon
- darkseagreen
- darkslateblue
- darkslategray
- darkslategrey
- darkturquoise
- darkviolet
- deeppink
- deepskyblue
- dimgray
- dimgrey
- dodgerblue
- firebrick
- floralwhite
- forestgreen
- gainsboro
- ghostwhite
- gold
- goldenrod
- greenyellow
- grey
- honeydew
- hotpink
- indianred
- indigo
- ivory
- khaki
- lavender
- lavenderblush
- lawngreen
- lemonchiffon
- lightblue
- lightcoral
- lightcyan
- lightgoldenrodyellow
- lightgray
- lightgreen
- lightgrey
- lightpink
- lightsalmon
- lightseagreen
- lightskyblue
- lightslategray
- lightslategrey
- lightsteelblue
- lightyellow
- limegreen
- linen
- magenta
- fuchsia
- mediumaquamarine
- mediumblue
- mediumorchid
- mediumpurple
- mediumseagreen
- mediumslateblue
- mediumspringgreen
- mediumturquoise
- mediumvioletred
- midnightblue
- mintcream
- mistyrose
- moccasin
- navajowhite
- oldlace
- olivedrab
- orangered
- orchid
- palegoldenrod
- palegreen
- paleturquoise
- palevioletred
- papayawhip
- peachpuff
- peru
- pink
- plum
- powderblue
- rosybrown
- royalblue
- saddlebrown
- salmon
- sandybrown
- seagreen
- seashell
- sienna
- skyblue
- slateblue
- slategray
- slategrey
- snow
- springgreen
- steelblue
- tan
- thistle
- tomato
- turquoise
- violet
- wheat
- whitesmoke
- yellowgreen
- rebeccapurple
- ActiveBorder
- ActiveCaption
- AppWorkspace
- Background
- ButtonFace
- ButtonHighlight
- ButtonShadow
- ButtonText
- CaptionText
- GrayText
- Highlight
- HighlightText
- InactiveBorder
- InactiveCaption
- InactiveCaptionText
- InfoBackground
- InfoText
- Menu
- MenuText
- Scrollbar
- ThreeDDarkShadow
- ThreeDFace
- ThreeDHighlight
- ThreeDLightShadow
- ThreeDShadow
- Window
- WindowFrame
- WindowText
- attr
- calc
- hsl
- hsla
- linear-gradient
- radial-gradient
- repeating-linear-gradient
- repeating-radial-gradient
- rgb
- rgba
- var
- url
- rect
- inset
- circle
- ellipse
- polygon
- blur
- brightness
- contrast
- drop-shadow
- grayscale
- hue-rotate
- invert
- opacity
- saturate
- sepia
- max-content
- min-content
- minmax
- fix-content
- repeat
- cubic-bezier
- frames
- steps
- matrix
- matrix3d
- perspective
- rotate
- rotate3d
- rotateX
- rotateY
- rotateZ
- scale
- scale3d
- scaleX
- scaleY
- scaleZ
- skew
- skewX
- skewY
- translate
- translate3d
- translateX
- translateY
- translateZ
- local
- format
- all
- print
- screen
- speech
- any-pointer
- any-hover
- aspect-ratio
- color
- color-gamut
- color-index
- display-mode
- grid
- height
- hover
- max-aspect-ratio
- max-color
- max-color-index
- max-device-aspect-ratio
- max-device-height
- max-device-width
- max-height
- max-monochrome
- max-resolution
- max-width
- min-aspect-ratio
- min-color
- min-color-index
- min-device-aspect-ratio
- min-device-height
- min-device-width
- min-height
- min-monochrome
- min-resolution
- min-width
- monochrome
- orientation
- pointer
- resolution
- scan
- update
- width
- after
- before
- cue
- first-letter
- first-line
- selection
- backdrop
- placeholder
- slotted
- value
- choices
- repeat-item
- repeat-index
- -moz-progress-bar
- -moz-range-progress
- -moz-range-thumb
- -moz-range-track
- -moz-selection
- -ms-fill
- -ms-fill-lower
- -ms-fill-upper
- -ms-thumb
- -ms-track
- -webkit-progress-bar
- -webkit-progress-value
- -webkit-slider-runnable-track
- -webkit-slider-thumb
- active
- any-link
- checked
- default
- defined
- disabled
- empty
- enabled
- first-child
- first-of-type
- fullscreen
- focus
- focus-within
- host
- hover
- in-range
- indeterminate
- invalid
- lang
- last-child
- last-of-type
- link
- not
- nth-child
- nth-last-child
- nth-last-of-type
- nth-of-type
- only-child
- only-of-type
- optional
- out-of-range
- placeholder-shown
- read-only
- read-write
- required
- root
- scope
- target
- valid
- visited
- after
- before
- cue
- first-letter
- first-line
- selection
- not
- blank
- first
- left
- recto
- right
- verso
- @character
- @charset
- @import
- @namespace
- @document
- @media
- @supports
- @viewport
- min-width
- max-width
- width
- min-height
- max-height
- height
- zoom
- min-zoom
- max-zoom
- user-zoom
- orientation
- viewport-fit
- @page
- size
- marks
- bleed
- @font-face
- font-display
- font-family
- font-stretch
- font-style
- font-weight
- font-variant
- font-feature-settings
- font-variation-settings
- src
- unicode-range
- @keyframes
- from
- to
-
+
- and
- - or
+ - only
+ - not
-
-
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
-
+
-
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
-
+
+
-
+
+
-
+
-
+
+
-
+
+
-
+
+
-
-
+
+
diff --git a/data/syntax/scss.xml b/data/syntax/scss.xml
index 6568505..e4efc0a 100644
--- a/data/syntax/scss.xml
+++ b/data/syntax/scss.xml
@@ -1,1190 +1,2242 @@
+
]>
-
+
- - azimuth
- align-content
- align-items
- - align-self
- alignment-baseline
+ - align-self
- all
- - animation-name
+ - animation
+ - animation-delay
+ - animation-direction
- animation-duration
+ - animation-fill-mode
- animation-iteration-count
- - animation-direction
- - animation-delay
+ - animation-name
- animation-play-state
- - animation-fill-mode
- animation-timing-function
+ - appearance
+ - azimuth
- backface-visibility
- background
- background-attachment
- background-blend-mode
- - background-break
- background-clip
- background-color
- background-image
+ - background-image-transform
- background-origin
- background-position
- background-repeat
- background-size
- baseline-shift
+ - block-size
+ - block-step
+ - block-step-align
+ - block-step-insert
+ - block-step-round
+ - block-step-size
- bookmark-label
- bookmark-level
- - bookmark-level
+ - bookmark-state
- border
+ - border-block
+ - border-block-color
+ - border-block-end
+ - border-block-end-color
+ - border-block-end-style
+ - border-block-end-width
+ - border-block-start
+ - border-block-start-color
+ - border-block-start-style
+ - border-block-start-width
+ - border-block-style
+ - border-block-width
- border-bottom
- border-bottom-color
- - border-bottom-image
- - border-bottom-style
- - border-bottom-width
- - border-bottom-left-image
- border-bottom-left-radius
- - border-bottom-right-image
- border-bottom-right-radius
+ - border-bottom-style
+ - border-bottom-width
- border-boundary
- border-collapse
- border-color
- - border-corner-image
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
+ - border-image-transform
- border-image-width
+ - border-inline
+ - border-inline-color
+ - border-inline-end
+ - border-inline-end-color
+ - border-inline-end-style
+ - border-inline-end-width
+ - border-inline-start
+ - border-inline-start-color
+ - border-inline-start-style
+ - border-inline-start-width
+ - border-inline-style
+ - border-inline-width
- border-left
- border-left-color
- - border-left-image
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- - border-right-image
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- - border-top-image
- - border-top-style
- - border-top-width
- - border-top-left-image
- border-top-left-radius
- - border-top-right-image
- border-top-right-radius
+ - border-top-style
+ - border-top-width
- border-width
- bottom
- - box-align
- box-decoration-break
- - box-direction
- - box-flex
- box-shadow
- box-sizing
- box-snap
- - box-suppress
- break-after
- break-before
- break-inside
- - caret-color
- caption-side
- - chains
+ - caret
+ - caret-color
+ - caret-shape
- clear
- clip
- clip-path
- clip-rule
- color
+ - color-adjust
- color-interpolation-filters
+ - columns
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- - columns
+ - contain
- content
+ - continue
- counter-increment
- counter-reset
- counter-set
- cue
- cue-after
- cue-before
- cursor
- direction
- display
- dominant-baseline
- elevation
- empty-cells
+ - fill
+ - fill-break
+ - fill-color
+ - fill-image
+ - fill-opacity
+ - fill-origin
+ - fill-position
+ - fill-repeat
+ - fill-rule
+ - fill-size
- filter
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
+ - float-defer
+ - float-offset
+ - float-reference
- flood-color
- flood-opacity
- - flow
- flow-from
- flow-into
- font
- font-family
+ - font-feature-settings
+ - font-kerning
+ - font-language-override
+ - font-max-size
+ - font-min-size
+ - font-optical-sizing
+ - font-palette
- font-size
- font-size-adjust
- font-stretch
- font-style
- - font-variant
- - font-weight
- - font-stretch
- - font-feature-settings
- - font-kerning
- - font-language-override
- font-synthesis
+ - font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
+ - font-variant-emoji
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
+ - font-variation-settings
+ - font-weight
- footnote-display
- footnote-policy
+ - gap
- glyph-orientation-vertical
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-gap
- grid-column-start
- grid-gap
- grid-row
- grid-row-end
- grid-row-gap
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
+ - hyphenate-character
+ - hyphenate-limit-chars
+ - hyphenate-limit-last
+ - hyphenate-limit-lines
+ - hyphenate-limit-zone
- hyphens
- image-orientation
- image-rendering
- image-resolution
- initial-letter
- initial-letter-align
- initial-letter-wrap
+ - inline-size
+ - inset
+ - inset-block
+ - inset-block-end
+ - inset-block-start
+ - inset-inline
+ - inset-inline-end
+ - inset-inline-start
- isolation
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- - linear-gradient
+ - line-break
- line-grid
- line-height
+ - line-height-step
- line-snap
- list-style
- list-style-image
- - list-style-keyword
- list-style-position
- list-style-type
- margin
+ - margin-block
+ - margin-block-end
+ - margin-block-start
- margin-bottom
+ - margin-inline
+ - margin-inline-end
+ - margin-inline-start
- margin-left
- margin-right
- margin-top
- - marker-offset
+ - marker
+ - marker-end
+ - marker-knockout-left
+ - marker-knockout-right
+ - marker-mid
+ - marker-pattern
+ - marker-segment
- marker-side
+ - marker-start
- marquee-direction
- marquee-loop
- marquee-speed
- marquee-style
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
+ - max-block-size
- max-height
+ - max-inline-size
- max-lines
- max-width
+ - min-block-size
- min-height
+ - min-inline-size
- min-width
- mix-blend-mode
+ - nav-up
- nav-down
- nav-left
- nav-right
- - nav-up
- object-fit
- object-position
+ - offset
- offset-after
+ - offset-anchor
- offset-before
+ - offset-distance
- offset-end
+ - offset-path
+ - offset-position
+ - offset-rotate
- offset-start
- opacity
- order
- orphans
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow
- overflow-style
- overflow-wrap
- overflow-x
- overflow-y
- padding
+ - padding-block
+ - padding-block-end
+ - padding-block-start
- padding-bottom
+ - padding-inline
+ - padding-inline-end
+ - padding-inline-start
- padding-left
- padding-right
- padding-top
- page
- page-break-after
- page-break-before
- page-break-inside
- pause
- pause-after
- pause-before
- perspective
- perspective-origin
- pitch
- pitch-range
+ - place-content
+ - place-items
+ - place-self
- play-during
- pointer-events
- - polar-anchor
- - polar-angle
- - polar-distance
- - polar-origin
- position
- - presentation-level
- quotes
+ - region-fragment
- resize
- - rest
- - rest-after
- - rest-before
- richness
- right
- rotation
- rotation-point
+ - row-gap
- ruby-align
- ruby-merge
- ruby-position
- running
- - scroll-behavior
- - scroll-snap-align
- - scroll-snap-margin
- - scroll-snap-margin-block
- - scroll-snap-margin-block-end
- - scroll-snap-margin-block-start
- - scroll-snap-margin-bottom
- - scroll-snap-margin-inline
- - scroll-snap-margin-inline-end
- - scroll-snap-margin-inline-start
- - scroll-snap-margin-left
- - scroll-snap-margin-right
- - scroll-snap-margin-top
- - scroll-snap-padding
- - scroll-snap-padding-block
- - scroll-snap-padding-block-end
- - scroll-snap-padding-block-start
- - scroll-snap-padding-bottom
- - scroll-snap-padding-inline
- - scroll-snap-padding-inline-end
- - scroll-snap-padding-inline-start
- - scroll-snap-padding-left
- - scroll-snap-padding-right
- - scroll-snap-padding-top
- - scroll-snap-stop
- - scroll-snap-type
+ - scrollbar-gutter
- shape-image-threshold
- shape-inside
- shape-margin
- shape-outside
- size
- speak
- - speak-as
- speak-header
- speak-numeral
- speak-punctuation
- speech-rate
- stress
- string-set
- - tab-size
- table-layout
+ - tab-size
+ - text-align-all
- text-align
- text-align-last
- text-combine-upright
- - text-decoration
- text-decoration-color
+ - text-decoration
- text-decoration-line
- text-decoration-skip
+ - text-decoration-skip-ink
- text-decoration-style
+ - text-decoration-width
- text-emphasis
- text-emphasis-color
- text-emphasis-position
+ - text-emphasis-skip
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-shadow
+ - text-space-collapse
+ - text-space-trim
+ - text-spacing
- text-transform
+ - text-underline-offset
- text-underline-position
- text-wrap
- top
- transform
+ - transform-box
- transform-origin
- transform-style
- transition
- transition-delay
- - transition-property
- transition-duration
+ - transition-property
- transition-timing-function
- unicode-bidi
+ - user-select
- vertical-align
- visibility
- - voice-balance
- - voice-duration
- voice-family
- - voice-pitch
- - voice-range
- - voice-rate
- - voice-stress
- - voice-volume
- volume
- white-space
- widows
- width
- will-change
- word-break
- word-spacing
- word-wrap
+ - wrap-after
+ - wrap-before
- wrap-flow
+ - wrap-inside
- wrap-through
- writing-mode
- z-index
- - -moz-animation-name
- - -moz-animation-duration
- - -moz-animation-iteration
- - -moz-animation-direction
+ - -moz-animation
- -moz-animation-delay
- - -moz-animation-play-state
+ - -moz-animation-direction
+ - -moz-animation-duration
- -moz-animation-fill-mode
+ - -moz-animation-iteration-count
+ - -moz-animation-name
+ - -moz-animation-play-state
+ - -moz-animation-timing-function
+ - -moz-appearance
+ - -moz-background-clip
+ - -moz-background-origin
- -moz-background-size
- -moz-border-image
- - -moz-border-bottom-colors
- - -moz-border-left-colors
- -moz-border-radius
- - -moz-border-radius-topleft
- - -moz-border-radius-topright
- -moz-border-radius-bottomleft
- -moz-border-radius-bottomright
- - -moz-border-right-colors
- - -moz-border-top-colors
- - -moz-box
+ - -moz-border-radius-topleft
+ - -moz-border-radius-topright
+ - -moz-box-align
+ - -moz-box-direction
- -moz-box-flex
+ - -moz-box-flex-group
+ - -moz-box-ordinal-group
+ - -moz-box-orient
+ - -moz-box-pack
- -moz-box-shadow
- -moz-box-sizing
+ - -moz-box
- -moz-column-count
+ - -moz-column-fill
- -moz-column-gap
+ - -moz-column-rule
+ - -moz-column-rule-color
+ - -moz-column-rule-style
+ - -moz-column-rule-width
+ - -moz-columns
+ - -moz-column-width
- -moz-hyphens
- - -moz-linear-gradient
- -moz-opacity
- -moz-outline-style
- -moz-perspective
- - -moz-radial-gradient
- -moz-resize
+ - -moz-text-align-last
+ - -moz-text-decoration-color
+ - -moz-text-decoration-line
+ - -moz-text-decoration-style
- -moz-transform
- -moz-transform-origin
- -moz-transform-style
- -moz-transition
- - -moz-transition-property
+ - -moz-transition-delay
- -moz-transition-duration
+ - -moz-transition-property
+ - -moz-transition-timing-function
+ - -moz-user-select
- -o-background-size
- -o-linear-gradient
- -o-text-overflow
- -o-transition
- -o-transform-origin
- konq_bgpos_x
- konq_bgpos_y
- -khtml-background-size
- -khtml-border-top-left-radius
- -khtml-border-top-right-radius
- -khtml-border-bottom-left-radius
- -khtml-border-bottom-right-radius
- -khtml-border-radius
- -khtml-box-shadow
- -khtml-opacity
- -webkit-appearance
+ - -webkit-animation
- -webkit-animation-name
- -webkit-animation-duration
- -webkit-animation-iteration
- -webkit-animation-direction
- -webkit-animation-delay
- -webkit-animation-play-state
- -webkit-animation-fill-mode
- -webkit-background-size
+ - -webkit-backface-visibility
- -webkit-border-image
- -webkit-border-bottom-colors
- -webkit-border-left-colors
- -webkit-border-radius
- -webkit-border-right-colors
- -webkit-border-top-colors
- -webkit-border-top-left-radius
- -webkit-border-top-right-radius
- -webkit-border-bottom-left-radius
- -webkit-border-bottom-right-radius
- -webkit-border-radius-bottomleft
- -webkit-border-radius-bottomright
+ - -webkit-box-align
+ - -webkit-box-direction
- -webkit-box-flex
+ - -webkit-box-ordinal-group
+ - -webkit-box-orient
+ - -webkit-box-pack
- -webkit-box-reflect
- -webkit-box-shadow
- -webkit-box-sizing
- -webkit-column-count
- -webkit-column-gap
- -webkit-hyphens
- -webkit-linear-gradient
- -webkit-gradient
+ - -webkit-overflow-scrolling
- -webkit-perspective
+ - -webkit-text-decoration
+ - -webkit-text-decoration-skip
- -webkit-text-fill-color
- -webkit-text-stroke-color
- -webkit-text-stroke-width
- -webkit-text-size-adjust
+ - -webkit-tap-highlight-color
- -webkit-transform
- -webkit-transform-origin
- -webkit-transform-style
- -webkit-transition
- -webkit-transition-property
+ - -webkit-transition-delay
- -webkit-transition-duration
+ - -webkit-user-select
- zoom
- -ms-animation-name
- -ms-animation-duration
- -ms-animation-iteration
- -ms-animation-direction
- -ms-animation-delay
- -ms-animation-play-state
- -ms-animation-fill-mode
- -ms-box-sizing
- -ms-filter
+ - -ms-flex
+ - -ms-flex-align
+ - -ms-flex-direction
+ - -ms-flex-flow
+ - -ms-flex-item-align
+ - -ms-flex-line-pack
+ - -ms-flex-negative
+ - -ms-flex-order
+ - -ms-flex-pack
+ - -ms-flex-positive
+ - -ms-flex-position
+ - -ms-flex-preferred-size
+ - -ms-flex-wrap
- -ms-interpolation-mode
- -ms-linear-gradient
+ - -ms-overflow-style
- -ms-text-size-adjust
- -ms-transform
- -ms-transition
+ - -ms-user-select
+
-
- - font-family
- - font-size
- - font-stretch
- - font-style
- - font-variant
- - font-weight
- - unicode-range
- - units-per-em
- - src
- - panose-1
- - stemv
- - stemh
- - slope
- - cap-height
- - x-height
- - ascent
- - descent
- - widths
- - bbox
- - definition-src
+
+ - adjust
+ - after
+ - align-all
+ - align
+ - align-last
+ - alternates
+ - anchor
+ - area
+ - areas
+ - attachment
+ - auto-columns
+ - auto-flow
+ - auto-rows
- baseline
- - centerline
- - mathline
- - topline
+ - basis
+ - before
+ - bidi
+ - blend-mode
+ - block-color
+ - block-end-color
+ - block-end
+ - block-end-style
+ - block-end-width
+ - block
+ - block-start-color
+ - block-start
+ - block-start-style
+ - block-start-width
+ - block-style
+ - block-width
+ - border-mode
+ - border-outset
+ - border-repeat
+ - border-slice
+ - border-source
+ - bottom-color
+ - bottom-left-radius
+ - bottom-right-radius
+ - bottom-style
+ - bottom-width
+ - boundary
+ - box
+ - break
+ - caps
+ - cells
+ - change
+ - character
+ - chars
+ - collapse
+ - column-end
+ - column
+ - column-start
+ - combine-upright
+ - composite
+ - count
+ - decoration-break
+ - decoration-color
+ - decoration
+ - decoration-line
+ - decoration-skip-ink
+ - decoration-skip
+ - decoration-style
+ - decoration-width
+ - defer
+ - delay
+ - distance
+ - down
+ - duration
+ - during
+ - east-asian
+ - emoji
+ - emphasis-color
+ - emphasis
+ - emphasis-position
+ - emphasis-skip
+ - emphasis-style
+ - end-color
+ - end
+ - end-style
+ - end-width
+ - events
+ - family
+ - feature-settings
+ - fill-mode
+ - filters
+ - fit
+ - flow
+ - fragment
+ - from
+ - function
+ - grow
+ - gutter
+ - header
+ - height-step
+ - image
+ - image-outset
+ - image-repeat
+ - image-slice
+ - image-source
+ - image-threshold
+ - image-transform
+ - image-width
+ - increment
+ - indent
+ - inline-color
+ - inline-end-color
+ - inline-end
+ - inline-end-style
+ - inline-end-width
+ - inline
+ - inline-start-color
+ - inline-start
+ - inline-start-style
+ - inline-start-width
+ - inline-style
+ - inline-width
+ - insert
+ - inside
+ - interpolation-filters
+ - into
+ - items
+ - iteration-count
+ - justify
+ - kerning
+ - knockout-left
+ - knockout-right
+ - label
+ - language-override
+ - last
+ - layout
+ - left-color
+ - left-radius
+ - left-style
+ - left-width
+ - letter-align
+ - letter
+ - letter-wrap
+ - level
+ - ligatures
+ - limit-chars
+ - limit-last
+ - limit-lines
+ - limit-zone
+ - line
+ - lines
+ - loop
+ - max-size
+ - merge
+ - mid
+ - min-size
+ - mode
+ - name
+ - numeral
+ - numeric
+ - optical-sizing
+ - orientation
+ - orientation-vertical
+ - origin
+ - outset
+ - outside
+ - override
+ - palette
+ - path
+ - pattern
+ - play-state
+ - point
+ - policy
+ - property
+ - punctuation
+ - radius
+ - range
+ - rate
+ - reference
+ - rendering
+ - repeat
+ - reset
+ - resolution
+ - right-color
+ - right-radius
+ - right-style
+ - right-width
+ - rotate
+ - round
+ - row-end
+ - row
+ - rows
+ - row-start
+ - rule-color
+ - rule
+ - rule-style
+ - rule-width
+ - segment
+ - select
+ - self
+ - set
+ - settings
+ - shadow
+ - shape
+ - shift
+ - shrink
+ - side
+ - size-adjust
+ - sizing
+ - skip-ink
+ - skip
+ - slice
+ - snap
+ - source
+ - space-collapse
+ - space
+ - space-trim
+ - spacing
+ - span
+ - speed
+ - start-color
+ - start
+ - start-style
+ - start-width
+ - state
+ - step-align
+ - step-insert
+ - step
+ - step-round
+ - step-size
+ - stretch
+ - style-image
+ - style
+ - style-position
+ - style-type
+ - synthesis
+ - template-areas
+ - template-columns
+ - template
+ - template-rows
+ - threshold
+ - through
+ - timing-function
+ - top-color
+ - top-left-radius
+ - top-right-radius
+ - top-style
+ - top-width
+ - trim
+ - type
+ - underline-offset
+ - underline-position
+ - up
+ - upright
+ - variant-alternates
+ - variant-caps
+ - variant-east-asian
+ - variant-emoji
+ - variant
+ - variant-ligatures
+ - variant-numeric
+ - variant-position
+ - variation-settings
+ - vertical
+ - weight
+ - wrap
+ - x
+ - y
+ - zone
-
-
-
- - initial
+
+ - true
+ - false
+ - null
+
+
+
- inherit
- unset
+ - auto
+
+
-
- - left
- - right
- - top
- - bottom
- - center
- - middle
- - at
- - to
-
+
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller
- larger
- italic
- oblique
- small-caps
- normal
- bold
- bolder
- lighter
- light
- transparent
- repeat
- repeat-x
- repeat-y
- no-repeat
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
- left
- right
- center
- justify
- konq-center
- disc
- circle
- square
- box
- decimal
- decimal-leading-zero
- lower-roman
- upper-roman
- lower-greek
- lower-alpha
- lower-latin
- upper-alpha
- upper-latin
- hebrew
- armenian
- georgian
- cjk-ideographic
- hiragana
- katakana
- hiragana-iroha
- katakana-iroha
- inline
- inline-block
- block
- list-item
- run-in
- compact
- marker
- table
- inline-table
- table-row-group
- table-header-group
- table-footer-group
- table-row
- table-column-group
- table-column
- table-cell
- table-caption
- - auto
- crosshair
- default
- pointer
- move
- e-resize
- ne-resize
- nw-resize
- n-resize
- se-resize
- sw-resize
- s-resize
- w-resize
- text
- wait
- help
- above
- absolute
- always
- avoid
- below
- bidi-override
- blink
- both
- capitalize
- caption
- clip
- close-quote
- collapse
- condensed
- crop
- cross
- ellipsis
- ellipsis-word
- embed
- expanded
- extra-condensed
- extra-expanded
- fixed
- hand
- hide
- higher
- icon
- inside
- invert
- landscape
- level
- line-through
- loud
- lower
- lowercase
- ltr
- menu
- message-box
- mix
- narrower
- no-close-quote
- no-open-quote
- nowrap
- open-quote
- outside
- overline
- portrait
- pre
- pre-line
- pre-wrap
- relative
- rtl
- scroll
- semi-condensed
- semi-expanded
- separate
- show
- small-caption
- static
- static-position
- status-bar
- thick
- thin
- ultra-condensed
- ultra-expanded
- underline
- uppercase
- visible
- wider
- break
- serif
- sans-serif
- cursive
- fantasy
- monospace
- border-box
- content-box
- -epub-hyphens
- - flex
- - flex-start
- - flex-end
- - space-between
- - space-wrap
+ - contain
+ - cover
+
+
+ - all
+ - ease
+ - ease-in
+ - ease-out
+ - ease-in-out
+ - step-start
+ - step-end
+ - linear
+
+
+ - infinite
+ - reverse
+ - alternate
+ - alternate-reverse
+ - forwards
+ - backwards
+ - running
+ - paused
- - aqua
- black
- - blue
- - cyan
- - fuchsia
+ - silver
- gray
+ - white
+ - maroon
+ - red
+ - purple
+ - fuchsia
- green
- lime
- - maroon
- - navy
- olive
- - purple
- - red
- - silver
- - teal
- - white
- yellow
+ - navy
+ - blue
+ - teal
+ - aqua
+ - orange
+ - aliceblue
+ - antiquewhite
+ - aquamarine
+ - azure
+ - beige
+ - bisque
+ - blanchedalmond
+ - blueviolet
+ - brown
+ - burlywood
+ - cadetblue
+ - chartreuse
+ - chocolate
+ - coral
+ - cornflowerblue
+ - cornsilk
+ - crimson
+ - cyan
+ - aqua
+ - darkblue
+ - darkcyan
+ - darkgoldenrod
+ - darkgray
+ - darkgreen
+ - darkgrey
+ - darkkhaki
+ - darkmagenta
+ - darkolivegreen
+ - darkorange
+ - darkorchid
+ - darkred
+ - darksalmon
+ - darkseagreen
+ - darkslateblue
+ - darkslategray
+ - darkslategrey
+ - darkturquoise
+ - darkviolet
+ - deeppink
+ - deepskyblue
+ - dimgray
+ - dimgrey
+ - dodgerblue
+ - firebrick
+ - floralwhite
+ - forestgreen
+ - gainsboro
+ - ghostwhite
+ - gold
+ - goldenrod
+ - greenyellow
+ - grey
+ - honeydew
+ - hotpink
+ - indianred
+ - indigo
+ - ivory
+ - khaki
+ - lavender
+ - lavenderblush
+ - lawngreen
+ - lemonchiffon
+ - lightblue
+ - lightcoral
+ - lightcyan
+ - lightgoldenrodyellow
+ - lightgray
+ - lightgreen
+ - lightgrey
+ - lightpink
+ - lightsalmon
+ - lightseagreen
+ - lightskyblue
+ - lightslategray
+ - lightslategrey
+ - lightsteelblue
+ - lightyellow
+ - limegreen
+ - linen
+ - magenta
+ - fuchsia
+ - mediumaquamarine
+ - mediumblue
+ - mediumorchid
+ - mediumpurple
+ - mediumseagreen
+ - mediumslateblue
+ - mediumspringgreen
+ - mediumturquoise
+ - mediumvioletred
+ - midnightblue
+ - mintcream
+ - mistyrose
+ - moccasin
+ - navajowhite
+ - oldlace
+ - olivedrab
+ - orangered
+ - orchid
+ - palegoldenrod
+ - palegreen
+ - paleturquoise
+ - palevioletred
+ - papayawhip
+ - peachpuff
+ - peru
+ - pink
+ - plum
+ - powderblue
+ - rosybrown
+ - royalblue
+ - saddlebrown
+ - salmon
+ - sandybrown
+ - seagreen
+ - seashell
+ - sienna
+ - skyblue
+ - slateblue
+ - slategray
+ - slategrey
+ - snow
+ - springgreen
+ - steelblue
+ - tan
+ - thistle
+ - tomato
+ - turquoise
+ - violet
+ - wheat
+ - whitesmoke
+ - yellowgreen
+ - rebeccapurple
+
- ActiveBorder
- ActiveCaption
- AppWorkspace
- Background
- ButtonFace
- ButtonHighlight
- ButtonShadow
- ButtonText
- CaptionText
- GrayText
- Highlight
- HighlightText
- InactiveBorder
- InactiveCaption
- InactiveCaptionText
- InfoBackground
- InfoText
- Menu
- MenuText
- Scrollbar
- ThreeDDarkShadow
- ThreeDFace
- ThreeDHighlight
- ThreeDLightShadow
- ThreeDShadow
- Window
- WindowFrame
- WindowText
-
- - attr
- - calc
- - counter
- - counters
- - format
- - hsl
- - hsla
- - image
- - linear-gradient
- - local
- - radial-gradient
- - rect
- - repeating-linear-gradient
- - repeating-radial-gradient
- - rgb
- - rgba
- - toggle
- - url
-
-
- - expression
-
-
-
- - rgb
- - rgba
+
- red
- green
- blue
- mix
- - hsl
- - hsla
- hue
- saturation
- lightness
- adjust-hue
- lighten
- darken
- saturate
- desaturate
- grayscale
- complement
- invert
- alpha
- - opacity
- opacify
- - fade-in
- transparentize
- - fade-out
- adjust-color
- scale-color
- change-color
- ie-hex-str
-
- unquote
- quote
- str-length
- str-insert
- str-index
- str-slice
- to-upper-case
- to-lower-case
-
- percentage
- round
- ceil
- floor
- abs
- min
- max
- random
-
- length
- nth
- set-nth
- join
- append
- zip
- index
- list-separator
-
+ - is-bracketed
- map-get
- map-merge
- map-remove
- map-keys
- map-values
- map-has-key
- keywords
-
- selector-nest
- selector-append
- selector-extend
- selector-replace
- selector-unify
- is-superselector
- simple-selectors
- selector-parse
-
- feature-exists
- variable-exists
- global-variable-exists
- function-exists
- mixin-exists
+ - content-exists
- inspect
- type-of
- - unitsunitless
+ - unit
+ - unitless
- comparable
- call
-
+ - get-function
- if
- unique-id
+
+
+ - attr
+ - calc
+ - hsl
+ - hsla
+ - linear-gradient
+ - radial-gradient
+ - repeating-linear-gradient
+ - repeating-radial-gradient
+ - rgb
+ - rgba
+ - var
+ - url
+
+
+ - rect
+
+
+ - inset
+ - circle
+ - ellipse
+ - polygon
+
+
+ - blur
+ - brightness
+ - contrast
+ - drop-shadow
+ - grayscale
+ - hue-rotate
+ - invert
+ - opacity
+ - saturate
+ - sepia
+
+
+ - max-content
+ - min-content
+ - minmax
+ - fix-content
+ - repeat
+
+
+ - cubic-bezier
+ - frames
+ - steps
+
+
+ - matrix
+ - matrix3d
+ - perspective
+ - rotate
+ - rotate3d
+ - rotateX
+ - rotateY
+ - rotateZ
+ - scale
+ - scale3d
+ - scaleX
+ - scaleY
+ - scaleZ
+ - skew
+ - skewX
+ - skewY
+ - translate
+ - translate3d
+ - translateX
+ - translateY
+ - translateZ
+
+
+ - local
+ - format
-
+
+
- all
- - aural
- - braille
- - embossed
- - handheld
- print
- - projection
- screen
- - tty
- - tv
-
+ - speech
-
- - width
- - min-width
- - max-width
- - height
- - min-height
- - max-height
- - device-width
- - min-device-width
- - max-device-width
- - device-height
- - min-device-height
- - max-device-height
- - orientation
+
+ - any-pointer
+ - any-hover
- aspect-ratio
- - min-aspect-ratio
+ - color
+ - color-gamut
+ - color-index
+ - display-mode
+ - grid
+ - height
+ - hover
- max-aspect-ratio
- - device-aspect-ratio
- - min-device-aspect-ratio
+ - max-color
+ - max-color-index
- max-device-aspect-ratio
- - color
+ - max-device-height
+ - max-device-width
+ - max-height
+ - max-monochrome
+ - max-resolution
+ - max-width
+ - min-aspect-ratio
- min-color
- - max-color
- - color-index
- min-color-index
- - max-color-index
- - monochrome
+ - min-device-aspect-ratio
+ - min-device-height
+ - min-device-width
+ - min-height
- min-monochrome
- - max-monochrome
- - resolution
- min-resolution
- - max-resolution
+ - min-width
+ - monochrome
+ - orientation
+ - pointer
+ - resolution
- scan
- - grid
+ - update
+ - width
-
- - hover
- - link
- - visited
- - active
- - focus
- - first-child
- - last-child
- - only-child
- - first-of-type
- - last-of-type
- - only-of-type
+
+
+ - after
+ - before
+ - cue
- first-letter
- first-line
- - before
- - after
- selection
- - root
+
+
+ - backdrop
+ - placeholder
+
+ - slotted
+
+
+
+
+ - value
+ - choices
+ - repeat-item
+ - repeat-index
+
+ - -moz-progress-bar
+ - -moz-range-progress
+ - -moz-range-thumb
+ - -moz-range-track
+ - -moz-selection
+ - -ms-fill
+ - -ms-fill-lower
+ - -ms-fill-upper
+ - -ms-thumb
+ - -ms-track
+ - -webkit-progress-bar
+ - -webkit-progress-value
+ - -webkit-slider-runnable-track
+ - -webkit-slider-thumb
+
+
+
+
+ - active
+ - any-link
+ - checked
+ - default
+ - defined
+
+ - disabled
- empty
- - target
- enabled
- - disabled
- - checked
+ - first-child
+ - first-of-type
+ - fullscreen
+ - focus
+ - focus-within
+ - host
+ - hover
+ - in-range
- indeterminate
+ - invalid
+ - lang
+ - last-child
+ - last-of-type
+ - link
+ - not
- nth-child
- nth-last-child
- - nth-of-type
- nth-last-of-type
+ - nth-of-type
+ - only-child
+ - only-of-type
+ - optional
+ - out-of-range
+ - placeholder-shown
+ - read-only
+ - read-write
+ - required
+ - root
+ - scope
+ - target
+ - valid
+ - visited
+
+
+ - after
+ - before
+ - cue
+ - first-letter
+ - first-line
+ - selection
+
+
+
+ - not
+
+
+
+ - blank
+ - first
+ - left
+ - recto
+ - right
+ - verso
+
+
+
+ - @character
+ - @charset
+ - @import
+ - @namespace
+
+
+ - @debug
+ - @warn
+ - @error
+ - @content
+ - @return
+
+
+
+ - @document
+ - @media
+ - @supports
+
+
+ - @at-rule
+ - @for
+ - @each
+ - @while
+
+
+
+
+
+ - @include
+
+
+
+ - @extend
+
+
+
+ - @if
+
+
+
+ - @else
+
+
+
+ - @mixin
+ - @function
+
+
+
+ - @viewport
+
+
+
+ - min-width
+ - max-width
+ - width
+ - min-height
+ - max-height
+ - height
+ - zoom
+ - min-zoom
+ - max-zoom
+ - user-zoom
+ - orientation
+ - viewport-fit
+
+
+
+ - @page
+
+
+
+ - size
+ - marks
+ - bleed
+
+
+
+ - @font-face
+
+
+
+ - font-display
+ - font-family
+ - font-stretch
+ - font-style
+ - font-weight
+ - font-variant
+ - font-feature-settings
+ - font-variation-settings
+ - src
+ - unicode-range
+
+
+
+ - @keyframes
+
+
+
+ - from
+ - to
+
+
+
+ - and
+ - only
+ - not
+
+
+
+ - and
+ - or
- not
+
+ - important
+ - default
+ - global
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
-
+
+
-
-
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-
+
-
-
-
+
+
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
-
-
-
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
-
+
-
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
-
+
+
+
+
+
+
+
+
-
+