diff --git a/autotests/folding/highlight.sass.fold b/autotests/folding/highlight.sass.fold
new file mode 100644
index 0000000..7bf5fd8
--- /dev/null
+++ b/autotests/folding/highlight.sass.fold
@@ -0,0 +1,824 @@
+<indentfold>html,
+body,
+ul,
+ol
+  margin:  0
+  padding: 0
+
+@import reset
+body
+  font: 100% Helvetica, sans-serif
+  background-color: #efefef
+
+$font-stack:    Helvetica, sans-serif
+$primary-color: #333
+
+body
+  font: 100% $font-stack
+  color: $primary-color
+.container
+  width: 100%
+
+article[role="main"]
+  float: left
+  width: 600px / 960px * 100%
+
+%message-shared
+  border: 1px solid #ccc
+  padding: 10px
+  color: #333
+
+.message
+  @extend %message-shared
+
+.success
+  @extend %message-shared
+  border-color: green
+
+=transform($property)
+  -webkit-transform: $property
+  -ms-transform: $property
+  transform: $property
+.box
+  +transform(rotate(30deg))
+
+  // This comment won't be included in the CSS.
+   This is also commented out.
+  #a
+/* But this comment will, except in compressed mode.
+
+/* It can also contain interpolation:
+   1 + 1 = #{1 + 1}
+  1 + 1 = #{1 + 1}
+ 1 + 1 = #{1 + 1}
+#a
+
+// But this comment will, except in compressed mode.
+
+// It can also contain interpolation:
+   1 + 1 = #{1 + 1}
+  1 + 1 = #{1 + 1}
+ 1 + 1 = #{1 + 1}
+#a
+
+/*! This comment will be included even in compressed mode.
+
+#a
+
+/**/
+
+p .sans
+  font: Helvetica, /* Inline comments must be closed. */ sans-serif
+
+p .sans
+  font/*comment*/: Helvetica, /* Inline comments must be closed. */ sans-serif // comment
+
+/// Computes an exponent.
+///
+/// @param {number} $base
+///   The number to multiply by itself.
+/// @param {integer (unitless)} $exponent
+///   The number of `$base`s to multiply together.
+/// @return {number} `$base` to the power of `$exponent`.
+@function pow($base, $exponent)
+  $result: 1
+  @for $_ from 1 through $exponent
+    $result: $result * $base
+
+  @return $result
+
+$roboto-font-path: "../fonts/roboto"
+
+@font-face
+    // This is parsed as a normal function call that takes a quoted string.
+    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")
+    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")
+    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")
+
+    font-family: "Roboto"
+    font-weight: 100
+
+.logo
+  $width: 800px
+  width: $width
+  position: absolute
+  left: calc(50% - #{$width / 2})
+  top: 0
+
+$padding: 12px
+
+.post
+  // Since these max() calls don't use any Sass features other than
+  // interpolation, they're compiled to CSS max() calls.
+  padding-left: max(#{$padding}, env(safe-area-inset-left))
+  padding-right: max(#{$padding}, env(safe-area-inset-right))
+
+
+.sidebar
+  // Since these refer to a Sass variable without interpolation, they call
+  // Sass's built-in max() function.
+  padding-left: max($padding, 20px)
+  padding-right: max($padding, 20px)
+
+.circle
+  $size: 100px
+  width: $size
+  height: $size
+  border-radius: $size / 2
+
+@mixin prefix($property, $value, $prefixes)
+  @each $prefix in $prefixes
+    -#{$prefix}-#{$property}: $value
+
+  #{$property}: $value
+
+
+.gray
+  @include prefix(filter, grayscale(50%), moz webkit)
+
+.enlarge
+  font-size: 14px
+  transition:
+    property: font-size
+    duration: 4s
+    delay: 2s
+
+  &:hover
+    font-size: 36px
+
+.info-page
+  margin: auto
+    bottom: 10px
+    top: 2px
+
+$rounded-corners: false
+
+.button
+  border: 1px solid black
+  border-radius: if($rounded-corners, 5px, null)
+
+$primary: #81899b
+$accent: #ab2e
+$warn: #dfa612aa
+
+:root
+  --primary: #{$primary}
+  --accent: #{$accent}
+  --warn: #{$warn}
+
+  // Even though this looks like a Sass variable, it's valid CSS so it's not
+  // evaluated.
+  --consumed-by-js: $primary
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas
+
+:root
+  --font-family-sans-serif: #{inspect($font-family-sans-serif)}
+  --font-family-monospace: #{inspect($font-family-monospace)}
+
+.alert
+  // The parent selector can be used to add pseudo-classes to the outer
+  // selector.
+  &:hover
+    font-weight: bold
+
+
+  // It can also be used to style the outer selector in a certain context, such
+  // as a body set to use a right-to-left language.
+  [dir=rtl] &
+    margin-left: 0
+    margin-right: 10px
+
+
+  // You can even use it as an argument to pseudo-class selectors.
+  :not(&)
+    opacity: 0.8
+
+@mixin unify-parent($child)
+  @at-root #{selector-unify(&, $child)}
+    @content
+
+
+
+.wrapper .field
+  @include unify-parent("input")
+
+@mixin app-background($color)
+  #{if(&, '&.app-background', '.app-background')}
+    background-color: $color
+    color: rgba(#fff, 0.75)
+
+@include app-background(#036)
+
+.sidebar
+  @include app-background(#c6538c)
+
+.accordion
+  max-width: 600px
+  margin: 4rem auto
+
+  &__copy
+    display: none
+    padding: 1rem 1.5rem 2rem 1.5rem
+    line-height: 1.6
+    font-size: 14px
+
+    &--open
+      display: block
+
+
+.alert:hover, %strong-alert
+  font-weight: bold
+
+%strong-alert:hover
+  color: red
+
+%toolbelt
+  box-sizing: border-box
+  border-top: 1px rgba(#000, .12) solid
+
+  &:hover
+    border: 2px rgba(#000, .5) solid
+
+.action-buttons
+  @extend %toolbelt
+  color: #4285f4
+
+$border-dark: rgba($base-color, 0.88)
+$black: #000 !default
+$border-radius: 0.25rem !default
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default
+$box-shadow: 0 0.5rem 1rem rgba($black, blue($black)) !default
+$border-radius: 0.1rem
+
+@import 'library'
+
+$global-variable: global value
+
+  // This would fail, because $local-variable isn't in scope:
+  // local: $local-variable
+
+$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)
+
+.alert
+  // Instead of $theme-color-#{warning}
+  background-color: map-get($theme-colors, "warning")
+
+@mixin corner-icon($name, $top-or-bottom, $left-or-right)
+  .icon-#{$name}
+    background-image: url("/icons/#{$name}.svg")
+    position: absolute
+    #{$top-or-bottom}: 0
+    #{$left-or-right}: 0
+
+@include corner-icon("mail", top, right)
+
+@mixin inline-animation($duration)
+  $name: inline-#{unique-id()}
+
+  @keyframes #{$name}
+    @content
+
+  animation-name: $name
+  animation-duration: $duration
+  animation-iteration-count: infinite
+
+
+.pulse
+  @include inline-animation(2s)
+    from
+      background-color: yellow
+    to
+      background-color: red
+
+.example
+  unquoted: #{"string"}
+
+  & &
+    padding:
+      bottom: 0
+      left: 0
+
+// style.sass
+@import 'foundation/code', 'foundation/lists'
+
+@import "theme.css"
+@import "http://fonts.googleapis.com/css?family=Droid+Sans"
+@import url(theme)
+@import "landscape" screen and (orientation: landscape)
+
+@mixin google-font($family)
+  @import url("http://fonts.googleapis.com/css?family=#{$family}")
+
+@include google-font("Droid Sans")
+
+@mixin horizontal-list
+  @include reset-list
+
+  li
+    display: inline-block
+    margin:
+      left: -2px
+      right: 2em
+
+nav ul
+  @include horizontal-list
+
+@mixin rtl($property, $ltr-value, $rtl-value)
+  #{$property}: $ltr-value
+
+  [dir=rtl] &
+    #{$property}: $rtl-value
+
+.sidebar
+  @include rtl(float, left, right)
+
+@mixin replace-text($image, $x: 50%, $y: 50%)
+  text-indent: -99999em
+  overflow: hidden
+  text-align: left
+
+  background:
+    image: $image
+    repeat: no-repeat
+    position: $x $y
+
+.mail-icon
+  @include replace-text(url("/images/mail.svg"), 0)
+
+@include order(150px, "input.name", "input.address", "input.zip")
+
+@mixin syntax-colors($args...)
+  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)
+
+  @each $name, $color in keywords($args)
+    pre span.stx-#{$name}
+      color: $color
+
+@include syntax-colors($string: #080, $comment: #800, $variable: #60b)
+
+@mixin media($types...)
+  @each $type in $types
+    @media #{$type}
+      @content($type)
+
+@include media(screen, print) using ($type)
+  h1
+    font-size: 40px
+    @if $type == print
+      font-family: Calluna
+
+=reset-list
+  margin: 0
+  padding: 0
+  list-style: none
+
+=horizontal-list
+  +reset-list
+
+  li
+    display: inline-block
+    margin:
+      left: -2px
+      right: 2em
+
+nav ul
+  +horizontal-list
+@function pow($base, $exponent)
+  $result: 1
+  @for $_ from 1 through $exponent
+    $result: $result * $base
+
+  @return $result
+
+.sidebar
+  float: left
+  margin-left: pow(4, 3) * 1px
+
+@function sum($numbers...)
+  $sum: 0
+  @each $number in $numbers
+    $sum: $sum + $number
+
+  @return $sum
+
+.micro
+  width: sum(50px, 30px, 100px)
+@function str-insert($string, $insert, $index)
+  // Avoid making new strings if we don't need to.
+  @if str-length($string) == 0
+    @return $insert
+
+  $before: str-slice($string, 0, $index)
+  $after: str-slice($string, $index)
+  @return $before + $insert + $after
+
+.error
+  border: 1px #f00
+  background-color: #fdd
+
+  &--serious
+    @extend .error
+    border-width: 3px
+
+@mixin reflexive-position($property, $value)
+  @if $property != left and $property != right
+    @error "Property #{$property} must be either left or right."
+
+  $left-value: if($property == right, initial, $value)
+  $right-value: if($property == right, $value, initial)
+
+  left: $left-value
+  right: $right-value
+  [dir=rtl] &
+    left: $right-value
+    right: $left-value
+
+$known-prefixes: webkit, moz, ms, o
+
+@mixin prefix($property, $value, $prefixes)
+  @each $prefix in $prefixes
+    @if not index($known-prefixes, $prefix)
+      @warn "Unknown prefix #{$prefix}."
+
+
+    -#{$prefix}-#{$property}: $value
+
+  #{$property}: $value
+
+
+.tilt
+  // Oops, we typo'd "webkit" as "wekbit"!
+  @include prefix(transform, rotate(15deg), wekbit ms)
+
+@mixin inset-divider-offset($offset, $padding)
+  $divider-offset: (2 * $padding) + $offset
+  @debug "divider offset: #{$divider-offset}"
+
+  margin-left: $divider-offset
+  width: calc(100% - #{$divider-offset})
+
+@mixin unify-parent($child)
+  @at-root #{selector-unify(&, $child)}
+    @content
+
+
+.square-av
+  @include avatar(100px, $circle: false)
+.circle-av
+  @include avatar(100px, $circle: true)
+
+@mixin theme-colors($light-theme: true)
+  @if $light-theme
+    background-color: $light-background
+    color: $light-text
+  @else
+    background-color: $dark-background
+    color: $dark-text
+
+.banner
+  @include theme-colors($light-theme: true)
+  body.dark &
+    @include theme-colors($light-theme: false)
+
+@mixin triangle($size, $color, $direction)
+  height: 0
+  width: 0
+
+  border-color: transparent
+  border-style: solid
+  border-width: $size / 2
+
+  @if $direction == up
+    border-bottom-color: $color
+  @else if $direction == right
+    border-left-color: $color
+  @else if $direction == down
+    border-top-color: $color
+  @else if $direction == left
+    border-right-color: $color
+  @else
+    @error "Unknown direction #{$direction}."
+
+@each $size in $sizes
+  .icon-#{$size}
+    font-size: $size
+    height: $size
+    width: $size
+
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
+
+@each $name, $glyph in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+
+$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px
+
+@each $name, $glyph, $size in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+    font-size: $size
+
+@for $i from 1 through 3
+  ul:nth-child(3n + #{$i})
+    background-color: lighten($base-color, $i * 5%)
+
+/// Divides `$value` by `$ratio` until it's below `$base`.
+@function scale-below($value, $base, $ratio: 1.618)
+  @while $value > $base
+    $value: $value / $ratio
+  @return $value
+
+@namespace svg url(http://www.w3.org/2000/svg)
+
+@font-face
+  font-family: "Open Sans"
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
+
+@counter-style thumbs
+  system: cyclic
+  symbols: "\1F44D"
+
+@mixin sticky-position
+  position: fixed
+  @supports (position: sticky)
+    position: sticky
+
+@media (hover: hover)
+  .button:hover
+    border: 2px solid black
+
+    @media (color)
+      border-color: #036
+
+@keyframes slide-in
+  from
+    margin-left: 100%
+    width: 300%
+
+
+  70%
+    margin-left: 90%
+    width: 150%
+
+
+  to
+    margin-left: 0%
+    width: 100%
+
+@debug 100  // 100
+@debug 0.8  // 0.8
+@debug 16px  // 16px
+@debug 5px * 2px  // 10px*px (read "square pixels")
+@debug 5.2e3  // 5200
+@debug 6e-2  // 0.06
+@debug 4px * 6px  // 24px*px (read "square pixels")
+@debug 5px / 2s  // 2.5px/s (read "pixels per second")
+@debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
+//                                 (read "pixel-degrees per second-em")
+
+$degrees-per-second: 20deg/1s
+@debug $degrees-per-second  // 20deg/s
+@debug 1 / $degrees-per-second  // 0.05s/deg
+$transition-speed: 1s/50px
+
+@debug unquote(".widget:hover")  // .widget:hover
+@debug quote(bold)  // "bold"
+@debug 0.012345678912345  // 0.0123456789
+@debug 0.01234567891 == 0.01234567899  // true
+@debug 1.00000000009  // 1
+@debug 0.99999999991  // 1
+@debug "\""  // '"'
+@debug \.widget  // \.widget
+@debug "\a"  // "\a" (a string containing only a newline)
+@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
+@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"
+@debug "Helvetica Neue"  // "Helvetica Neue"
+@debug "C:\\Program Files"  // "C:\\Program Files"
+@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
+@debug "line1\a line2"  // "line1\a line2"
+
+$roboto-variant: "Mono"
+@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"
+@debug bold  // bold
+@debug -webkit-flex  // -webkit-flex
+@debug --123  // --123
+
+$prefix: ms
+@debug -#{$prefix}-flex  // -ms-flex
+@debug \1F46D  // 👭
+@debug \21  // \!
+@debug \7Fx  // \7f x
+@debug str-length(\7Fx)  // 5
+@debug str-index("Helvetica Neue", "Helvetica")  // 1
+@debug str-index("Helvetica Neue", "Neue")  // 11
+@debug str-slice("Roboto Mono", -4)  // "Mono"
+@debug #f2ece4 // #f2ece4
+@debug #b37399aa // rgba(179, 115, 153, 67%)
+@debug midnightblue // #191970
+@debug rgb(204, 102, 153) // #c69
+@debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8)
+@debug hsl(228, 7%, 86%) // #dadbdf
+@debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7)
+$venus: #998099
+
+@debug scale-color($venus, $lightness: +15%) // #a893a8
+@debug mix($venus, midnightblue) // #594d85
+@debug nth(10px 12px 16px, 2)  // 12px
+@debug nth([line1, line2, line3], -1)  // line3
+$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
+
+@function prefixes-for-browsers($browsers)
+  $prefixes: ()
+  @each $browser in $browsers
+    $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser))
+
+  @return $prefixes
+
+@debug prefixes-for-browsers("firefox" "ie")  // moz ms
+@mixin syntax-colors($args...)
+  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)
+
+  @each $name, $color in keywords($args)
+    pre span.stx-#{$name}
+      color: $color
+
+@include syntax-colors($string: #080, $comment: #800, $variable: #60b);
+$font-weights: ("regular": 400, "medium": 500, "bold": 700)
+
+@debug map-get($font-weights, "medium")  // 500
+@debug map-get($font-weights, "extra-bold")  // null
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
+
+@each $name, $glyph in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+
+$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
+
+@mixin add-browser-prefix($browser, $prefix)
+  $prefixes-by-browser: map-merge($prefixes-by-browser, ($browser: $prefix))
+
+@include add-browser-prefix("opera", o)
+@debug $prefixes-by-browser
+// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)
+@debug 1px == 2px  // false
+@debug 1px == 1px  // true
+@debug 10px < 3px  // false
+@debug comparable(100px, 3in)  // true
+
+@debug str-index("Helvetica Neue", "Roboto")  // null
+@debug map-get(("large": 20px), "small")  // null
+@debug &  // null
+$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")
+
+h3
+  font: 18px bold map-get($fonts, "sans")
+
+$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")
+
+h3
+  font:
+    size: 18px
+    weight: bold
+    family: map-get($fonts, "sans")
+
+copy of $list with all elements for which $condition returns `true`
+/// removed.
+@function remove-where($list, $condition)
+  $new-list: ()
+  $separator: list-separator($list)
+  @each $element in $list
+    @if not call($condition, $element)
+      $new-list: append($new-list, $element, $separator: $separator)
+
+  @return $new-list
+
+$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif
+
+content
+  @function contains-helvetica($string)
+    @return str-index($string, "Helvetica")
+
+  font-family: remove-where($fonts, get-function("contains-helvetica"))
+
+@debug 1px == 1px  // true
+@debug 1px != 1em  // true
+@debug 1 != 1px  // true
+@debug 96px == 1in  // true
+
+@debug "Helvetica" == Helvetica  // true
+@debug "Helvetica" != "Arial"  // true
+
+@debug hsl(34, 35%, 92.1%) == #f2ece4  // true
+@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8)  // true
+
+@debug (5px 7px 10px) == (5px 7px 10px)  // true
+@debug (5px 7px 10px) != (10px 14px 20px)  // true
+@debug (5px 7px 10px) != (5px, 7px, 10px)  // true
+@debug (5px 7px 10px) != [5px 7px 10px]  // true
+
+$theme: ("venus": #998099, "nebula": #d2e1dd)
+@debug $theme == ("venus": #998099, "nebula": #d2e1dd)  // true
+@debug $theme != ("venus": #998099, "iron": #dadbdf)  // true
+
+@debug true == true  // true
+@debug true != false  // true
+@debug null != false  // true
+
+@debug get-function("rgba") == get-function("rgba")  // true
+@debug get-function("rgba") != get-function("hsla")  // true
+
+@debug 10s + 15s  // 25s
+@debug 1in - 10px  // 0.8958333333in
+@debug 5px * 3px  // 15px*px
+@debug (12px/4px)  // 3
+@debug 1in % 9px  // 0.0625in
+@debug 15px / 30px  // 15px/30px
+@debug (10px + 5px) / 30px  // 0.5
+
+$result: 15px / 30px
+@debug $result  // 0.5
+
+@function fifteen-divided-by-thirty()
+  @return 15px / 30px
+
+@debug fifteen-divided-by-thirty()  // 0.5
+
+@debug (15px/30px)  // 0.5
+@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
+@debug 15px/30px + 1  // 1.5
+
+@debug 4px * 6px  // 24px*px (read "square pixels")
+@debug 5px / 2s  // 2.5px/s (read "pixels per second")
+@debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
+//                                 (read "pixel-degrees per second-em")
+
+$degrees-per-second: 20deg/1s
+@debug $degrees-per-second  // 20deg/s
+@debug 1 / $degrees-per-second  // 0.05s/deg
+@debug 100 > 50  // true
+@debug 10px < 17px  // true
+@debug 96px >= 1in  // true
+@debug 1000ms <= 1s  // true
+@debug "Helvetica" + " Neue"  // "Helvetica Neue"
+@debug sans- + serif  // sans-serif
+@debug #{10px + 5px} / 30px  // 15px/30px
+@debug sans - serif  // sans-serif
+
+@debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
+@debug true + " is a boolean value"  // "true is a boolean value";
+
+@debug / 15px  // /15px
+@debug - moz  // -moz
+@debug not true  // false
+@debug not false  // true
+
+@debug true and true  // true
+@debug true and false  // false
+
+@debug true or false  // true
+@debug false or false  // false
+@debug var(--main-bg-color)  // var(--main-bg-color)
+
+$primary: #f2ece4
+$accent: #e1d7d2
+@debug radial-gradient($primary, $accent)  // radial-gradient(#f2ece4, #e1d7d2)
+@debug str-index("Helvetica Neue", "Helvetica")  // 1
+@debug str-index("Helvetica Neue", "Neue")  // 11
+@debug comparable(2px, 1px)  // true
+@debug comparable(100px, 3em)  // false
+@debug comparable(10cm, 3mm)  // true
+@debug append(10px 20px, 30px)  // 10px 20px 30px
+@debug append((blue, red), green)  // blue, red, green
+@debug append(10px 20px, 30px 40px)  // 10px 20px (30px 40px)
+@debug append(10px, 20px, $separator: comma)  // 10px, 20px
+@debug append((blue, red), green, $separator: space)  // blue red green
+@mixin syntax-colors($args...)
+  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)
+
+  @each $name, $color in keywords($args)
+    pre span.stx-#{$name}
+      color: $color
+
+@include syntax-colors($string: #080, $comment: #800, $variable: #60b);
+
+$font-weights: ("regular": 400, "medium": 500, "bold": 700)
+
+@debug map-values($font-weights)  // 400, 500, 700
+
+.icon-#{$name}
+  position: absolute
+  #{$top-or-bottom}: 0
+  -#{$prefix}-#{$property}: $value
+  .icon-#{$name}
+    position: absolute
+    #{$top-or-bottom}: 0
+    -#{$prefix}-#{$property}-image: $value
diff --git a/autotests/folding/highlight.scss.fold b/autotests/folding/highlight.scss.fold
index 2b21afb..4f7a2c1 100644
--- a/autotests/folding/highlight.scss.fold
+++ b/autotests/folding/highlight.scss.fold
@@ -1,709 +1,719 @@
 <beginfold id='3'>/*</beginfold id='3'>*
  * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.
  <endfold id='3'>*/</endfold id='3'>
 
 @import url("othersheet.css") screen, tv;
 
 body <beginfold id='1'>{</beginfold id='1'>
 	font-size: 15pt;
 	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
 	margin-top: 0px;			<beginfold id='3'>/*</beginfold id='3'> yet another comment <endfold id='3'>*/</endfold id='3'>
 	margin-bottom: 0px;
 	margin-left: 0px;
 	margin-right: 0px;
 <endfold id='1'>}</endfold id='1'>
 
 .something
 <beginfold id='1'>{</beginfold id='1'>
 	margin-right: 0px;
 	color: #cdd;
 	color: #AAFE04;
 	color: rgb(10%,30%,43%);
 	background: maroon;
 <endfold id='1'>}</endfold id='1'>
 
 a:hover <beginfold id='1'>{</beginfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 #header,
 p.intro:first-letter,
 p:lang(nl),
 img[align="right"]
 <beginfold id='1'>{</beginfold id='1'>
 	border: 1px solid Qt::red !important;
 	-moz-border-radius: 15px; <beginfold id='3'>/*</beginfold id='3'> unknown properties render italic <endfold id='3'>*/</endfold id='3'>
 <endfold id='1'>}</endfold id='1'>
 
 @media print <beginfold id='1'>{</beginfold id='1'>
 
 	#header
 	<beginfold id='1'>{</beginfold id='1'>
 		display: none;
 	<endfold id='1'>}</endfold id='1'>
 
 <endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'>
 TODO: add more tests, e.g. media
 <endfold id='3'>*/</endfold id='3'>
 
 
 .nice-look <beginfold id='1'>{</beginfold id='1'>
 	font-variant-alternates: styleset(nice-style);
 <endfold id='1'>}</endfold id='1'>
 
 ul <beginfold id='1'>{</beginfold id='1'>
 	list-style: thumbs;
 <endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'> SVG <a> <endfold id='3'>*/</endfold id='3'>
 svg|a <beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'> XHTML and SVG <a> <endfold id='3'>*/</endfold id='3'>
 *|a <beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 
 *<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 .class<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 #id<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 :hover<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 :lang(fr)<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E>F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E > F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E~F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E ~ F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E:first-child<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E:visited<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E::after<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E:lang(c)<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E:lang(fr-ca)<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E + F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E+F<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo=warning]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo="warning"]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo~="warning"]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo^="warning"]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo$="warning"]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[foo*="warning"]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E[lang|="en"]<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 DIV.warning<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 DIV .warning<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E#myid<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E #myid<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E,E<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E, E<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E ,E<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 E , E<beginfold id='1'>{</beginfold id='1'><endfold id='1'>}</endfold id='1'>
 
 p:nth-child(2) <beginfold id='1'>{</beginfold id='1'>
 	background: red;
 <endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'> Elements that are not <div> or <span> elements <endfold id='3'>*/</endfold id='3'>
 body :not(div):not(span) <beginfold id='1'>{</beginfold id='1'>
 	font-weight: bold;
 <endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'> Elements that are not `.crazy` or `.fancy` <endfold id='3'>*/</endfold id='3'>
 <beginfold id='3'>/*</beginfold id='3'> Note that this syntax is not well supported yet. <endfold id='3'>*/</endfold id='3'>
 body :not(.crazy, .fancy) <beginfold id='1'>{</beginfold id='1'>
 	font-family: sans-serif;
 <endfold id='1'>}</endfold id='1'>
 
 :nth-child(odd) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 :nth-child(even) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 :nth-child(4) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 :nth-child(4n) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 :nth-child(3n+4) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 :nth-child(-n+3) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 :nth-child(n+8):nth-child(-n+15) <beginfold id='1'>{</beginfold id='1'> color: lime; <endfold id='1'>}</endfold id='1'>
 
 .first span:nth-child(2n+1),
 .second span:nth-child(2n+1),
 .third span:nth-of-type(2n+1) <beginfold id='1'>{</beginfold id='1'>
 	background-color: lime;
 	unknown-property: lime;
 <endfold id='1'>}</endfold id='1'>
 
 :root<beginfold id='1'>{</beginfold id='1'>
 	--foo: if(x > 5) this.width = 10; <beginfold id='3'>/*</beginfold id='3'> valid custom property, invalid in any normal property <endfold id='3'>*/</endfold id='3'>
 <endfold id='1'>}</endfold id='1'>
 
 :root,
 :root:lang(en) <beginfold id='1'>{</beginfold id='1'>--external-link: "external link";<endfold id='1'>}</endfold id='1'>
 :root:lang(de) <beginfold id='1'>{</beginfold id='1'>--external-link: "externer Link";<endfold id='1'>}</endfold id='1'>
 
 a[href^="http"]::after <beginfold id='1'>{</beginfold id='1'>content: " (" var(--external-link) ")"<endfold id='1'>}</endfold id='1'>
 
 one   <beginfold id='1'>{</beginfold id='1'> --foo: 10px; <endfold id='1'>}</endfold id='1'>
 two   <beginfold id='1'>{</beginfold id='1'> --bar: calc(var(--foo) + 10px); <endfold id='1'>}</endfold id='1'>
 three <beginfold id='1'>{</beginfold id='1'> --foo: calc(var(--bar) + 10px); <endfold id='1'>}</endfold id='1'>
 .foo <beginfold id='1'>{</beginfold id='1'>
 	--gap: 20;
 	margin-top: var(--gap)px; <beginfold id='3'>/*</beginfold id='3'>20 px<endfold id='3'>*/</endfold id='3'>
 	margin-top: calc(var(--gap) * 1px); <beginfold id='3'>/*</beginfold id='3'>20px<endfold id='3'>*/</endfold id='3'>
 <endfold id='1'>}</endfold id='1'>
 
 foo <beginfold id='1'>{</beginfold id='1'>
 	width: calc(50% -8px); <beginfold id='3'>/*</beginfold id='3'> invalid <endfold id='3'>*/</endfold id='3'>
 	width: calc(50%- 8px); <beginfold id='3'>/*</beginfold id='3'> invalid <endfold id='3'>*/</endfold id='3'>
 	width: calc(50% +8px); <beginfold id='3'>/*</beginfold id='3'> invalid <endfold id='3'>*/</endfold id='3'>
 	width: calc(50%+ 8px); <beginfold id='3'>/*</beginfold id='3'> invalid <endfold id='3'>*/</endfold id='3'>
 	width: calc(2px -var(--a)); <beginfold id='3'>/*</beginfold id='3'> invalid <endfold id='3'>*/</endfold id='3'>
 	width: calc(50%*-8px);
 	width: calc(50% - 8px);
 	width: calc(50% + -8px);
 	width: calc(50% +(8px));
 	width: calc(2px -(var(--a)));
 <endfold id='1'>}</endfold id='1'>
 
 sweet-alert input:focus::-moz-placeholder <beginfold id='1'>{</beginfold id='1'>
 	-webkit-transition: opacity 0.3s 0.03s ease;
 	transition: opacity 0.3s 0.03s ease;
 	opacity: 0.5;
 <endfold id='1'>}</endfold id='1'>
 
 
 @font-feature-values Font One <beginfold id='1'>{</beginfold id='1'>
 	@styleset <beginfold id='1'>{</beginfold id='1'>
 		nice-style: 12;
 	<endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @font-feature-values Font Two <beginfold id='1'>{</beginfold id='1'>
 	@styleset <beginfold id='1'>{</beginfold id='1'>
 		nice-style: 4;
 	<endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @counter-style thumbs <beginfold id='1'>{</beginfold id='1'>
 	system: cyclic;
 	symbols: "\1F44D";
 	suffix: " ";
 <endfold id='1'>}</endfold id='1'>
 
 @font-face <beginfold id='1'>{</beginfold id='1'>
 	font-family: "Open Sans";
 	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 	url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 <endfold id='1'>}</endfold id='1'>
 
 @page <beginfold id='1'>{</beginfold id='1'>
 	margin: 1cm;
 <endfold id='1'>}</endfold id='1'>
 
 @page :first <beginfold id='1'>{</beginfold id='1'>
 	margin: 2cm;
 	<beginfold id='3'>/*</beginfold id='3'> comments <endfold id='3'>*/</endfold id='3'>
 	marks: crop cross;
 <endfold id='1'>}</endfold id='1'>
 
 @page :unknown <beginfold id='1'>{</beginfold id='1'>
 	margin: 2cm;
 <endfold id='1'>}</endfold id='1'>
 
 @font-face <beginfold id='1'>{</beginfold id='1'>
 	unknown: 2px;
 	<beginfold id='3'>/*</beginfold id='3'> comments <endfold id='3'>*/</endfold id='3'>
 	font-family: "Bitstream Vera Serif Bold";
 	src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
 <endfold id='1'>}</endfold id='1'>
 
 @viewport <beginfold id='1'>{</beginfold id='1'>
 	zoom: 0.75;
 	<beginfold id='3'>/*</beginfold id='3'> comments <endfold id='3'>*/</endfold id='3'>
 	min-zoom: 0.5;
 	max-zoom: 0.9;
 <endfold id='1'>}</endfold id='1'>
 
 @viewport <beginfold id='1'>{</beginfold id='1'>
 	orientation: landscape;
 	<beginfold id='3'>/*</beginfold id='3'> comments <endfold id='3'>*/</endfold id='3'>
 	orientation: landscape;
 <endfold id='1'>}</endfold id='1'>
 
 @document url("https://www.example.com/") <beginfold id='1'>{</beginfold id='1'>
 	h1 <beginfold id='1'>{</beginfold id='1'>
 		color: green;
 	<endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @supports (display: grid) <beginfold id='1'>{</beginfold id='1'>
 	div <beginfold id='1'>{</beginfold id='1'>
 		display: grid;
 	<endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @media (max-width: 600px) <beginfold id='1'>{</beginfold id='1'>
 	.sidebar <beginfold id='1'>{</beginfold id='1'>
 		display: none;
 	<endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @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 <beginfold id='1'>{</beginfold id='1'>
 	from <beginfold id='1'>{</beginfold id='1'> margin-top: 50px; <endfold id='1'>}</endfold id='1'>
 	50%  <beginfold id='1'>{</beginfold id='1'> margin-top: 150px !important; <endfold id='1'>}</endfold id='1'> <beginfold id='3'>/*</beginfold id='3'> ignored <endfold id='3'>*/</endfold id='3'>
 	to   <beginfold id='1'>{</beginfold id='1'> margin-top: 100px; <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @keyframes important2 <beginfold id='1'>{</beginfold id='1'>
 	from <beginfold id='1'>{</beginfold id='1'> margin-top: 50px;
 		margin-bottom: 100px; <endfold id='1'>}</endfold id='1'>
 	to   <beginfold id='1'>{</beginfold id='1'> margin-top: 150px !important; <beginfold id='3'>/*</beginfold id='3'> ignored <endfold id='3'>*/</endfold id='3'>
 		margin-bottom: 50px; <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @keyframes slidein <beginfold id='1'>{</beginfold id='1'>
 	from <beginfold id='1'>{</beginfold id='1'>
 		margin-left: 100%;
 		width: 300%;
 	<endfold id='1'>}</endfold id='1'>
 
 	to <beginfold id='1'>{</beginfold id='1'>
 		margin-left: 0%;
 		width: 100%;
 	<endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @media print <beginfold id='1'>{</beginfold id='1'>
 	a:hover <beginfold id='1'>{</beginfold id='1'> color: red <endfold id='1'>}</endfold id='1'>
 	<beginfold id='3'>/*</beginfold id='3'> comments <endfold id='3'>*/</endfold id='3'>
 	a:hover <beginfold id='1'>{</beginfold id='1'> color: red <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'>*
  * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
  <endfold id='3'>*/</endfold id='3'>
 
 #main p <beginfold id='1'>{</beginfold id='1'>
   color: #00ff00;
   width: 97%;
 
   .redbox <beginfold id='1'>{</beginfold id='1'>
     background-color: #ff0000;
     color: #000000;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 a <beginfold id='1'>{</beginfold id='1'>
   font-weight: bold;
   text-decoration: none;
   &:hover <beginfold id='1'>{</beginfold id='1'> text-decoration: underline; <endfold id='1'>}</endfold id='1'>
   body.firefox & <beginfold id='1'>{</beginfold id='1'> font-weight: normal; <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 #main <beginfold id='1'>{</beginfold id='1'>
   color: black;
   a <beginfold id='1'>{</beginfold id='1'>
     font-weight: bold;
     &:hover <beginfold id='1'>{</beginfold id='1'> color: red; <endfold id='1'>}</endfold id='1'>
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 #main <beginfold id='1'>{</beginfold id='1'>
   color: black;
   &-sidebar <beginfold id='1'>{</beginfold id='1'> border: 1px solid; <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 .funky <beginfold id='1'>{</beginfold id='1'>
   font: <beginfold id='1'>{</beginfold id='1'>
     family: fantasy;
     size: 30em;
     weight: bold;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 .funky <beginfold id='1'>{</beginfold id='1'>
   font: 20px/24px fantasy <beginfold id='1'>{</beginfold id='1'>
     weight: bold;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 <beginfold id='3'>/*</beginfold id='3'> This comment is
  * several lines long.
  * since it uses the CSS comment syntax,
  * it will appear in the CSS output. <endfold id='3'>*/</endfold id='3'>
 body <beginfold id='1'>{</beginfold id='1'> color: black; <endfold id='1'>}</endfold id='1'>
 
 // 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 <beginfold id='1'>{</beginfold id='1'> color: green; <endfold id='1'>}</endfold id='1'>
 
 $version: "1.2.3";
 <beginfold id='3'>/*</beginfold id='3'> This CSS is generated by My Snazzy Framework version #{$version}. <endfold id='3'>*/</endfold id='3'>
 
 $width: 5em;
 
 #main <beginfold id='1'>{</beginfold id='1'>
   width: $width;
 <endfold id='1'>}</endfold id='1'>
 
 #main <beginfold id='1'>{</beginfold id='1'>
   $width: 5em !global;
   width: $width;
 <endfold id='1'>}</endfold id='1'>
 
 #sidebar <beginfold id='1'>{</beginfold id='1'>
   width: $width;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin firefox-message($selector) <beginfold id='1'>{</beginfold id='1'>
   body.firefox #{$selector}:before <beginfold id='1'>{</beginfold id='1'>
     content: "Hi, Firefox users!";
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @include firefox-message(".header");
 
 $map: (key1: value1, key2: value2, key3: value3);
 
 p <beginfold id='1'>{</beginfold id='1'>
   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
 <endfold id='1'>}</endfold id='1'>
 
 p <beginfold id='1'>{</beginfold id='1'>
   $font-size: 12px;
   $line-height: 30px;
   font: #{$font-size}/#{$line-height};
 <endfold id='1'>}</endfold id='1'>
 
 p <beginfold id='1'>{</beginfold id='1'>
   color: #010203 + #040506;
   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
 <endfold id='1'>}</endfold id='1'>
 
 $translucent-red: rgba(255, 0, 0, 0.5);
 p <beginfold id='1'>{</beginfold id='1'>
   color: opacify($translucent-red, 0.3);
   background-color: transparentize($translucent-red, 0.25);
 <endfold id='1'>}</endfold id='1'>
 
 $translucent-red: rgba(255, 0, 0, 0.5);
 $green: #00ff00;
 div <beginfold id='1'>{</beginfold id='1'>
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
 <endfold id='1'>}</endfold id='1'>
 p <beginfold id='1'>{</beginfold id='1'>
   cursor: e + -resize;
 <endfold id='1'>}</endfold id='1'>
 p:before <beginfold id='1'>{</beginfold id='1'>
   content: "Foo " + Bar;
   font-family: sans- + "serif";
 <endfold id='1'>}</endfold id='1'>
 p:before <beginfold id='1'>{</beginfold id='1'>
   content: "I ate #{5 + 10} pies!";
 <endfold id='1'>}</endfold id='1'>
 $value: null;
 p:before <beginfold id='1'>{</beginfold id='1'>
   content: "I ate #{$value} pies!";
 <endfold id='1'>}</endfold id='1'>
 p <beginfold id='1'>{</beginfold id='1'>
   width: 1em + (2em * 3);
 <endfold id='1'>}</endfold id='1'>
 p <beginfold id='1'>{</beginfold id='1'>
   color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
 <endfold id='1'>}</endfold id='1'>
 $name: foo;
 $attr: border;
 p.#{$name} <beginfold id='1'>{</beginfold id='1'>
   #{$attr}-color: blue;
 <endfold id='1'>}</endfold id='1'>
 p <beginfold id='1'>{</beginfold id='1'>
   $font-size: 12px;
   $line-height: 30px;
   font: #{$font-size}/#{$line-height};
 <endfold id='1'>}</endfold id='1'>
 
 .foo.bar .baz.bang, .bip.qux <beginfold id='1'>{</beginfold id='1'>
     $selector: &;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin does-parent-exist <beginfold id='1'>{</beginfold id='1'>
   @if & <beginfold id='1'>{</beginfold id='1'>
     &:hover <beginfold id='1'>{</beginfold id='1'>
       color: red;
     <endfold id='1'>}</endfold id='1'>
   <endfold id='1'>}</endfold id='1'> @else <beginfold id='1'>{</beginfold id='1'>
     a <beginfold id='1'>{</beginfold id='1'>
       color: red;
     <endfold id='1'>}</endfold id='1'>
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 $content: "First content";
 $content: "Second content?" !default;
 $new_content: "First time reference" !default;
 
 #main <beginfold id='1'>{</beginfold id='1'>
   content: $content;
   new-content: $new_content;
 <endfold id='1'>}</endfold id='1'>
 
 @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 <beginfold id='1'>{</beginfold id='1'>
   @import "example";
 <endfold id='1'>}</endfold id='1'>
 
 .sidebar <beginfold id='1'>{</beginfold id='1'>
   width: 300px;
   @media screen and (orientation: landscape) <beginfold id='1'>{</beginfold id='1'>
     width: 500px;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 @media screen <beginfold id='1'>{</beginfold id='1'>
   .sidebar <beginfold id='1'>{</beginfold id='1'>
     @media (orientation: landscape) <beginfold id='1'>{</beginfold id='1'>
       width: 500px;
     <endfold id='1'>}</endfold id='1'>
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 $media: screen;
 $feature: -webkit-min-device-pixel-ratio;
 $value: 1.5;
 
 @media #{$media} and ($feature: $value) <beginfold id='1'>{</beginfold id='1'>
   .sidebar <beginfold id='1'>{</beginfold id='1'>
     width: 500px;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 .error <beginfold id='1'>{</beginfold id='1'>
   border: 1px #f00;
   background-color: #fdd;
 <endfold id='1'>}</endfold id='1'>
 .seriousError <beginfold id='1'>{</beginfold id='1'>
   @extend .error;
   border-width: 3px;
 <endfold id='1'>}</endfold id='1'>
 
 .hoverlink <beginfold id='1'>{</beginfold id='1'>
   @extend a:hover;
 <endfold id='1'>}</endfold id='1'>
 a:hover <beginfold id='1'>{</beginfold id='1'>
   text-decoration: underline;
 <endfold id='1'>}</endfold id='1'>
 
 #context a%extreme a %extreme <beginfold id='1'>{</beginfold id='1'>
   color: blue;
   font-weight: bold;
   font-size: 2em;
 <endfold id='1'>}</endfold id='1'>
 .notice <beginfold id='1'>{</beginfold id='1'>
   @extend %extreme;
 <endfold id='1'>}</endfold id='1'>
 
 a.important <beginfold id='1'>{</beginfold id='1'>
   @extend .notice !optional;
 <endfold id='1'>}</endfold id='1'>
 
 @media print <beginfold id='1'>{</beginfold id='1'>
   .page <beginfold id='1'>{</beginfold id='1'>
     width: 8in;
     @at-root (without: media) <beginfold id='1'>{</beginfold id='1'>
       color: red;
     <endfold id='1'>}</endfold id='1'>
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @debug 10em + 12em;
 
 @mixin adjust-location($x, $y) <beginfold id='1'>{</beginfold id='1'>
   @if unitless($x) <beginfold id='1'>{</beginfold id='1'>
     @warn "Assuming #{$x} to be in pixels";
     $x: 1px * $x;
   <endfold id='1'>}</endfold id='1'>
   @if unitless($y) <beginfold id='1'>{</beginfold id='1'>
     @warn "Assuming #{$y} to be in pixels";
     $y: 1px * $y;
   <endfold id='1'>}</endfold id='1'>
   position: relative; left: $x; top: $y;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin adjust-location($x, $y) <beginfold id='1'>{</beginfold id='1'>
   @if unitless($x) <beginfold id='1'>{</beginfold id='1'>
     @error "$x may not be unitless, was #{$x}.";
   <endfold id='1'>}</endfold id='1'>
   @if unitless($y) <beginfold id='1'>{</beginfold id='1'>
     @error "$y may not be unitless, was #{$y}.";
   <endfold id='1'>}</endfold id='1'>
   position: relative; left: $x; top: $y;
 <endfold id='1'>}</endfold id='1'>
 
 p <beginfold id='1'>{</beginfold id='1'>
   @if 1 + 1 == 2 <beginfold id='1'>{</beginfold id='1'> border: 1px solid;  <endfold id='1'>}</endfold id='1'>
   @if 5 < 3      <beginfold id='1'>{</beginfold id='1'> border: 2px dotted; <endfold id='1'>}</endfold id='1'>
   @if null       <beginfold id='1'>{</beginfold id='1'> border: 3px double; <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 $type: monster;
 p <beginfold id='1'>{</beginfold id='1'>
   @if $type == ocean <beginfold id='1'>{</beginfold id='1'>
     color: blue;
   <endfold id='1'>}</endfold id='1'> @else if $type == matador <beginfold id='1'>{</beginfold id='1'>
     color: red;
   <endfold id='1'>}</endfold id='1'> @else if $type == monster <beginfold id='1'>{</beginfold id='1'>
     color: green;
   <endfold id='1'>}</endfold id='1'> @else <beginfold id='1'>{</beginfold id='1'>
     color: black;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @for $i from 1 through 3 <beginfold id='1'>{</beginfold id='1'>
   .item-#{$i} <beginfold id='1'>{</beginfold id='1'> width: 2em * $i; <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @each $animal in puma, sea-slug, egret, salamander <beginfold id='1'>{</beginfold id='1'>
   .#{$animal}-icon <beginfold id='1'>{</beginfold id='1'>
     background-image: url('/images/#{$animal}.png');
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @each $animal, $color, $cursor in (puma, black, default),
                                   (sea-slug, blue, pointer),
                                   (egret, white, move) <beginfold id='1'>{</beginfold id='1'>
   .#{$animal}-icon <beginfold id='1'>{</beginfold id='1'>
     background-image: url('/images/#{$animal}.png');
     border: 2px solid $color;
     cursor: $cursor;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) <beginfold id='1'>{</beginfold id='1'>
   #{$header} <beginfold id='1'>{</beginfold id='1'>
     font-size: $size;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 $i: 6;
 @while $i > 0 <beginfold id='1'>{</beginfold id='1'>
   .item-#{$i} <beginfold id='1'>{</beginfold id='1'> width: 2em * $i; <endfold id='1'>}</endfold id='1'>
   $i: $i - 2;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin large-text <beginfold id='1'>{</beginfold id='1'>
   font: <beginfold id='1'>{</beginfold id='1'>
     family: Arial;
     size: 20px;
     weight: bold;
   <endfold id='1'>}</endfold id='1'>
   color: #ff0000;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin clearfix <beginfold id='1'>{</beginfold id='1'>
   display: inline-block;
   &:after <beginfold id='1'>{</beginfold id='1'>
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   <endfold id='1'>}</endfold id='1'>
   * html & <beginfold id='1'>{</beginfold id='1'> height: 1px <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 .page-title <beginfold id='1'>{</beginfold id='1'>
   @include large-text;
   padding: 4px;
   margin-top: 10px;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin compound <beginfold id='1'>{</beginfold id='1'>
   @include highlighted-background;
   @include header-text;
 <endfold id='1'>}</endfold id='1'>
 
 @mixin highlighted-background <beginfold id='1'>{</beginfold id='1'> background-color: #fc0; <endfold id='1'>}</endfold id='1'>
 @mixin header-text <beginfold id='1'>{</beginfold id='1'> font-size: 20px; <endfold id='1'>}</endfold id='1'>
 
 @mixin sexy-border($color, $width) <beginfold id='1'>{</beginfold id='1'>
   border: <beginfold id='1'>{</beginfold id='1'>
     color: $color;
     width: $width;
     style: dashed;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 p <beginfold id='1'>{</beginfold id='1'> @include sexy-border(blue, 1in); <endfold id='1'>}</endfold id='1'>
 
 p <beginfold id='1'>{</beginfold id='1'> @include sexy-border($color: blue); <endfold id='1'>}</endfold id='1'>
 h1 <beginfold id='1'>{</beginfold id='1'> @include sexy-border($color: blue, $width: 2in); <endfold id='1'>}</endfold id='1'>
 
 
 @mixin colors($text, $background, $border) <beginfold id='1'>{</beginfold id='1'>
   color: $text;
   background-color: $background;
   border-color: $border;
 <endfold id='1'>}</endfold id='1'>
 
 $values: #ff0000, #00ff00, #0000ff;
 .primary <beginfold id='1'>{</beginfold id='1'>
   @include colors($values...);
 <endfold id='1'>}</endfold id='1'>
 
 $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
 .secondary <beginfold id='1'>{</beginfold id='1'>
   @include colors($value-map...);
 <endfold id='1'>}</endfold id='1'>
 
 @mixin apply-to-ie6-only <beginfold id='1'>{</beginfold id='1'>
   * html <beginfold id='1'>{</beginfold id='1'>
     @content;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 @include apply-to-ie6-only <beginfold id='1'>{</beginfold id='1'>
   #logo <beginfold id='1'>{</beginfold id='1'>
     background-image: url(/logo.gif);
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 $grid-width: 40px;
 $gutter-width: 10px;
 
 @function grid-width($n) <beginfold id='1'>{</beginfold id='1'>
   @return $n * $grid-width + ($n - 1) * $gutter-width;
 <endfold id='1'>}</endfold id='1'>
 
 #sidebar <beginfold id='1'>{</beginfold id='1'> width: grid-width(5); <endfold id='1'>}</endfold id='1'>
 
 @mixin unify-parent($child) <beginfold id='1'>{</beginfold id='1'>
   @at-root #{selector-unify(&, $child)} <beginfold id='1'>{</beginfold id='1'>
     @content;
   <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
 
 :root <beginfold id='1'>{</beginfold id='1'>
   --font-family-sans-serif: #{inspect($font-family-sans-serif)};
   --font-family-monospace: #{inspect($font-family-monospace)};
 <endfold id='1'>}</endfold id='1'>
 
 div <beginfold id='1'>{</beginfold id='1'>
   background-image: url("/icons/#{$name}.svg");
   font: #{"string"};
+
+.icon-#{$name} <beginfold id='1'>{</beginfold id='1'>
+  position: absolute;
+  #{$top-or-bottom}: 0;
+  -#{$prefix}-#{$property}: $value;
+  .icon-#{$name} <beginfold id='1'>{</beginfold id='1'>
+    position: absolute;
+    #{$top-or-bottom}: 0;
+    -#{$prefix}-#{$property}-image: $value
+  <endfold id='1'>}</endfold id='1'>
 <endfold id='1'>}</endfold id='1'>
diff --git a/autotests/html/highlight.css.html b/autotests/html/highlight.css.html
index a3efe69..21fa094 100644
--- a/autotests/html/highlight.css.html
+++ b/autotests/html/highlight.css.html
@@ -1,293 +1,293 @@
 <!DOCTYPE html>
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>highlight.css</title>
 <meta name="generator" content="KF5::SyntaxHighlighting (CSS)"/>
 </head><body style="color:#1f1c1b"><pre>
 <span style="color:#898887;">/**</span>
 <span style="color:#898887;"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span>
 <span style="color:#898887;"> */</span>
 
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;othersheet.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span>, tv;
 
 body {
 	<span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">pt</span>;
 	<span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#bf0303;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>;
 	<span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;			<span style="color:#898887;">/* yet another comment */</span>
 	<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 	<span style="color:#bf0303;text-decoration:underline;">// this is no comment, it's just broken!</span>
 	<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 	<span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 }
 
 <span style="color:#644a9b;">.something</span>
 {
 	<span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 	<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#cdd</span>;
 	<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#AAFE04</span>;
 	<span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">43</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">maroon</span>;
 }
 
 a<span style="color:#b08000;font-style:italic;">:hover</span> {
 }
 
 <span style="color:#006e28;font-weight:bold;">#header</span>,
 p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span>,
 p<span style="color:#b08000;font-style:italic;">:lang(nl)</span>,
 img<span style="color:#0095ff;font-weight:bold;">[align</span>=<span style="color:#bf0303;">&quot;right&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
 {
 	<span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#aa5500;">red</span> <span style="color:#0057ae;">!important</span>;
 	<span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">/* unknown properties render italic */</span>
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
 
 	<span style="color:#006e28;font-weight:bold;">#header</span>
 	{
 		<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
 	}
 
 }
 
 <span style="color:#898887;">/*</span>
 <span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span>
 <span style="color:#898887;">*/</span>
 
 
 <span style="color:#644a9b;">.nice-look</span> {
 	<span style="font-weight:bold;">font-variant-alternates</span>: styleset<span style="color:#644a9b;">(</span>nice-style<span style="color:#644a9b;">)</span>;
 }
 
 ul {
 	<span style="font-weight:bold;">list-style</span>: thumbs;
 }
 
 <span style="color:#898887;">/* SVG &lt;a&gt; */</span>
 svg|a {}
 
 <span style="color:#898887;">/* XHTML and SVG &lt;a&gt; */</span>
 *|a {}
 
 *{}
 <span style="color:#644a9b;">.class</span>{}
 <span style="color:#006e28;font-weight:bold;">#id</span>{}
 <span style="color:#b08000;font-style:italic;">:hover</span>{}
 <span style="color:#b08000;font-style:italic;">:lang(fr)</span>{}
 E{}
 E F{}
 E&gt;F{}
 E &gt; F{}
 E~F{}
 E ~ F{}
 E<span style="color:#b08000;font-style:italic;">:first-child</span>{}
 E<span style="color:#b08000;font-style:italic;">:visited</span>{}
 E<span style="color:#b08000;font-style:italic;">::after</span>{}
 E<span style="color:#b08000;font-style:italic;">:lang(c)</span>{}
 E<span style="color:#b08000;font-style:italic;">:lang(fr-ca)</span>{}
 E + F{}
 E+F{}
 E<span style="color:#0095ff;font-weight:bold;">[foo]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">warning</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>~=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>^=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>$=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>*=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[lang</span>|=<span style="color:#bf0303;">&quot;en&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 DIV<span style="color:#644a9b;">.warning</span>{}
 DIV <span style="color:#644a9b;">.warning</span>{}
 E<span style="color:#006e28;font-weight:bold;">#myid</span>{}
 E <span style="color:#006e28;font-weight:bold;">#myid</span>{}
 E,E{}
 E, E{}
 E ,E{}
 E , E{}
 
 p<span style="color:#b08000;font-style:italic;">:nth-child(2)</span> {
 	<span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>;
 }
 
 <span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
 body <span style="color:#b08000;font-style:italic;">:not(</span>div<span style="color:#b08000;font-style:italic;">):not(</span>span<span style="color:#b08000;font-style:italic;">)</span> {
 	<span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
 }
 
 <span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span>
 <span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span>
 body <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#644a9b;">.crazy</span>, <span style="color:#644a9b;">.fancy</span><span style="color:#b08000;font-style:italic;">)</span> {
 	<span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span>;
 }
 
 <span style="color:#b08000;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 
 <span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
 <span style="color:#644a9b;">.second</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
 <span style="color:#644a9b;">.third</span> span<span style="color:#b08000;font-style:italic;">:nth-of-type(2n+1)</span> {
 	<span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span>;
 	unknown-property: <span style="color:#aa5500;">lime</span>;
 }
 
 <span style="color:#b08000;font-style:italic;">:root</span>{
-	<span style="color:#0057ae;">--foo</span>: if<span style="color:#644a9b;">(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this<span style="color:#b08000;">.</span>width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
+	<span style="color:#0057ae;">--foo</span>: if<span style="color:#644a9b;">(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this.width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
 }
 
 <span style="color:#b08000;font-style:italic;">:root</span>,
 <span style="color:#b08000;font-style:italic;">:root:lang(en)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;external link&quot;</span>;}
 <span style="color:#b08000;font-style:italic;">:root:lang(de)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;externer Link&quot;</span>;}
 
 a<span style="color:#0095ff;font-weight:bold;">[href</span>^=<span style="color:#bf0303;">&quot;http&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span><span style="color:#b08000;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot; (&quot;</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--external-link</span><span style="color:#644a9b;">)</span> <span style="color:#bf0303;">&quot;)&quot;</span>}
 
 one   { <span style="color:#0057ae;">--foo</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; }
 two   { <span style="color:#0057ae;">--bar</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--foo</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
 three { <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--bar</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
 <span style="color:#644a9b;">.foo</span> {
 	<span style="color:#0057ae;">--gap</span>: <span style="color:#b08000;">20</span>;
 	<span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span>px; <span style="color:#898887;">/*20 px*/</span>
 	<span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span> * <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/*20px*/</span>
 }
 
 foo {
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%- <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> <span style="color:#b08000;">+8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span>%+ <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -var<span style="color:#644a9b;">(</span>--a<span style="color:#644a9b;">))</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>*<span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> - <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> + <span style="color:#b08000;">-8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> +(<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>)<span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -(<span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--a</span><span style="color:#644a9b;">)</span>)<span style="color:#644a9b;">)</span>;
 }
 
 sweet-alert input<span style="color:#b08000;font-style:italic;">:focus::-moz-placeholder</span> {
 	<span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
 	<span style="font-weight:bold;">transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
 	<span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.5</span>;
 }
 
 
 <span style="color:#ff5500;">@font-feature-values</span> Font One {
 	<span style="color:#ff5500;">@styleset</span> {
 		nice-style: <span style="color:#b08000;">12</span>;
 	}
 }
 
 <span style="color:#ff5500;">@font-feature-values</span> Font Two {
 	<span style="color:#ff5500;">@styleset</span> {
 		nice-style: <span style="color:#b08000;">4</span>;
 	}
 }
 
 <span style="color:#ff5500;">@counter-style</span> thumbs {
 	system: cyclic;
 	symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span>;
 	suffix: <span style="color:#bf0303;">&quot; &quot;</span>;
 }
 
 <span style="color:#ff5500;">@font-face</span> {
 	<span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span>;
 	<span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>,
 	<span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff&quot;</span><span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#ff5500;">@page</span> {
 	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">cm</span>;
 }
 
 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:first</span> {
 	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">marks</span>: <span style="color:#b08000;">crop</span> <span style="color:#b08000;">cross</span>;
 }
 
 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:unknown</span> {
 	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
 }
 
 <span style="color:#ff5500;">@font-face</span> {
 	unknown: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Bitstream Vera Serif Bold&quot;</span>;
 	<span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#ff5500;">@viewport</span> {
 	<span style="font-weight:bold;">zoom</span>: <span style="color:#b08000;">0.75</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">min-zoom</span>: <span style="color:#b08000;">0.5</span>;
 	<span style="font-weight:bold;">max-zoom</span>: <span style="color:#b08000;">0.9</span>;
 }
 
 <span style="color:#ff5500;">@viewport</span> {
 	<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
 }
 
 <span style="color:#ff5500;">@document</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;https://www.example.com/&quot;</span><span style="color:#644a9b;">)</span> {
 	h1 {
 		<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
 	}
 }
 
 <span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span>) {
 	div {
 		<span style="font-weight:bold;">display</span>: grid;
 	}
 }
 
 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>) {
 	<span style="color:#644a9b;">.sidebar</span> {
 		<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
 	}
 }
 
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;fineprint.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">fineprint.css</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'bluish.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">speech</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'custom.css'</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#644a9b;">)</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;common.css&quot;</span> <span style="color:#b08000;">screen</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'landscape.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">landscape</span>);
 
 <span style="color:#ff5500;">@namespace</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/1999/xhtml</span><span style="color:#644a9b;">)</span>;
 <span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span>;
 
 <span style="color:#ff5500;">@keyframes</span> important1 {
 	<span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
 	<span style="color:#b08000;">50%</span>  { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; } <span style="color:#898887;">/* ignored */</span>
 	<span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
 }
 
 <span style="color:#ff5500;">@keyframes</span> important2 {
 	<span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>;
 		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
 	<span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; <span style="color:#898887;">/* ignored */</span>
 		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
 }
 
 <span style="color:#ff5500;">@keyframes</span> slidein {
 	<span style="color:#b08000;">from</span> {
 		<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 		<span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
 	}
 
 	<span style="color:#b08000;">to</span> {
 		<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
 		<span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 	}
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
 	a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
 	<span style="color:#898887;">/* comments */</span>
 	a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
 }
 </pre></body></html>
diff --git a/autotests/html/highlight.sass.html b/autotests/html/highlight.sass.html
new file mode 100644
index 0000000..c26666e
--- /dev/null
+++ b/autotests/html/highlight.sass.html
@@ -0,0 +1,831 @@
+<!DOCTYPE html>
+<html><head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<title>highlight.sass</title>
+<meta name="generator" content="KF5::SyntaxHighlighting (SASS)"/>
+</head><body style="color:#1f1c1b"><pre>
+html,
+body,
+ul,
+ol
+  <span style="font-weight:bold;">margin</span>:  <span style="color:#b08000;">0</span>
+  <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">0</span>
+
+<span style="color:#ff5500;">@import</span> reset
+body
+  <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> Helvetica, <span style="color:#b08000;">sans-serif</span>
+  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#efefef</span>
+
+<span style="color:#0057ae;">$font-stack</span>:    Helvetica, <span style="color:#b08000;">sans-serif</span>
+<span style="color:#0057ae;">$primary-color</span>: <span style="color:#aa5500;">#333</span>
+
+body
+  <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> <span style="color:#0057ae;">$font-stack</span>
+  <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$primary-color</span>
+<span style="color:#644a9b;">.container</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>
+
+article<span style="color:#0095ff;font-weight:bold;">[role</span>=<span style="color:#bf0303;">&quot;main&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
+  <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>
+
+<span style="color:#644a9b;font-weight:bold;">%message-shared</span>
+  <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">#ccc</span>
+  <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>
+  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#333</span>
+
+<span style="color:#644a9b;">.message</span>
+  <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%message-shared</span>
+
+<span style="color:#644a9b;">.success</span>
+  <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%message-shared</span>
+  <span style="font-weight:bold;">border-color</span>: <span style="color:#aa5500;">green</span>
+
+<span style="color:#ff5500;">=</span><span style="color:#644a9b;">transform</span>(<span style="color:#0057ae;">$property</span>)
+  <span style="font-weight:bold;">-webkit-transform</span>: <span style="color:#0057ae;">$property</span>
+  <span style="font-weight:bold;">-ms-transform</span>: <span style="color:#0057ae;">$property</span>
+  <span style="font-weight:bold;">transform</span>: <span style="color:#0057ae;">$property</span>
+<span style="color:#644a9b;">.box</span>
+  <span style="color:#ff5500;">+</span><span style="color:#644a9b;">transform(rotate(</span><span style="color:#b08000;">30</span><span style="color:#0057ae;">deg</span><span style="color:#644a9b;">))</span>
+
+  <span style="color:#898887;">// This comment won't be included in the CSS.</span>
+<span style="color:#898887;">   This is also commented out.</span>
+  <span style="color:#006e28;font-weight:bold;">#a</span>
+<span style="color:#898887;">/* But this comment will, except in compressed mode.</span>
+
+<span style="color:#898887;">/* It can also contain interpolation:</span>
+<span style="color:#898887;">   1 + 1 = #{1 + 1}</span>
+<span style="color:#898887;">  1 + 1 = #{1 + 1}</span>
+<span style="color:#898887;"> 1 + 1 = #{1 + 1}</span>
+<span style="color:#006e28;font-weight:bold;">#a</span>
+
+<span style="color:#898887;">// But this comment will, except in compressed mode.</span>
+
+<span style="color:#898887;">// It can also contain interpolation:</span>
+<span style="color:#898887;">   1 + 1 = #{1 + 1}</span>
+<span style="color:#898887;">  1 + 1 = #{1 + 1}</span>
+<span style="color:#898887;"> 1 + 1 = #{1 + 1}</span>
+<span style="color:#006e28;font-weight:bold;">#a</span>
+
+<span style="color:#898887;">/*! This comment will be included even in compressed mode.</span>
+
+<span style="color:#006e28;font-weight:bold;">#a</span>
+
+<span style="color:#898887;">/**/</span>
+
+p <span style="color:#644a9b;">.sans</span>
+  <span style="font-weight:bold;">font</span>: Helvetica, <span style="color:#898887;">/* Inline comments must be closed. */</span> <span style="color:#b08000;">sans-serif</span>
+
+p <span style="color:#644a9b;">.sans</span>
+  <span style="font-weight:bold;">font</span><span style="color:#898887;">/*comment*/</span>: Helvetica, <span style="color:#898887;">/* Inline comments must be closed. */</span> <span style="color:#b08000;">sans-serif</span> <span style="color:#898887;">// comment</span>
+
+<span style="color:#898887;">/// Computes an exponent.</span>
+<span style="color:#898887;">///</span>
+<span style="color:#898887;">/// @param {number} $base</span>
+<span style="color:#898887;">///   The number to multiply by itself.</span>
+<span style="color:#898887;">/// @param {integer (unitless)} $exponent</span>
+<span style="color:#898887;">///   The number of `$base`s to multiply together.</span>
+<span style="color:#898887;">/// @return {number} `$base` to the power of `$exponent`.</span>
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">pow</span>(<span style="color:#0057ae;">$base</span>, <span style="color:#0057ae;">$exponent</span>)
+  <span style="color:#0057ae;">$result</span>: <span style="color:#b08000;">1</span>
+  <span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$_</span> from <span style="color:#b08000;">1</span> through <span style="color:#0057ae;">$exponent</span>
+    <span style="color:#0057ae;">$result</span>: <span style="color:#0057ae;">$result</span> * <span style="color:#0057ae;">$base</span>
+
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$result</span>
+
+<span style="color:#0057ae;">$roboto-font-path</span>: <span style="color:#bf0303;">&quot;../fonts/roboto&quot;</span>
+
+<span style="color:#ff5500;">@font-face</span>
+    <span style="color:#898887;">// This is parsed as a normal function call that takes a quoted string.</span>
+    src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;</span>#{<span style="color:#0057ae;">$roboto-font-path</span>}<span style="color:#bf0303;">/Roboto-Thin.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>
+    src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">$roboto-font-path + &quot;/Roboto-Light.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>
+    src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">#{$roboto-font-path}/Roboto-Regular.woff2</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>
+
+    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Roboto&quot;</span>
+    <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">100</span>
+
+<span style="color:#644a9b;">.logo</span>
+  <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">800</span><span style="color:#0057ae;">px</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>
+  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
+  <span style="font-weight:bold;">left</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> - #{<span style="color:#0057ae;">$width</span> / <span style="color:#b08000;">2</span>}<span style="color:#644a9b;">)</span>
+  <span style="font-weight:bold;">top</span>: <span style="color:#b08000;">0</span>
+
+<span style="color:#0057ae;">$padding</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#644a9b;">.post</span>
+  <span style="color:#898887;">// Since these max() calls don't use any Sass features other than</span>
+  <span style="color:#898887;">// interpolation, they're compiled to CSS max() calls.</span>
+  <span style="font-weight:bold;">padding-left</span>: <span style="color:#644a9b;">max(</span>#{<span style="color:#0057ae;">$padding</span>}, <span style="color:#644a9b;">env(</span>safe-area-inset-left<span style="color:#644a9b;">))</span>
+  <span style="font-weight:bold;">padding-right</span>: <span style="color:#644a9b;">max(</span>#{<span style="color:#0057ae;">$padding</span>}, <span style="color:#644a9b;">env(</span>safe-area-inset-right<span style="color:#644a9b;">))</span>
+
+
+<span style="color:#644a9b;">.sidebar</span>
+  <span style="color:#898887;">// Since these refer to a Sass variable without interpolation, they call</span>
+  <span style="color:#898887;">// Sass's built-in max() function.</span>
+  <span style="font-weight:bold;">padding-left</span>: <span style="color:#644a9b;">max(</span><span style="color:#0057ae;">$padding</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>
+  <span style="font-weight:bold;">padding-right</span>: <span style="color:#644a9b;">max(</span><span style="color:#0057ae;">$padding</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#644a9b;">.circle</span>
+  <span style="color:#0057ae;">$size</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$size</span>
+  <span style="font-weight:bold;">height</span>: <span style="color:#0057ae;">$size</span>
+  <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">$size</span> / <span style="color:#b08000;">2</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">prefix</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$value</span>, <span style="color:#0057ae;">$prefixes</span>)
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$prefix</span> in <span style="color:#0057ae;">$prefixes</span>
+    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>
+
+  #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>
+
+
+<span style="color:#644a9b;">.gray</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">prefix(</span>filter, <span style="color:#644a9b;">grayscale(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>, moz webkit<span style="color:#644a9b;">)</span>
+
+<span style="color:#644a9b;">.enlarge</span>
+  <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">14</span><span style="color:#0057ae;">px</span>
+  <span style="font-weight:bold;">transition</span>:
+    <span style="font-weight:bold;">property</span>: font-size
+    <span style="font-weight:bold;">duration</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">s</span>
+    <span style="font-weight:bold;">delay</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span>
+
+  &amp;<span style="color:#b08000;font-style:italic;">:hover</span>
+    <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">36</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#644a9b;">.info-page</span>
+  <span style="font-weight:bold;">margin</span>: <span style="color:#644a9b;font-weight:bold;">auto</span>
+    <span style="font-weight:bold;">bottom</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>
+    <span style="font-weight:bold;">top</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#0057ae;">$rounded-corners</span>: <span style="color:#644a9b;font-weight:bold;">false</span>
+
+<span style="color:#644a9b;">.button</span>
+  <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">black</span>
+  <span style="font-weight:bold;">border-radius</span>: <span style="color:#644a9b;">if(</span><span style="color:#0057ae;">$rounded-corners</span>, <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>, <span style="color:#644a9b;font-weight:bold;">null</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#0057ae;">$primary</span>: <span style="color:#aa5500;">#81899b</span>
+<span style="color:#0057ae;">$accent</span>: <span style="color:#aa5500;">#ab2e</span>
+<span style="color:#0057ae;">$warn</span>: <span style="color:#aa5500;">#dfa612aa</span>
+
+<span style="color:#b08000;font-style:italic;">:root</span>
+  <span style="color:#0057ae;">--primary</span>: #{<span style="color:#0057ae;">$primary</span>}
+  <span style="color:#0057ae;">--accent</span>: #{<span style="color:#0057ae;">$accent</span>}
+  <span style="color:#0057ae;">--warn</span>: #{<span style="color:#0057ae;">$warn</span>}
+
+  <span style="color:#898887;">// Even though this looks like a Sass variable, it's valid CSS so it's not</span>
+  <span style="color:#898887;">// evaluated.</span>
+  <span style="color:#0057ae;">--consumed-by-js</span>: <span style="color:#0057ae;">$primary</span>
+
+<span style="color:#0057ae;">$font-family-sans-serif</span>: -apple-system, BlinkMacSystemFont, <span style="color:#bf0303;">&quot;Segoe UI&quot;</span>, Roboto
+<span style="color:#0057ae;">$font-family-monospace</span>: SFMono-Regular, Menlo, Monaco, Consolas
+
+<span style="color:#b08000;font-style:italic;">:root</span>
+  <span style="color:#0057ae;">--font-family-sans-serif</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-sans-serif</span><span style="color:#644a9b;">)</span>}
+  <span style="color:#0057ae;">--font-family-monospace</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-monospace</span><span style="color:#644a9b;">)</span>}
+
+<span style="color:#644a9b;">.alert</span>
+  <span style="color:#898887;">// The parent selector can be used to add pseudo-classes to the outer</span>
+  <span style="color:#898887;">// selector.</span>
+  &amp;<span style="color:#b08000;font-style:italic;">:hover</span>
+    <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>
+
+
+  <span style="color:#898887;">// It can also be used to style the outer selector in a certain context, such</span>
+  <span style="color:#898887;">// as a body set to use a right-to-left language.</span>
+  <span style="color:#0095ff;font-weight:bold;">[dir</span>=<span style="color:#bf0303;">rtl</span><span style="color:#0095ff;font-weight:bold;">]</span> &amp;
+    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span>
+    <span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>
+
+
+  <span style="color:#898887;">// You can even use it as an argument to pseudo-class selectors.</span>
+  <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#bf0303;text-decoration:underline;">&amp;</span><span style="color:#b08000;font-style:italic;">)</span>
+    <span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.8</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>)
+  <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>}
+    <span style="color:#ff5500;">@content</span>
+
+
+
+<span style="color:#644a9b;">.wrapper</span> <span style="color:#644a9b;">.field</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">unify-parent(</span><span style="color:#bf0303;">&quot;input&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">app-background</span>(<span style="color:#0057ae;">$color</span>)
+  #{<span style="color:#644a9b;">if(</span>&amp;, <span style="color:#bf0303;">'&amp;.app-background'</span>, <span style="color:#bf0303;">'.app-background'</span><span style="color:#644a9b;">)</span>}
+    <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$color</span>
+    <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#aa5500;">#fff</span>, <span style="color:#b08000;">0.75</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">app-background(</span><span style="color:#aa5500;">#036</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#644a9b;">.sidebar</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">app-background(</span><span style="color:#aa5500;">#c6538c</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#644a9b;">.accordion</span>
+  <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>
+  <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">rem</span> <span style="color:#644a9b;font-weight:bold;">auto</span>
+
+  &amp;__copy
+    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>
+    <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">2</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">rem</span>
+    <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.6</span>
+    <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">14</span><span style="color:#0057ae;">px</span>
+
+    &amp;--open
+      <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>
+
+
+<span style="color:#644a9b;">.alert</span><span style="color:#b08000;font-style:italic;">:hover</span>, <span style="color:#644a9b;font-weight:bold;">%strong-alert</span>
+  <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>
+
+<span style="color:#644a9b;font-weight:bold;">%strong-alert</span><span style="color:#b08000;font-style:italic;">:hover</span>
+  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>
+
+<span style="color:#644a9b;font-weight:bold;">%toolbelt</span>
+  <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>
+  <span style="font-weight:bold;">border-top</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#aa5500;">#000</span>, <span style="color:#b08000;">.12</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">solid</span>
+
+  &amp;<span style="color:#b08000;font-style:italic;">:hover</span>
+    <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#aa5500;">#000</span>, <span style="color:#b08000;">.5</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">solid</span>
+
+<span style="color:#644a9b;">.action-buttons</span>
+  <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%toolbelt</span>
+  <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#4285f4</span>
+
+<span style="color:#0057ae;">$border-dark</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#0057ae;">$base-color</span>, <span style="color:#b08000;">0.88</span><span style="color:#644a9b;">)</span>
+<span style="color:#0057ae;">$black</span>: <span style="color:#aa5500;">#000</span> <span style="color:#0057ae;">!default</span>
+<span style="color:#0057ae;">$border-radius</span>: <span style="color:#b08000;">0.25</span><span style="color:#0057ae;">rem</span> <span style="color:#0057ae;">!default</span>
+<span style="color:#0057ae;">$box-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0.5</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">rem</span> <span style="color:#644a9b;">rgba(</span><span style="color:#0057ae;">$black</span>, <span style="color:#b08000;">0.15</span><span style="color:#644a9b;">)</span> <span style="color:#0057ae;">!default</span>
+<span style="color:#0057ae;">$box-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0.5</span><span style="color:#0057ae;">rem</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">rem</span> <span style="color:#644a9b;">rgba(</span><span style="color:#0057ae;">$black</span>, <span style="color:#644a9b;">blue(</span><span style="color:#0057ae;">$black</span><span style="color:#644a9b;">))</span> <span style="color:#0057ae;">!default</span>
+<span style="color:#0057ae;">$border-radius</span>: <span style="color:#b08000;">0.1</span><span style="color:#0057ae;">rem</span>
+
+<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'library'</span>
+
+<span style="color:#0057ae;">$global-variable</span>: global value
+
+  <span style="color:#898887;">// This would fail, because $local-variable isn't in scope:</span>
+  <span style="color:#898887;">// local: $local-variable</span>
+
+<span style="color:#0057ae;">$theme-colors</span>: (<span style="color:#bf0303;">&quot;success&quot;</span>: <span style="color:#aa5500;">#28a745</span>, <span style="color:#bf0303;">&quot;info&quot;</span>: <span style="color:#aa5500;">#17a2b8</span>, <span style="color:#bf0303;">&quot;warning&quot;</span>: <span style="color:#aa5500;">#ffc107</span>)
+
+<span style="color:#644a9b;">.alert</span>
+  <span style="color:#898887;">// Instead of $theme-color-#{warning}</span>
+  <span style="font-weight:bold;">background-color</span>: <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$theme-colors</span>, <span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">corner-icon</span>(<span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$top-or-bottom</span>, <span style="color:#0057ae;">$left-or-right</span>)
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}
+    <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/icons/</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#bf0303;">.svg&quot;</span><span style="color:#644a9b;">)</span>
+    <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
+    #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>
+    #{<span style="color:#0057ae;">$left-or-right</span>}: <span style="color:#b08000;">0</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">corner-icon(</span><span style="color:#bf0303;">&quot;mail&quot;</span>, <span style="color:#b08000;">top</span>, <span style="color:#b08000;">right</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">inline-animation</span>(<span style="color:#0057ae;">$duration</span>)
+  <span style="color:#0057ae;">$name</span>: inline-#{<span style="color:#644a9b;">unique-id()</span>}
+
+  <span style="color:#ff5500;">@keyframes</span> #{$name}
+    <span style="color:#ff5500;">@content</span>
+
+  <span style="font-weight:bold;">animation-name</span>: <span style="color:#0057ae;">$name</span>
+  <span style="font-weight:bold;">animation-duration</span>: <span style="color:#0057ae;">$duration</span>
+  <span style="font-weight:bold;">animation-iteration-count</span>: <span style="color:#b08000;">infinite</span>
+
+
+<span style="color:#644a9b;">.pulse</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">inline-animation(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span><span style="color:#644a9b;">)</span>
+    from
+      <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">yellow</span>
+    to
+      <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">red</span>
+
+<span style="color:#644a9b;">.example</span>
+  unquoted: #{<span style="color:#bf0303;">&quot;string&quot;</span>}
+
+  &amp; &amp;
+    <span style="font-weight:bold;">padding</span>:
+      <span style="font-weight:bold;">bottom</span>: <span style="color:#b08000;">0</span>
+      <span style="font-weight:bold;">left</span>: <span style="color:#b08000;">0</span>
+
+<span style="color:#898887;">// style.sass</span>
+<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'foundation/code'</span>, <span style="color:#bf0303;">'foundation/lists'</span>
+
+<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;theme.css&quot;</span>
+<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;http://fonts.googleapis.com/css?family=Droid+Sans&quot;</span>
+<span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">theme</span><span style="color:#644a9b;">)</span>
+<span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;landscape&quot;</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>)
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">google-font</span>(<span style="color:#0057ae;">$family</span>)
+  <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;http://fonts.googleapis.com/css?family=</span>#{<span style="color:#0057ae;">$family</span>}<span style="color:#bf0303;">&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">google-font(</span><span style="color:#bf0303;">&quot;Droid Sans&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">horizontal-list</span>
+  <span style="color:#ff5500;">@include</span> reset-list
+
+  li
+    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
+    <span style="font-weight:bold;">margin</span>:
+      <span style="font-weight:bold;">left</span>: -<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>
+      <span style="font-weight:bold;">right</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>
+
+nav ul
+  <span style="color:#ff5500;">@include</span> horizontal-list
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">rtl</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$ltr-value</span>, <span style="color:#0057ae;">$rtl-value</span>)
+  #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$ltr-value</span>
+
+  <span style="color:#0095ff;font-weight:bold;">[dir</span>=<span style="color:#bf0303;">rtl</span><span style="color:#0095ff;font-weight:bold;">]</span> &amp;
+    #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$rtl-value</span>
+
+<span style="color:#644a9b;">.sidebar</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">rtl(</span>float, <span style="color:#b08000;">left</span>, <span style="color:#b08000;">right</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">replace-text</span>(<span style="color:#0057ae;">$image</span>, <span style="color:#0057ae;">$x</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">50%</span>, <span style="color:#0057ae;">$y</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">50%</span>)
+  <span style="font-weight:bold;">text-indent</span>: -<span style="color:#b08000;">99999</span><span style="color:#0057ae;">em</span>
+  <span style="font-weight:bold;">overflow</span>: <span style="color:#b08000;">hidden</span>
+  <span style="font-weight:bold;">text-align</span>: <span style="color:#b08000;">left</span>
+
+  <span style="font-weight:bold;">background</span>:
+    <span style="font-weight:bold;">image</span>: <span style="color:#0057ae;">$image</span>
+    <span style="font-weight:bold;">repeat</span>: <span style="color:#b08000;">no-repeat</span>
+    <span style="font-weight:bold;">position</span>: <span style="color:#0057ae;">$x</span> <span style="color:#0057ae;">$y</span>
+
+<span style="color:#644a9b;">.mail-icon</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">replace-text(url(</span><span style="color:#bf0303;">&quot;/images/mail.svg&quot;</span><span style="color:#644a9b;">)</span>, <span style="color:#b08000;">0</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">order(</span><span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span>, <span style="color:#bf0303;">&quot;input.name&quot;</span>, <span style="color:#bf0303;">&quot;input.address&quot;</span>, <span style="color:#bf0303;">&quot;input.zip&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">syntax-colors</span>(<span style="color:#0057ae;">$args</span>...)
+  <span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// (string: #080, comment: #800, $variable: $60b)</span>
+
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$color</span> in <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>
+    pre span<span style="color:#644a9b;">.stx-</span>#{<span style="color:#0057ae;">$name</span>}
+      <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">syntax-colors(</span><span style="color:#0057ae;">$string</span>: <span style="color:#aa5500;">#080</span>, <span style="color:#0057ae;">$comment</span>: <span style="color:#aa5500;">#800</span>, <span style="color:#0057ae;">$variable</span>: <span style="color:#aa5500;">#60b</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">media</span>(<span style="color:#0057ae;">$types</span>...)
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$type</span> in <span style="color:#0057ae;">$types</span>
+    <span style="color:#ff5500;">@media</span> #{<span style="color:#0057ae;">$type</span>}
+      <span style="color:#ff5500;">@content</span>(<span style="color:#0057ae;">$type</span>)
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">media(</span>screen, print<span style="color:#644a9b;">)</span> using (<span style="color:#0057ae;">$type</span>)
+  h1
+    <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>
+    <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$type</span> == print
+      <span style="font-weight:bold;">font-family</span>: Calluna
+
+<span style="color:#ff5500;">=</span><span style="color:#644a9b;">reset-list</span>
+  <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>
+  <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">0</span>
+  <span style="font-weight:bold;">list-style</span>: <span style="color:#b08000;">none</span>
+
+<span style="color:#ff5500;">=</span><span style="color:#644a9b;">horizontal-list</span>
+  <span style="color:#ff5500;">+</span>reset-list
+
+  li
+    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
+    <span style="font-weight:bold;">margin</span>:
+      <span style="font-weight:bold;">left</span>: -<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>
+      <span style="font-weight:bold;">right</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>
+
+nav ul
+  <span style="color:#ff5500;">+</span>horizontal-list
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">pow</span>(<span style="color:#0057ae;">$base</span>, <span style="color:#0057ae;">$exponent</span>)
+  <span style="color:#0057ae;">$result</span>: <span style="color:#b08000;">1</span>
+  <span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$_</span> from <span style="color:#b08000;">1</span> through <span style="color:#0057ae;">$exponent</span>
+    <span style="color:#0057ae;">$result</span>: <span style="color:#0057ae;">$result</span> * <span style="color:#0057ae;">$base</span>
+
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$result</span>
+
+<span style="color:#644a9b;">.sidebar</span>
+  <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>
+  <span style="font-weight:bold;">margin-left</span>: <span style="color:#644a9b;">pow(</span><span style="color:#b08000;">4</span>, <span style="color:#b08000;">3</span><span style="color:#644a9b;">)</span> * <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">sum</span>(<span style="color:#0057ae;">$numbers</span>...)
+  <span style="color:#0057ae;">$sum</span>: <span style="color:#b08000;">0</span>
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$number</span> in <span style="color:#0057ae;">$numbers</span>
+    <span style="color:#0057ae;">$sum</span>: <span style="color:#0057ae;">$sum</span> + <span style="color:#0057ae;">$number</span>
+
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$sum</span>
+
+<span style="color:#644a9b;">.micro</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">sum(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">str-insert</span>(<span style="color:#0057ae;">$string</span>, <span style="color:#0057ae;">$insert</span>, <span style="color:#0057ae;">$index</span>)
+  <span style="color:#898887;">// Avoid making new strings if we don't need to.</span>
+  <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">str-length(</span><span style="color:#0057ae;">$string</span><span style="color:#644a9b;">)</span> == <span style="color:#b08000;">0</span>
+    <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$insert</span>
+
+  <span style="color:#0057ae;">$before</span>: <span style="color:#644a9b;">str-slice(</span><span style="color:#0057ae;">$string</span>, <span style="color:#b08000;">0</span>, <span style="color:#0057ae;">$index</span><span style="color:#644a9b;">)</span>
+  <span style="color:#0057ae;">$after</span>: <span style="color:#644a9b;">str-slice(</span><span style="color:#0057ae;">$string</span>, <span style="color:#0057ae;">$index</span><span style="color:#644a9b;">)</span>
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$before</span> + <span style="color:#0057ae;">$insert</span> + <span style="color:#0057ae;">$after</span>
+
+<span style="color:#644a9b;">.error</span>
+  <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">#f00</span>
+  <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#fdd</span>
+
+  &amp;--serious
+    <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.error</span>
+    <span style="font-weight:bold;">border-width</span>: <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">reflexive-position</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$value</span>)
+  <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$property</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">left</span> and <span style="color:#0057ae;">$property</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">right</span>
+    <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;Property </span>#{<span style="color:#0057ae;">$property</span>}<span style="color:#bf0303;"> must be either left or right.&quot;</span>
+
+  <span style="color:#0057ae;">$left-value</span>: <span style="color:#644a9b;">if(</span><span style="color:#0057ae;">$property</span> == <span style="color:#b08000;">right</span>, initial, <span style="color:#0057ae;">$value</span><span style="color:#644a9b;">)</span>
+  <span style="color:#0057ae;">$right-value</span>: <span style="color:#644a9b;">if(</span><span style="color:#0057ae;">$property</span> == <span style="color:#b08000;">right</span>, <span style="color:#0057ae;">$value</span>, initial<span style="color:#644a9b;">)</span>
+
+  <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$left-value</span>
+  <span style="font-weight:bold;">right</span>: <span style="color:#0057ae;">$right-value</span>
+  <span style="color:#0095ff;font-weight:bold;">[dir</span>=<span style="color:#bf0303;">rtl</span><span style="color:#0095ff;font-weight:bold;">]</span> &amp;
+    <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$right-value</span>
+    <span style="font-weight:bold;">right</span>: <span style="color:#0057ae;">$left-value</span>
+
+<span style="color:#0057ae;">$known-prefixes</span>: webkit, moz, ms, o
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">prefix</span>(<span style="color:#0057ae;">$property</span>, <span style="color:#0057ae;">$value</span>, <span style="color:#0057ae;">$prefixes</span>)
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$prefix</span> in <span style="color:#0057ae;">$prefixes</span>
+    <span style="color:#ff5500;">@if</span> not <span style="color:#644a9b;">index(</span><span style="color:#0057ae;">$known-prefixes</span>, <span style="color:#0057ae;">$prefix</span><span style="color:#644a9b;">)</span>
+      <span style="color:#ff5500;">@warn</span> <span style="color:#bf0303;">&quot;Unknown prefix </span>#{<span style="color:#0057ae;">$prefix</span>}<span style="color:#bf0303;">.&quot;</span>
+
+
+    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>
+
+  #{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>
+
+
+<span style="color:#644a9b;">.tilt</span>
+  <span style="color:#898887;">// Oops, we typo'd &quot;webkit&quot; as &quot;wekbit&quot;!</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">prefix(</span>transform, <span style="color:#644a9b;">rotate(</span><span style="color:#b08000;">15</span><span style="color:#0057ae;">deg</span><span style="color:#644a9b;">)</span>, wekbit ms<span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">inset-divider-offset</span>(<span style="color:#0057ae;">$offset</span>, <span style="color:#0057ae;">$padding</span>)
+  <span style="color:#0057ae;">$divider-offset</span>: (<span style="color:#b08000;">2</span> * <span style="color:#0057ae;">$padding</span>) + <span style="color:#0057ae;">$offset</span>
+  <span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;divider offset: </span>#{<span style="color:#0057ae;">$divider-offset</span>}<span style="color:#bf0303;">&quot;</span>
+
+  <span style="font-weight:bold;">margin-left</span>: <span style="color:#0057ae;">$divider-offset</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span> - #{<span style="color:#0057ae;">$divider-offset</span>}<span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>)
+  <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>}
+    <span style="color:#ff5500;">@content</span>
+
+
+<span style="color:#644a9b;">.square-av</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">avatar(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#0057ae;">$circle</span>: <span style="color:#644a9b;font-weight:bold;">false</span><span style="color:#644a9b;">)</span>
+<span style="color:#644a9b;">.circle-av</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">avatar(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#0057ae;">$circle</span>: <span style="color:#644a9b;font-weight:bold;">true</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">theme-colors</span>(<span style="color:#0057ae;">$light-theme</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">true</span>)
+  <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$light-theme</span>
+    <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$light-background</span>
+    <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$light-text</span>
+  <span style="color:#ff5500;">@else</span>
+    <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$dark-background</span>
+    <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$dark-text</span>
+
+<span style="color:#644a9b;">.banner</span>
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">theme-colors(</span><span style="color:#0057ae;">$light-theme</span>: <span style="color:#644a9b;font-weight:bold;">true</span><span style="color:#644a9b;">)</span>
+  body<span style="color:#644a9b;">.dark</span> &amp;
+    <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">theme-colors(</span><span style="color:#0057ae;">$light-theme</span>: <span style="color:#644a9b;font-weight:bold;">false</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">triangle</span>(<span style="color:#0057ae;">$size</span>, <span style="color:#0057ae;">$color</span>, <span style="color:#0057ae;">$direction</span>)
+  <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">0</span>
+  <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">0</span>
+
+  <span style="font-weight:bold;">border-color</span>: <span style="color:#b08000;">transparent</span>
+  <span style="font-weight:bold;">border-style</span>: <span style="color:#b08000;">solid</span>
+  <span style="font-weight:bold;">border-width</span>: <span style="color:#0057ae;">$size</span> / <span style="color:#b08000;">2</span>
+
+  <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$direction</span> == up
+    <span style="font-weight:bold;">border-bottom-color</span>: <span style="color:#0057ae;">$color</span>
+  <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$direction</span> == <span style="color:#b08000;">right</span>
+    <span style="font-weight:bold;">border-left-color</span>: <span style="color:#0057ae;">$color</span>
+  <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$direction</span> == down
+    <span style="font-weight:bold;">border-top-color</span>: <span style="color:#0057ae;">$color</span>
+  <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$direction</span> == <span style="color:#b08000;">left</span>
+    <span style="font-weight:bold;">border-right-color</span>: <span style="color:#0057ae;">$color</span>
+  <span style="color:#ff5500;">@else</span>
+    <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;Unknown direction </span>#{<span style="color:#0057ae;">$direction</span>}<span style="color:#bf0303;">.&quot;</span>
+
+<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$size</span> in <span style="color:#0057ae;">$sizes</span>
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$size</span>}
+    <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span>
+    <span style="font-weight:bold;">height</span>: <span style="color:#0057ae;">$size</span>
+    <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$size</span>
+
+<span style="color:#0057ae;">$icons</span>: (<span style="color:#bf0303;">&quot;eye&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;start&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;stop&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#bf0303;">&quot;</span>)
+
+<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$glyph</span> in <span style="color:#0057ae;">$icons</span>
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#b08000;font-style:italic;">:before</span>
+    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
+    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Icon Font&quot;</span>
+    <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$glyph</span>
+
+<span style="color:#0057ae;">$icons</span>: <span style="color:#bf0303;">&quot;eye&quot;</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#bf0303;">&quot;</span> <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>, <span style="color:#bf0303;">&quot;start&quot;</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#bf0303;">&quot;</span> <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>, <span style="color:#bf0303;">&quot;stop&quot;</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#bf0303;">&quot;</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$glyph</span>, <span style="color:#0057ae;">$size</span> in <span style="color:#0057ae;">$icons</span>
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#b08000;font-style:italic;">:before</span>
+    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
+    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Icon Font&quot;</span>
+    <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$glyph</span>
+    <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span>
+
+<span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$i</span> from <span style="color:#b08000;">1</span> through <span style="color:#b08000;">3</span>
+  ul<span style="color:#b08000;font-style:italic;">:nth-child(3n + #{$i})</span>
+    <span style="font-weight:bold;">background-color</span>: <span style="color:#644a9b;">lighten(</span><span style="color:#0057ae;">$base-color</span>, <span style="color:#0057ae;">$i</span> * <span style="color:#b08000;">5</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#898887;">/// Divides `$value` by `$ratio` until it's below `$base`.</span>
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">scale-below</span>(<span style="color:#0057ae;">$value</span>, <span style="color:#0057ae;">$base</span>, <span style="color:#0057ae;">$ratio</span><span style="color:#bf0303;text-decoration:underline;">:</span> <span style="color:#bf0303;text-decoration:underline;">1.618</span>)
+  <span style="color:#ff5500;">@while</span> <span style="color:#0057ae;">$value</span> &gt; <span style="color:#0057ae;">$base</span>
+    <span style="color:#0057ae;">$value</span>: <span style="color:#0057ae;">$value</span> / <span style="color:#0057ae;">$ratio</span>
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$value</span>
+
+<span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@font-face</span>
+  <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span>
+  src: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#ff5500;">@counter-style</span> thumbs
+  system: cyclic
+  symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span>
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">sticky-position</span>
+  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">fixed</span>
+  <span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">position</span>: sticky)
+    <span style="font-weight:bold;">position</span>: sticky
+
+<span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">hover</span>: <span style="color:#b08000;">hover</span>)
+  <span style="color:#644a9b;">.button</span><span style="color:#b08000;font-style:italic;">:hover</span>
+    <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#aa5500;">black</span>
+
+    <span style="color:#ff5500;">@media</span> (<span style="color:#b08000;">color</span>)
+      <span style="font-weight:bold;">border-color</span>: <span style="color:#aa5500;">#036</span>
+
+<span style="color:#ff5500;">@keyframes</span> slide-in
+  from
+    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>
+    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>
+
+
+  70%
+    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">90</span><span style="color:#0057ae;">%</span>
+    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">%</span>
+
+
+  to
+    <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>
+    <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">100</span>  <span style="color:#898887;">// 100</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.8</span>  <span style="color:#898887;">// 0.8</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 16px</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 10px*px (read &quot;square pixels&quot;)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5.2e3</span>  <span style="color:#898887;">// 5200</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">6e-2</span>  <span style="color:#898887;">// 0.06</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">6</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 24px*px (read &quot;square pixels&quot;)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// 2.5px/s (read &quot;pixels per second&quot;)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">30</span><span style="color:#0057ae;">deg</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span> / <span style="color:#b08000;">24</span><span style="color:#0057ae;">em</span>  <span style="color:#898887;">// 3.125px*deg/s*em</span>
+<span style="color:#898887;">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>
+
+<span style="color:#0057ae;">$degrees-per-second</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">deg</span>/<span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 20deg/s</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span> / <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 0.05s/deg</span>
+<span style="color:#0057ae;">$transition-speed</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>/<span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">unquote(</span><span style="color:#bf0303;">&quot;.widget:hover&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// .widget:hover</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">quote(</span><span style="color:#b08000;">bold</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// &quot;bold&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.012345678912345</span>  <span style="color:#898887;">// 0.0123456789</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.01234567891</span> == <span style="color:#b08000;">0.01234567899</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1.00000000009</span>  <span style="color:#898887;">// 1</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">0.99999999991</span>  <span style="color:#898887;">// 1</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\&quot;</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// '&quot;'</span>
+<span style="color:#ff5500;">@debug</span> \.widget  <span style="color:#898887;">// \.widget</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\a</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;\a&quot; (a string containing only a newline)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;line1</span><span style="color:#3daee9;">\a</span><span style="color:#bf0303;"> line2&quot;</span>  <span style="color:#898887;">// &quot;line1\a line2&quot; (foo and bar are separated by a newline)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Nat + Liz </span><span style="color:#3daee9;">\1F46D</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;Nat + Liz 👭&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>  <span style="color:#898887;">// &quot;Helvetica Neue&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;C:</span><span style="color:#3daee9;">\\</span><span style="color:#bf0303;">Program Files&quot;</span>  <span style="color:#898887;">// &quot;C:\\Program Files&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\&quot;</span><span style="color:#bf0303;">Don't Fear the Reaper</span><span style="color:#3daee9;">\&quot;</span><span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;\&quot;Don't Fear the Reaper\&quot;&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;line1</span><span style="color:#3daee9;">\a</span><span style="color:#bf0303;"> line2&quot;</span>  <span style="color:#898887;">// &quot;line1\a line2&quot;</span>
+
+<span style="color:#0057ae;">$roboto-variant</span>: <span style="color:#bf0303;">&quot;Mono&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Roboto </span>#{<span style="color:#0057ae;">$roboto-variant</span>}<span style="color:#bf0303;">&quot;</span>  <span style="color:#898887;">// &quot;Roboto Mono&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">bold</span>  <span style="color:#898887;">// bold</span>
+<span style="color:#ff5500;">@debug</span> -webkit-flex  <span style="color:#898887;">// -webkit-flex</span>
+<span style="color:#ff5500;">@debug</span> --<span style="color:#b08000;">123</span>  <span style="color:#898887;">// --123</span>
+
+<span style="color:#0057ae;">$prefix</span>: ms
+<span style="color:#ff5500;">@debug</span> -#{<span style="color:#0057ae;">$prefix</span>}-flex  <span style="color:#898887;">// -ms-flex</span>
+<span style="color:#ff5500;">@debug</span> \1F46D  <span style="color:#898887;">// 👭</span>
+<span style="color:#ff5500;">@debug</span> \21  <span style="color:#898887;">// \!</span>
+<span style="color:#ff5500;">@debug</span> \7Fx  <span style="color:#898887;">// \7f x</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-length(</span>\7Fx<span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 5</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Helvetica&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 1</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Neue&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 11</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-slice(</span><span style="color:#bf0303;">&quot;Roboto Mono&quot;</span>, -<span style="color:#b08000;">4</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// &quot;Mono&quot;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#aa5500;">#f2ece4</span> <span style="color:#898887;">// #f2ece4</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#aa5500;">#b37399aa</span> <span style="color:#898887;">// rgba(179, 115, 153, 67%)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#aa5500;">midnightblue</span> <span style="color:#898887;">// #191970</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">204</span>, <span style="color:#b08000;">102</span>, <span style="color:#b08000;">153</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #c69</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">107</span>, <span style="color:#b08000;">113</span>, <span style="color:#b08000;">127</span>, <span style="color:#b08000;">0.8</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// rgba(107, 113, 127, 0.8)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">228</span>, <span style="color:#b08000;">7</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">86</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #dadbdf</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">hsla(</span><span style="color:#b08000;">20</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">85</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">0.7</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// rgb(225, 215, 210, 0.7)</span>
+<span style="color:#0057ae;">$venus</span>: <span style="color:#aa5500;">#998099</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">scale-color(</span><span style="color:#0057ae;">$venus</span>, <span style="color:#0057ae;">$lightness</span>: +<span style="color:#b08000;">15</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #a893a8</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">mix(</span><span style="color:#0057ae;">$venus</span>, <span style="color:#aa5500;">midnightblue</span><span style="color:#644a9b;">)</span> <span style="color:#898887;">// #594d85</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">nth(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">2</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 12px</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">nth(</span>[line1, line2, line3], -<span style="color:#b08000;">1</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// line3</span>
+<span style="color:#0057ae;">$prefixes-by-browser</span>: (<span style="color:#bf0303;">&quot;firefox&quot;</span>: moz, <span style="color:#bf0303;">&quot;safari&quot;</span>: webkit, <span style="color:#bf0303;">&quot;ie&quot;</span>: ms)
+
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">prefixes-for-browsers</span>(<span style="color:#0057ae;">$browsers</span>)
+  <span style="color:#0057ae;">$prefixes</span>: ()
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$browser</span> in <span style="color:#0057ae;">$browsers</span>
+    <span style="color:#0057ae;">$prefixes</span>: <span style="color:#644a9b;">append(</span><span style="color:#0057ae;">$prefixes</span>, <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$prefixes-by-browser</span>, <span style="color:#0057ae;">$browser</span><span style="color:#644a9b;">))</span>
+
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$prefixes</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">prefixes-for-browsers(</span><span style="color:#bf0303;">&quot;firefox&quot;</span> <span style="color:#bf0303;">&quot;ie&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// moz ms</span>
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">syntax-colors</span>(<span style="color:#0057ae;">$args</span>...)
+  <span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// (string: #080, comment: #800, $variable: $60b)</span>
+
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$color</span> in <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>
+    pre span<span style="color:#644a9b;">.stx-</span>#{<span style="color:#0057ae;">$name</span>}
+      <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">syntax-colors(</span><span style="color:#0057ae;">$string</span>: <span style="color:#aa5500;">#080</span>, <span style="color:#0057ae;">$comment</span>: <span style="color:#aa5500;">#800</span>, <span style="color:#0057ae;">$variable</span>: <span style="color:#aa5500;">#60b</span><span style="color:#644a9b;">)</span>;
+<span style="color:#0057ae;">$font-weights</span>: (<span style="color:#bf0303;">&quot;regular&quot;</span>: <span style="color:#b08000;">400</span>, <span style="color:#bf0303;">&quot;medium&quot;</span>: <span style="color:#b08000;">500</span>, <span style="color:#bf0303;">&quot;bold&quot;</span>: <span style="color:#b08000;">700</span>)
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$font-weights</span>, <span style="color:#bf0303;">&quot;medium&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 500</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$font-weights</span>, <span style="color:#bf0303;">&quot;extra-bold&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// null</span>
+<span style="color:#0057ae;">$icons</span>: (<span style="color:#bf0303;">&quot;eye&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f112</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;start&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12e</span><span style="color:#bf0303;">&quot;</span>, <span style="color:#bf0303;">&quot;stop&quot;</span>: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\f12f</span><span style="color:#bf0303;">&quot;</span>)
+
+<span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$glyph</span> in <span style="color:#0057ae;">$icons</span>
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#b08000;font-style:italic;">:before</span>
+    <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>
+    <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Icon Font&quot;</span>
+    <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$glyph</span>
+
+<span style="color:#0057ae;">$prefixes-by-browser</span>: (<span style="color:#bf0303;">&quot;firefox&quot;</span>: moz, <span style="color:#bf0303;">&quot;safari&quot;</span>: webkit, <span style="color:#bf0303;">&quot;ie&quot;</span>: ms)
+
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">add-browser-prefix</span>(<span style="color:#0057ae;">$browser</span>, <span style="color:#0057ae;">$prefix</span>)
+  <span style="color:#0057ae;">$prefixes-by-browser</span>: <span style="color:#644a9b;">map-merge(</span><span style="color:#0057ae;">$prefixes-by-browser</span>, (<span style="color:#0057ae;">$browser</span>: <span style="color:#0057ae;">$prefix</span><span style="color:#644a9b;">)</span>)
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">add-browser-prefix(</span><span style="color:#bf0303;">&quot;opera&quot;</span>, o<span style="color:#644a9b;">)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$prefixes-by-browser</span>
+<span style="color:#898887;">// (&quot;firefox&quot;: moz, &quot;safari&quot;: webkit, &quot;ie&quot;: ms, &quot;opera&quot;: o)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// false</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> &lt; <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// false</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">3</span><span style="color:#0057ae;">in</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Roboto&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// null</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-get(</span>(<span style="color:#bf0303;">&quot;large&quot;</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>, <span style="color:#bf0303;">&quot;small&quot;</span>)  <span style="color:#898887;">// null</span>
+<span style="color:#ff5500;">@debug</span> &amp;  <span style="color:#898887;">// null</span>
+<span style="color:#0057ae;">$fonts</span>: (<span style="color:#bf0303;">&quot;serif&quot;</span>: <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;monospace&quot;</span>: <span style="color:#bf0303;">&quot;Consolas&quot;</span>)
+
+h3
+  <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">18</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">bold</span> <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$fonts</span>, <span style="color:#bf0303;">&quot;sans&quot;</span><span style="color:#644a9b;">)</span>
+
+<span style="color:#0057ae;">$fonts</span>: (<span style="color:#bf0303;">&quot;serif&quot;</span>: <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;monospace&quot;</span>: <span style="color:#bf0303;">&quot;Consolas&quot;</span>)
+
+h3
+  <span style="font-weight:bold;">font</span>:
+    <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">18</span><span style="color:#0057ae;">px</span>
+    <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>
+    <span style="font-weight:bold;">family</span>: <span style="color:#644a9b;">map-get(</span><span style="color:#0057ae;">$fonts</span>, <span style="color:#bf0303;">&quot;sans&quot;</span><span style="color:#644a9b;">)</span>
+
+copy of $list with all elements for which $condition returns `true`
+<span style="color:#898887;">/// removed.</span>
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">remove-where</span>(<span style="color:#0057ae;">$list</span>, <span style="color:#0057ae;">$condition</span>)
+  <span style="color:#0057ae;">$new-list</span>: ()
+  <span style="color:#0057ae;">$separator</span>: <span style="color:#644a9b;">list-separator(</span><span style="color:#0057ae;">$list</span><span style="color:#644a9b;">)</span>
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$element</span> in <span style="color:#0057ae;">$list</span>
+    <span style="color:#ff5500;">@if</span> not <span style="color:#644a9b;">call(</span><span style="color:#0057ae;">$condition</span>, <span style="color:#0057ae;">$element</span><span style="color:#644a9b;">)</span>
+      <span style="color:#0057ae;">$new-list</span>: <span style="color:#644a9b;">append(</span><span style="color:#0057ae;">$new-list</span>, <span style="color:#0057ae;">$element</span>, <span style="color:#0057ae;">$separator</span>: <span style="color:#0057ae;">$separator</span><span style="color:#644a9b;">)</span>
+
+  <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$new-list</span>
+
+<span style="color:#0057ae;">$fonts</span>: Tahoma, Geneva, <span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, Helvetica, Arial, <span style="color:#b08000;">sans-serif</span>
+
+content
+  <span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">contains-helvetica</span>(<span style="color:#0057ae;">$string</span>)
+    <span style="color:#ff5500;">@return</span> <span style="color:#644a9b;">str-index(</span><span style="color:#0057ae;">$string</span>, <span style="color:#bf0303;">&quot;Helvetica&quot;</span><span style="color:#644a9b;">)</span>
+
+  <span style="font-weight:bold;">font-family</span>: <span style="color:#644a9b;">remove-where(</span><span style="color:#0057ae;">$fonts</span>, <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;contains-helvetica&quot;</span><span style="color:#644a9b;">))</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">1</span><span style="color:#0057ae;">em</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span> <span style="color:#0057ae;">!</span>= <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">96</span><span style="color:#0057ae;">px</span> == <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica&quot;</span> == Helvetica  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica&quot;</span> <span style="color:#0057ae;">!</span>= <span style="color:#bf0303;">&quot;Arial&quot;</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">34</span>, <span style="color:#b08000;">35</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">92.1</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span> == <span style="color:#aa5500;">#f2ece4</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">179</span>, <span style="color:#b08000;">115</span>, <span style="color:#b08000;">153</span>, <span style="color:#b08000;">0.5</span><span style="color:#644a9b;">)</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">179</span>, <span style="color:#b08000;">115</span>, <span style="color:#b08000;">153</span>, <span style="color:#b08000;">0.8</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) == (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) <span style="color:#0057ae;">!</span>= (<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">14</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) <span style="color:#0057ae;">!</span>= (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>) <span style="color:#0057ae;">!</span>= [<span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">7</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>]  <span style="color:#898887;">// true</span>
+
+<span style="color:#0057ae;">$theme</span>: (<span style="color:#bf0303;">&quot;venus&quot;</span>: <span style="color:#aa5500;">#998099</span>, <span style="color:#bf0303;">&quot;nebula&quot;</span>: <span style="color:#aa5500;">#d2e1dd</span>)
+<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$theme</span> == (<span style="color:#bf0303;">&quot;venus&quot;</span>: <span style="color:#aa5500;">#998099</span>, <span style="color:#bf0303;">&quot;nebula&quot;</span>: <span style="color:#aa5500;">#d2e1dd</span>)  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$theme</span> <span style="color:#0057ae;">!</span>= (<span style="color:#bf0303;">&quot;venus&quot;</span>: <span style="color:#aa5500;">#998099</span>, <span style="color:#bf0303;">&quot;iron&quot;</span>: <span style="color:#aa5500;">#dadbdf</span>)  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> == <span style="color:#644a9b;font-weight:bold;">true</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">null</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;rgba&quot;</span><span style="color:#644a9b;">)</span> == <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;rgba&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;rgba&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#0057ae;">!</span>= <span style="color:#644a9b;">get-function(</span><span style="color:#bf0303;">&quot;hsla&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">s</span> + <span style="color:#b08000;">15</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// 25s</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span> - <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 0.8958333333in</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 15px*px</span>
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// 3</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span> % <span style="color:#b08000;">9</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 0.0625in</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 15px/30px</span>
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>) / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 0.5</span>
+
+<span style="color:#0057ae;">$result</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$result</span>  <span style="color:#898887;">// 0.5</span>
+
+<span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">fifteen-divided-by-thirty</span>()
+  <span style="color:#ff5500;">@return</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">fifteen-divided-by-thirty()</span>  <span style="color:#898887;">// 0.5</span>
+
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>)  <span style="color:#898887;">// 0.5</span>
+<span style="color:#ff5500;">@debug</span> (<span style="color:#b08000;">bold</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">sans-serif</span>)  <span style="color:#898887;">// bold 15px/30px sans-serif</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">1</span>  <span style="color:#898887;">// 1.5</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">6</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 24px*px (read &quot;square pixels&quot;)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// 2.5px/s (read &quot;pixels per second&quot;)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">30</span><span style="color:#0057ae;">deg</span> / <span style="color:#b08000;">2</span><span style="color:#0057ae;">s</span> / <span style="color:#b08000;">24</span><span style="color:#0057ae;">em</span>  <span style="color:#898887;">// 3.125px*deg/s*em</span>
+<span style="color:#898887;">//                                 (read &quot;pixel-degrees per second-em&quot;)</span>
+
+<span style="color:#0057ae;">$degrees-per-second</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">deg</span>/<span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 20deg/s</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1</span> / <span style="color:#0057ae;">$degrees-per-second</span>  <span style="color:#898887;">// 0.05s/deg</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">100</span> &gt; <span style="color:#b08000;">50</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> &lt; <span style="color:#b08000;">17</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">96</span><span style="color:#0057ae;">px</span> &gt;= <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">1000</span><span style="color:#0057ae;">ms</span> &lt;= <span style="color:#b08000;">1</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Helvetica&quot;</span> + <span style="color:#bf0303;">&quot; Neue&quot;</span>  <span style="color:#898887;">// &quot;Helvetica Neue&quot;</span>
+<span style="color:#ff5500;">@debug</span> sans- + <span style="color:#b08000;">serif</span>  <span style="color:#898887;">// sans-serif</span>
+<span style="color:#ff5500;">@debug</span> #{<span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span>} / <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// 15px/30px</span>
+<span style="color:#ff5500;">@debug</span> sans - <span style="color:#b08000;">serif</span>  <span style="color:#898887;">// sans-serif</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#bf0303;">&quot;Elapsed time: &quot;</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">s</span>  <span style="color:#898887;">// &quot;Elapsed time: 10s&quot;;</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> + <span style="color:#bf0303;">&quot; is a boolean value&quot;</span>  <span style="color:#898887;">// &quot;true is a boolean value&quot;;</span>
+
+<span style="color:#ff5500;">@debug</span> / <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>  <span style="color:#898887;">// /15px</span>
+<span style="color:#ff5500;">@debug</span> - moz  <span style="color:#898887;">// -moz</span>
+<span style="color:#ff5500;">@debug</span> <span style="font-weight:bold;">not</span> <span style="color:#644a9b;font-weight:bold;">true</span>  <span style="color:#898887;">// false</span>
+<span style="color:#ff5500;">@debug</span> <span style="font-weight:bold;">not</span> <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> <span style="font-weight:bold;">and</span> <span style="color:#644a9b;font-weight:bold;">true</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> <span style="font-weight:bold;">and</span> <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// false</span>
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">true</span> or <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;font-weight:bold;">false</span> or <span style="color:#644a9b;font-weight:bold;">false</span>  <span style="color:#898887;">// false</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--main-bg-color</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// var(--main-bg-color)</span>
+
+<span style="color:#0057ae;">$primary</span>: <span style="color:#aa5500;">#f2ece4</span>
+<span style="color:#0057ae;">$accent</span>: <span style="color:#aa5500;">#e1d7d2</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">radial-gradient(</span><span style="color:#0057ae;">$primary</span>, <span style="color:#0057ae;">$accent</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// radial-gradient(#f2ece4, #e1d7d2)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Helvetica&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 1</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">str-index(</span><span style="color:#bf0303;">&quot;Helvetica Neue&quot;</span>, <span style="color:#bf0303;">&quot;Neue&quot;</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 11</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">3</span><span style="color:#0057ae;">em</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// false</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">comparable(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">cm</span>, <span style="color:#b08000;">3</span><span style="color:#0057ae;">mm</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// true</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 10px 20px 30px</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span>(<span style="color:#aa5500;">blue</span>, <span style="color:#aa5500;">red</span><span style="color:#644a9b;">)</span>, <span style="color:#aa5500;">green</span>)  <span style="color:#898887;">// blue, red, green</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 10px 20px (30px 40px)</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>, <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>, <span style="color:#0057ae;">$separator</span>: comma<span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 10px, 20px</span>
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">append(</span>(<span style="color:#aa5500;">blue</span>, <span style="color:#aa5500;">red</span><span style="color:#644a9b;">)</span>, <span style="color:#aa5500;">green</span>, <span style="color:#0057ae;">$separator</span>: space)  <span style="color:#898887;">// blue red green</span>
+<span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">syntax-colors</span>(<span style="color:#0057ae;">$args</span>...)
+  <span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// (string: #080, comment: #800, $variable: $60b)</span>
+
+  <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$name</span>, <span style="color:#0057ae;">$color</span> in <span style="color:#644a9b;">keywords(</span><span style="color:#0057ae;">$args</span><span style="color:#644a9b;">)</span>
+    pre span<span style="color:#644a9b;">.stx-</span>#{<span style="color:#0057ae;">$name</span>}
+      <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>
+
+<span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">syntax-colors(</span><span style="color:#0057ae;">$string</span>: <span style="color:#aa5500;">#080</span>, <span style="color:#0057ae;">$comment</span>: <span style="color:#aa5500;">#800</span>, <span style="color:#0057ae;">$variable</span>: <span style="color:#aa5500;">#60b</span><span style="color:#644a9b;">)</span>;
+
+<span style="color:#0057ae;">$font-weights</span>: (<span style="color:#bf0303;">&quot;regular&quot;</span>: <span style="color:#b08000;">400</span>, <span style="color:#bf0303;">&quot;medium&quot;</span>: <span style="color:#b08000;">500</span>, <span style="color:#bf0303;">&quot;bold&quot;</span>: <span style="color:#b08000;">700</span>)
+
+<span style="color:#ff5500;">@debug</span> <span style="color:#644a9b;">map-values(</span><span style="color:#0057ae;">$font-weights</span><span style="color:#644a9b;">)</span>  <span style="color:#898887;">// 400, 500, 700</span>
+
+<span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}
+  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
+  #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>
+  -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>}
+    <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>
+    #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>
+    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}-image: <span style="color:#0057ae;">$value</span>
+</pre></body></html>
diff --git a/autotests/html/highlight.scss.html b/autotests/html/highlight.scss.html
index baef4c2..23305ce 100644
--- a/autotests/html/highlight.scss.html
+++ b/autotests/html/highlight.scss.html
@@ -1,716 +1,726 @@
 <!DOCTYPE html>
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>highlight.scss</title>
 <meta name="generator" content="KF5::SyntaxHighlighting (SCSS)"/>
 </head><body style="color:#1f1c1b"><pre>
 <span style="color:#898887;">/**</span>
 <span style="color:#898887;"> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</span>
 <span style="color:#898887;"> */</span>
 
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;othersheet.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span>, tv;
 
 body {
 	<span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">pt</span>;
 	<span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#bf0303;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>;
 	<span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;			<span style="color:#898887;">/* yet another comment */</span>
 	<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 	<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 	<span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 }
 
 <span style="color:#644a9b;">.something</span>
 {
 	<span style="font-weight:bold;">margin-right</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">px</span>;
 	<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#cdd</span>;
 	<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#AAFE04</span>;
 	<span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">30</span><span style="color:#0057ae;">%</span>,<span style="color:#b08000;">43</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">maroon</span>;
 }
 
 a<span style="color:#b08000;font-style:italic;">:hover</span> {
 }
 
 <span style="color:#006e28;font-weight:bold;">#header</span>,
 p<span style="color:#644a9b;">.intro</span><span style="color:#b08000;font-style:italic;">:first-letter</span>,
 p<span style="color:#b08000;font-style:italic;">:lang(nl)</span>,
 img<span style="color:#0095ff;font-weight:bold;">[align</span>=<span style="color:#bf0303;">&quot;right&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>
 {
 	<span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> Qt::<span style="color:#aa5500;">red</span> <span style="color:#0057ae;">!important</span>;
 	<span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#b08000;">15</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">/* unknown properties render italic */</span>
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
 
 	<span style="color:#006e28;font-weight:bold;">#header</span>
 	{
 		<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
 	}
 
 }
 
 <span style="color:#898887;">/*</span>
 <span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;">: add more tests, e.g. media</span>
 <span style="color:#898887;">*/</span>
 
 
 <span style="color:#644a9b;">.nice-look</span> {
 	<span style="font-weight:bold;">font-variant-alternates</span>: <span style="color:#644a9b;">styleset(</span>nice-style<span style="color:#644a9b;">)</span>;
 }
 
 ul {
 	<span style="font-weight:bold;">list-style</span>: thumbs;
 }
 
 <span style="color:#898887;">/* SVG &lt;a&gt; */</span>
 svg|a {}
 
 <span style="color:#898887;">/* XHTML and SVG &lt;a&gt; */</span>
 *|a {}
 
 *{}
 <span style="color:#644a9b;">.class</span>{}
 <span style="color:#006e28;font-weight:bold;">#id</span>{}
 <span style="color:#b08000;font-style:italic;">:hover</span>{}
 <span style="color:#b08000;font-style:italic;">:lang(fr)</span>{}
 E{}
 E F{}
 E&gt;F{}
 E &gt; F{}
 E~F{}
 E ~ F{}
 E<span style="color:#b08000;font-style:italic;">:first-child</span>{}
 E<span style="color:#b08000;font-style:italic;">:visited</span>{}
 E<span style="color:#b08000;font-style:italic;">::after</span>{}
 E<span style="color:#b08000;font-style:italic;">:lang(c)</span>{}
 E<span style="color:#b08000;font-style:italic;">:lang(fr-ca)</span>{}
 E + F{}
 E+F{}
 E<span style="color:#0095ff;font-weight:bold;">[foo]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">warning</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>~=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>^=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>$=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[foo</span>*=<span style="color:#bf0303;">&quot;warning&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 E<span style="color:#0095ff;font-weight:bold;">[lang</span>|=<span style="color:#bf0303;">&quot;en&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span>{}
 DIV<span style="color:#644a9b;">.warning</span>{}
 DIV <span style="color:#644a9b;">.warning</span>{}
 E<span style="color:#006e28;font-weight:bold;">#myid</span>{}
 E <span style="color:#006e28;font-weight:bold;">#myid</span>{}
 E,E{}
 E, E{}
 E ,E{}
 E , E{}
 
 p<span style="color:#b08000;font-style:italic;">:nth-child(2)</span> {
 	<span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">red</span>;
 }
 
 <span style="color:#898887;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
 body <span style="color:#b08000;font-style:italic;">:not(</span>div<span style="color:#b08000;font-style:italic;">):not(</span>span<span style="color:#b08000;font-style:italic;">)</span> {
 	<span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
 }
 
 <span style="color:#898887;">/* Elements that are not `.crazy` or `.fancy` */</span>
 <span style="color:#898887;">/* Note that this syntax is not well supported yet. */</span>
 body <span style="color:#b08000;font-style:italic;">:not(</span><span style="color:#644a9b;">.crazy</span><span style="color:#bf0303;text-decoration:underline;">,</span> <span style="color:#644a9b;">.fancy</span><span style="color:#b08000;font-style:italic;">)</span> {
 	<span style="font-weight:bold;">font-family</span>: <span style="color:#b08000;">sans-serif</span>;
 }
 
 <span style="color:#b08000;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 <span style="color:#b08000;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">lime</span>; }
 
 <span style="color:#644a9b;">.first</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
 <span style="color:#644a9b;">.second</span> span<span style="color:#b08000;font-style:italic;">:nth-child(2n+1)</span>,
 <span style="color:#644a9b;">.third</span> span<span style="color:#b08000;font-style:italic;">:nth-of-type(2n+1)</span> {
 	<span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">lime</span>;
 	unknown-property: <span style="color:#aa5500;">lime</span>;
 }
 
 <span style="color:#b08000;font-style:italic;">:root</span>{
-	<span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">if(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this<span style="color:#b08000;">.</span>width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
+	<span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">if(</span>x &gt; <span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span> this.width = <span style="color:#b08000;">10</span>; <span style="color:#898887;">/* valid custom property, invalid in any normal property */</span>
 }
 
 <span style="color:#b08000;font-style:italic;">:root</span>,
 <span style="color:#b08000;font-style:italic;">:root:lang(en)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;external link&quot;</span>;}
 <span style="color:#b08000;font-style:italic;">:root:lang(de)</span> {<span style="color:#0057ae;">--external-link</span>: <span style="color:#bf0303;">&quot;externer Link&quot;</span>;}
 
 a<span style="color:#0095ff;font-weight:bold;">[href</span>^=<span style="color:#bf0303;">&quot;http&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span><span style="color:#b08000;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot; (&quot;</span> <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--external-link</span><span style="color:#644a9b;">)</span> <span style="color:#bf0303;">&quot;)&quot;</span>}
 
 one   { <span style="color:#0057ae;">--foo</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>; }
 two   { <span style="color:#0057ae;">--bar</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--foo</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
 three { <span style="color:#0057ae;">--foo</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--bar</span><span style="color:#644a9b;">)</span> + <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
 <span style="color:#644a9b;">.foo</span> {
 	<span style="color:#0057ae;">--gap</span>: <span style="color:#b08000;">20</span>;
 	<span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span>px; <span style="color:#898887;">/*20 px*/</span>
 	<span style="font-weight:bold;">margin-top</span>: <span style="color:#644a9b;">calc(var(</span><span style="color:#0057ae;">--gap</span><span style="color:#644a9b;">)</span> * <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/*20px*/</span>
 }
 
 foo {
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> -<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>- <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> +<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>+ <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">-var(</span>--a<span style="color:#644a9b;">))</span>; <span style="color:#898887;">/* invalid */</span>
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span>*-<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> - <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> + -<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span> +(<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>)<span style="color:#644a9b;">)</span>;
 	<span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">calc(</span><span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> -(<span style="color:#644a9b;">var(</span><span style="color:#0057ae;">--a</span><span style="color:#644a9b;">)</span>)<span style="color:#644a9b;">)</span>;
 }
 
 sweet-alert input<span style="color:#b08000;font-style:italic;">:focus::-moz-placeholder</span> {
 	<span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
 	<span style="font-weight:bold;">transition</span>: opacity <span style="color:#b08000;">0.3</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">0.03</span><span style="color:#0057ae;">s</span> <span style="color:#b08000;">ease</span>;
 	<span style="font-weight:bold;">opacity</span>: <span style="color:#b08000;">0.5</span>;
 }
 
 
 <span style="color:#ff5500;">@font-feature-values</span> Font One {
 	<span style="color:#ff5500;">@styleset</span> {
 		nice-style: <span style="color:#b08000;">12</span>;
 	}
 }
 
 <span style="color:#ff5500;">@font-feature-values</span> Font Two {
 	<span style="color:#ff5500;">@styleset</span> {
 		nice-style: <span style="color:#b08000;">4</span>;
 	}
 }
 
 <span style="color:#ff5500;">@counter-style</span> thumbs {
 	system: cyclic;
 	symbols: <span style="color:#bf0303;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#bf0303;">&quot;</span>;
 	suffix: <span style="color:#bf0303;">&quot; &quot;</span>;
 }
 
 <span style="color:#ff5500;">@font-face</span> {
 	<span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Open Sans&quot;</span>;
 	<span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff2&quot;</span><span style="color:#644a9b;">)</span>,
 	<span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#644a9b;">format(</span><span style="color:#bf0303;">&quot;woff&quot;</span><span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#ff5500;">@page</span> {
 	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">cm</span>;
 }
 
 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:first</span> {
 	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">marks</span>: <span style="color:#b08000;">crop</span> <span style="color:#b08000;">cross</span>;
 }
 
 <span style="color:#ff5500;">@page</span> <span style="color:#b08000;font-style:italic;">:unknown</span> {
 	<span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">cm</span>;
 }
 
 <span style="color:#ff5500;">@font-face</span> {
 	unknown: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Bitstream Vera Serif Bold&quot;</span>;
 	<span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#ff5500;">@viewport</span> {
 	<span style="font-weight:bold;">zoom</span>: <span style="color:#b08000;">0.75</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">min-zoom</span>: <span style="color:#b08000;">0.5</span>;
 	<span style="font-weight:bold;">max-zoom</span>: <span style="color:#b08000;">0.9</span>;
 }
 
 <span style="color:#ff5500;">@viewport</span> {
 	<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
 	<span style="color:#898887;">/* comments */</span>
 	<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>;
 }
 
 <span style="color:#ff5500;">@document</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;https://www.example.com/&quot;</span><span style="color:#644a9b;">)</span> {
 	h1 {
 		<span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
 	}
 }
 
 <span style="color:#ff5500;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">grid</span>) {
 	div {
 		<span style="font-weight:bold;">display</span>: grid;
 	}
 }
 
 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>) {
 	<span style="color:#644a9b;">.sidebar</span> {
 		<span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
 	}
 }
 
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;fineprint.css&quot;</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">fineprint.css</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">print</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'bluish.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">speech</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">'custom.css'</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#644a9b;">)</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;common.css&quot;</span> <span style="color:#b08000;">screen</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'landscape.css'</span><span style="color:#644a9b;">)</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#b08000;">landscape</span>);
 
 <span style="color:#ff5500;">@namespace</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/1999/xhtml</span><span style="color:#644a9b;">)</span>;
 <span style="color:#ff5500;">@namespace</span> svg <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">http://www.w3.org/2000/svg</span><span style="color:#644a9b;">)</span>;
 
 <span style="color:#ff5500;">@keyframes</span> important1 {
 	<span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
 	<span style="color:#b08000;">50%</span>  { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; } <span style="color:#898887;">/* ignored */</span>
 	<span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
 }
 
 <span style="color:#ff5500;">@keyframes</span> important2 {
 	<span style="color:#b08000;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>;
 		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>; }
 	<span style="color:#b08000;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">150</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!important</span>; <span style="color:#898887;">/* ignored */</span>
 		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">px</span>; }
 }
 
 <span style="color:#ff5500;">@keyframes</span> slidein {
 	<span style="color:#b08000;">from</span> {
 		<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 		<span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
 	}
 
 	<span style="color:#b08000;">to</span> {
 		<span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
 		<span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 	}
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
 	a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
 	<span style="color:#898887;">/* comments */</span>
 	a<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span> }
 }
 
 <span style="color:#898887;">/**</span>
 <span style="color:#898887;"> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</span>
 <span style="color:#898887;"> */</span>
 
 <span style="color:#006e28;font-weight:bold;">#main</span> p {
   <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#00ff00</span>;
   <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">97</span><span style="color:#0057ae;">%</span>;
 
   <span style="color:#644a9b;">.redbox</span> {
     <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#ff0000</span>;
     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#000000</span>;
   }
 }
 
 a {
   <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
   <span style="font-weight:bold;">text-decoration</span>: <span style="color:#b08000;">none</span>;
   &amp;<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">text-decoration</span>: <span style="color:#b08000;">underline</span>; }
   body<span style="color:#644a9b;">.firefox</span> &amp; { <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">normal</span>; }
 }
 
 <span style="color:#006e28;font-weight:bold;">#main</span> {
   <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
   a {
     <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
     &amp;<span style="color:#b08000;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>; }
   }
 }
 
 <span style="color:#006e28;font-weight:bold;">#main</span> {
   <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
   &amp;-sidebar { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span>; }
 }
 
 <span style="color:#644a9b;">.funky</span> {
   <span style="font-weight:bold;">font</span>: {
     <span style="font-weight:bold;">family</span>: <span style="color:#b08000;">fantasy</span>;
     <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">em</span>;
     <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>;
   }
 }
 
 <span style="color:#644a9b;">.funky</span> {
   <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">24</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">fantasy</span> {
     <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>;
   }
 }
 
 <span style="color:#898887;">/* This comment is</span>
 <span style="color:#898887;"> * several lines long.</span>
 <span style="color:#898887;"> * since it uses the CSS comment syntax,</span>
 <span style="color:#898887;"> * it will appear in the CSS output. */</span>
 body { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>; }
 
 <span style="color:#898887;">// These comments are only one line long each.</span>
 <span style="color:#898887;">// They won't appear in the CSS output,</span>
 <span style="color:#898887;">// since they use the single-line comment syntax.</span>
 a { <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>; }
 
 <span style="color:#0057ae;">$version</span>: <span style="color:#bf0303;">&quot;1.2.3&quot;</span>;
 <span style="color:#898887;">/* This CSS is generated by My Snazzy Framework version #{$version}. */</span>
 
 <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">em</span>;
 
 <span style="color:#006e28;font-weight:bold;">#main</span> {
   <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>;
 }
 
 <span style="color:#006e28;font-weight:bold;">#main</span> {
   <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">em</span> <span style="color:#0057ae;">!global</span>;
   <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>;
 }
 
 <span style="color:#006e28;font-weight:bold;">#sidebar</span> {
   <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">firefox-message</span>(<span style="color:#0057ae;">$selector</span>) {
   body<span style="color:#644a9b;">.firefox</span> #{<span style="color:#0057ae;">$selector</span>}<span style="color:#b08000;font-style:italic;">:before</span> {
     <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;Hi, Firefox users!&quot;</span>;
   }
 }
 
 <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">firefox-message(</span><span style="color:#bf0303;">&quot;.header&quot;</span><span style="color:#644a9b;">)</span>;
 
 <span style="color:#0057ae;">$map</span>: (key1: value1, key2: value2, key3: value3);
 
 p {
   <span style="font-weight:bold;">font</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>;             <span style="color:#898887;">// Plain CSS, no division</span>
   <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">1000</span><span style="color:#0057ae;">px</span>;
   <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>/<span style="color:#b08000;">2</span>;            <span style="color:#898887;">// Uses a variable, does division</span>
   <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">round(</span><span style="color:#b08000;">1.5</span><span style="color:#644a9b;">)</span>/<span style="color:#b08000;">2</span>;        <span style="color:#898887;">// Uses a function, does division</span>
   <span style="font-weight:bold;">height</span>: (<span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">2</span>);          <span style="color:#898887;">// Uses parentheses, does division</span>
   <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">5</span><span style="color:#0057ae;">px</span> + <span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span>; <span style="color:#898887;">// Uses +, does division</span>
   <span style="font-weight:bold;">font</span>: (<span style="color:#b08000;">italic</span> <span style="color:#b08000;">bold</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>/<span style="color:#b08000;">8</span><span style="color:#0057ae;">px</span>); <span style="color:#898887;">// In a list, parentheses don't count</span>
 }
 
 p {
   <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>;
   <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>;
   <span style="font-weight:bold;">font</span>: #{<span style="color:#0057ae;">$font-size</span>}/#{<span style="color:#0057ae;">$line-height</span>};
 }
 
 p {
   <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#010203</span> + <span style="color:#aa5500;">#040506</span>;
   <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">255</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0.75</span><span style="color:#644a9b;">)</span> + <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>, <span style="color:#b08000;">255</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0.75</span><span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#0057ae;">$translucent-red</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">255</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0.5</span><span style="color:#644a9b;">)</span>;
 p {
   <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">opacify(</span><span style="color:#0057ae;">$translucent-red</span>, <span style="color:#b08000;">0.3</span><span style="color:#644a9b;">)</span>;
   <span style="font-weight:bold;">background-color</span>: <span style="color:#644a9b;">transparentize(</span><span style="color:#0057ae;">$translucent-red</span>, <span style="color:#b08000;">0.25</span><span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#0057ae;">$translucent-red</span>: <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">255</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0</span>, <span style="color:#b08000;">0.5</span><span style="color:#644a9b;">)</span>;
 <span style="color:#0057ae;">$green</span>: <span style="color:#aa5500;">#00ff00</span>;
 div {
-  <span style="font-weight:bold;">filter</span>: progid:DXImageTransform<span style="color:#b08000;">.</span>Microsoft<span style="color:#b08000;">.</span><span style="color:#644a9b;">gradient(</span>enabled=<span style="color:#bf0303;">'false'</span>, startColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$green</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span>, endColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$translucent-red</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span><span style="color:#644a9b;">)</span>;
+  <span style="font-weight:bold;">filter</span>: progid:DXImageTransform.Microsoft.<span style="color:#644a9b;">gradient(</span>enabled=<span style="color:#bf0303;">'false'</span>, startColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$green</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span>, endColorstr=<span style="color:#bf0303;">'</span>#{<span style="color:#644a9b;">ie-hex-str(</span><span style="color:#0057ae;">$translucent-red</span><span style="color:#644a9b;">)</span>}<span style="color:#bf0303;">'</span><span style="color:#644a9b;">)</span>;
 }
 p {
   <span style="font-weight:bold;">cursor</span>: e + -resize;
 }
 p<span style="color:#b08000;font-style:italic;">:before</span> {
   <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;Foo &quot;</span> + Bar;
   <span style="font-weight:bold;">font-family</span>: sans- + <span style="color:#bf0303;">&quot;serif&quot;</span>;
 }
 p<span style="color:#b08000;font-style:italic;">:before</span> {
   <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;I ate </span>#{<span style="color:#b08000;">5</span> + <span style="color:#b08000;">10</span>}<span style="color:#bf0303;"> pies!&quot;</span>;
 }
-<span style="color:#0057ae;">$value</span>: null;
+<span style="color:#0057ae;">$value</span>: <span style="color:#644a9b;font-weight:bold;">null</span>;
 p<span style="color:#b08000;font-style:italic;">:before</span> {
   <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;I ate </span>#{<span style="color:#0057ae;">$value</span>}<span style="color:#bf0303;"> pies!&quot;</span>;
 }
 p {
   <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">em</span> + (<span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span> * <span style="color:#b08000;">3</span>);
 }
 p {
   <span style="font-weight:bold;">color</span>: <span style="color:#644a9b;">hsl(</span><span style="color:#0057ae;">$hue</span>: <span style="color:#b08000;">0</span>, <span style="color:#0057ae;">$saturation</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>, <span style="color:#0057ae;">$lightness</span>: <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
 }
 <span style="color:#0057ae;">$name</span>: foo;
 <span style="color:#0057ae;">$attr</span>: border;
 p<span style="color:#644a9b;">.</span>#{<span style="color:#0057ae;">$name</span>} {
   #{<span style="color:#0057ae;">$attr</span>}-color: <span style="color:#aa5500;">blue</span>;
 }
 p {
   <span style="color:#0057ae;">$font-size</span>: <span style="color:#b08000;">12</span><span style="color:#0057ae;">px</span>;
   <span style="color:#0057ae;">$line-height</span>: <span style="color:#b08000;">30</span><span style="color:#0057ae;">px</span>;
   <span style="font-weight:bold;">font</span>: #{<span style="color:#0057ae;">$font-size</span>}/#{<span style="color:#0057ae;">$line-height</span>};
 }
 
 <span style="color:#644a9b;">.foo.bar</span> <span style="color:#644a9b;">.baz.bang</span>, <span style="color:#644a9b;">.bip.qux</span> {
     <span style="color:#0057ae;">$selector</span>: &amp;;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">does-parent-exist</span> {
   <span style="color:#ff5500;">@if</span> &amp; {
     &amp;<span style="color:#b08000;font-style:italic;">:hover</span> {
       <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
     }
   } <span style="color:#ff5500;">@else</span> {
     a {
       <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
     }
   }
 }
 
 <span style="color:#0057ae;">$content</span>: <span style="color:#bf0303;">&quot;First content&quot;</span>;
 <span style="color:#0057ae;">$content</span>: <span style="color:#bf0303;">&quot;Second content?&quot;</span> <span style="color:#0057ae;">!default</span>;
 <span style="color:#0057ae;">$new_content</span>: <span style="color:#bf0303;">&quot;First time reference&quot;</span> <span style="color:#0057ae;">!default</span>;
 
 <span style="color:#006e28;font-weight:bold;">#main</span> {
   <span style="font-weight:bold;">content</span>: <span style="color:#0057ae;">$content</span>;
   new-content: <span style="color:#0057ae;">$new_content</span>;
 }
 
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;foo.css&quot;</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;foo&quot;</span> <span style="color:#b08000;">screen</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;http://foo.com/bar&quot;</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">foo</span><span style="color:#644a9b;">)</span>;
 
 <span style="color:#0057ae;">$family</span>: <span style="color:#644a9b;">unquote(</span><span style="color:#bf0303;">&quot;Droid+Sans&quot;</span><span style="color:#644a9b;">)</span>;
 <span style="color:#ff5500;">@import</span> <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;http://fonts.googleapis.com/css?family=</span>#{<span style="color:#0057ae;">$family</span>}<span style="color:#bf0303;">&quot;</span><span style="color:#644a9b;">)</span>;
 <span style="color:#006e28;font-weight:bold;">#main</span> {
   <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;example&quot;</span>;
 }
 
 <span style="color:#644a9b;">.sidebar</span> {
   <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>;
   <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) {
     <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span>;
   }
 }
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> {
   <span style="color:#644a9b;">.sidebar</span> {
     <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#b08000;">landscape</span>) {
       <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span>;
     }
   }
 }
 
 <span style="color:#0057ae;">$media</span>: screen;
 <span style="color:#0057ae;">$feature</span>: -webkit-min-device-pixel-ratio;
 <span style="color:#0057ae;">$value</span>: <span style="color:#b08000;">1.5</span>;
 
 <span style="color:#ff5500;">@media</span> #{<span style="color:#0057ae;">$media</span>} <span style="font-weight:bold;">and</span> (<span style="color:#0057ae;">$feature</span>: <span style="color:#0057ae;">$value</span>) {
   <span style="color:#644a9b;">.sidebar</span> {
     <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">500</span><span style="color:#0057ae;">px</span>;
   }
 }
 
 <span style="color:#644a9b;">.error</span> {
   <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#aa5500;">#f00</span>;
   <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#fdd</span>;
 }
 <span style="color:#644a9b;">.seriousError</span> {
   <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.error</span>;
   <span style="font-weight:bold;">border-width</span>: <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span>;
 }
 
 <span style="color:#644a9b;">.hoverlink</span> {
   <span style="color:#ff5500;">@extend</span> a<span style="color:#b08000;font-style:italic;">:hover</span>;
 }
 a<span style="color:#b08000;font-style:italic;">:hover</span> {
   <span style="font-weight:bold;">text-decoration</span>: <span style="color:#b08000;">underline</span>;
 }
 
 <span style="color:#006e28;font-weight:bold;">#context</span> a<span style="color:#644a9b;font-weight:bold;">%extreme</span> a <span style="color:#644a9b;font-weight:bold;">%extreme</span> {
   <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
   <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
   <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>;
 }
 <span style="color:#644a9b;">.notice</span> {
   <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;font-weight:bold;">%extreme</span>;
 }
 
 a<span style="color:#644a9b;">.important</span> {
   <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.notice</span> !optional;
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
   <span style="color:#644a9b;">.page</span> {
     <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">8</span><span style="color:#0057ae;">in</span>;
     <span style="color:#ff5500;">@at-root</span> (<span style="font-weight:bold;">without</span>: media) {
       <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
     }
   }
 }
 
 <span style="color:#ff5500;">@debug</span> <span style="color:#b08000;">10</span><span style="color:#0057ae;">em</span> + <span style="color:#b08000;">12</span><span style="color:#0057ae;">em</span>;
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">adjust-location</span>(<span style="color:#0057ae;">$x</span>, <span style="color:#0057ae;">$y</span>) {
   <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$x</span><span style="color:#644a9b;">)</span> {
     <span style="color:#ff5500;">@warn</span> <span style="color:#bf0303;">&quot;Assuming </span>#{<span style="color:#0057ae;">$x</span>}<span style="color:#bf0303;"> to be in pixels&quot;</span>;
     <span style="color:#0057ae;">$x</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> * <span style="color:#0057ae;">$x</span>;
   }
   <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$y</span><span style="color:#644a9b;">)</span> {
     <span style="color:#ff5500;">@warn</span> <span style="color:#bf0303;">&quot;Assuming </span>#{<span style="color:#0057ae;">$y</span>}<span style="color:#bf0303;"> to be in pixels&quot;</span>;
     <span style="color:#0057ae;">$y</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> * <span style="color:#0057ae;">$y</span>;
   }
   <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">relative</span>; <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$x</span>; <span style="font-weight:bold;">top</span>: <span style="color:#0057ae;">$y</span>;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">adjust-location</span>(<span style="color:#0057ae;">$x</span>, <span style="color:#0057ae;">$y</span>) {
   <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$x</span><span style="color:#644a9b;">)</span> {
     <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;$x may not be unitless, was </span>#{<span style="color:#0057ae;">$x</span>}<span style="color:#bf0303;">.&quot;</span>;
   }
   <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;">unitless(</span><span style="color:#0057ae;">$y</span><span style="color:#644a9b;">)</span> {
     <span style="color:#ff5500;">@error</span> <span style="color:#bf0303;">&quot;$y may not be unitless, was </span>#{<span style="color:#0057ae;">$y</span>}<span style="color:#bf0303;">.&quot;</span>;
   }
   <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">relative</span>; <span style="font-weight:bold;">left</span>: <span style="color:#0057ae;">$x</span>; <span style="font-weight:bold;">top</span>: <span style="color:#0057ae;">$y</span>;
 }
 
 p {
   <span style="color:#ff5500;">@if</span> <span style="color:#b08000;">1</span> + <span style="color:#b08000;">1</span> == <span style="color:#b08000;">2</span> { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span>;  }
   <span style="color:#ff5500;">@if</span> <span style="color:#b08000;">5</span> &lt; <span style="color:#b08000;">3</span>      { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">dotted</span>; }
   <span style="color:#ff5500;">@if</span> <span style="color:#644a9b;font-weight:bold;">null</span>       { <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">double</span>; }
 }
 
 <span style="color:#0057ae;">$type</span>: monster;
 p {
   <span style="color:#ff5500;">@if</span> <span style="color:#0057ae;">$type</span> == ocean {
     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
   } <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$type</span> == matador {
     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
   } <span style="color:#ff5500;">@else</span> <span style="color:#ff5500;">if</span> <span style="color:#0057ae;">$type</span> == monster {
     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">green</span>;
   } <span style="color:#ff5500;">@else</span> {
     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">black</span>;
   }
 }
 
 <span style="color:#ff5500;">@for</span> <span style="color:#0057ae;">$i</span> from <span style="color:#b08000;">1</span> through <span style="color:#b08000;">3</span> {
   <span style="color:#644a9b;">.item-</span>#{<span style="color:#0057ae;">$i</span>} { <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span> * <span style="color:#0057ae;">$i</span>; }
 }
 
 <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$animal</span> in puma, sea-slug, egret, salamander {
   <span style="color:#644a9b;">.</span>#{<span style="color:#0057ae;">$animal</span>}-icon {
     <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'/images/</span>#{<span style="color:#0057ae;">$animal</span>}<span style="color:#bf0303;">.png'</span><span style="color:#644a9b;">)</span>;
   }
 }
 
 <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$animal</span>, <span style="color:#0057ae;">$color</span>, <span style="color:#0057ae;">$cursor</span> in (puma, <span style="color:#aa5500;">black</span>, <span style="color:#b08000;">default</span>),
                                   (sea-slug, <span style="color:#aa5500;">blue</span>, <span style="color:#b08000;">pointer</span>),
                                   (egret, <span style="color:#aa5500;">white</span>, <span style="color:#b08000;">move</span>) {
   <span style="color:#644a9b;">.</span>#{<span style="color:#0057ae;">$animal</span>}-icon {
     <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">'/images/</span>#{<span style="color:#0057ae;">$animal</span>}<span style="color:#bf0303;">.png'</span><span style="color:#644a9b;">)</span>;
     <span style="font-weight:bold;">border</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#b08000;">solid</span> <span style="color:#0057ae;">$color</span>;
     <span style="font-weight:bold;">cursor</span>: <span style="color:#0057ae;">$cursor</span>;
   }
 }
 
 <span style="color:#ff5500;">@each</span> <span style="color:#0057ae;">$header</span>, <span style="color:#0057ae;">$size</span> in (h1: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span>, h2: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span>, h3: <span style="color:#b08000;">1.2</span><span style="color:#0057ae;">em</span>) {
   #{<span style="color:#0057ae;">$header</span>} {
     <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$size</span>;
   }
 }
 
 <span style="color:#0057ae;">$i</span>: <span style="color:#b08000;">6</span>;
 <span style="color:#ff5500;">@while</span> <span style="color:#0057ae;">$i</span> &gt; <span style="color:#b08000;">0</span> {
   <span style="color:#644a9b;">.item-</span>#{<span style="color:#0057ae;">$i</span>} { <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">em</span> * <span style="color:#0057ae;">$i</span>; }
   <span style="color:#0057ae;">$i</span>: <span style="color:#0057ae;">$i</span> - <span style="color:#b08000;">2</span>;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">large-text</span> {
   <span style="font-weight:bold;">font</span>: {
     <span style="font-weight:bold;">family</span>: Arial;
     <span style="font-weight:bold;">size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
     <span style="font-weight:bold;">weight</span>: <span style="color:#b08000;">bold</span>;
   }
   <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">#ff0000</span>;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">clearfix</span> {
   <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">inline-block</span>;
   &amp;<span style="color:#b08000;font-style:italic;">:after</span> {
     <span style="font-weight:bold;">content</span>: <span style="color:#bf0303;">&quot;.&quot;</span>;
     <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">block</span>;
     <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">0</span>;
     <span style="font-weight:bold;">clear</span>: <span style="color:#b08000;">both</span>;
     <span style="font-weight:bold;">visibility</span>: <span style="color:#b08000;">hidden</span>;
   }
   * html &amp; { <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">1</span><span style="color:#0057ae;">px</span> }
 }
 
 <span style="color:#644a9b;">.page-title</span> {
   <span style="color:#ff5500;">@include</span> large-text;
   <span style="font-weight:bold;">padding</span>: <span style="color:#b08000;">4</span><span style="color:#0057ae;">px</span>;
   <span style="font-weight:bold;">margin-top</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">compound</span> {
   <span style="color:#ff5500;">@include</span> highlighted-background;
   <span style="color:#ff5500;">@include</span> header-text;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">highlighted-background</span> { <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#fc0</span>; }
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">header-text</span> { <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>; }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">sexy-border</span>(<span style="color:#0057ae;">$color</span>, <span style="color:#0057ae;">$width</span>) {
   <span style="font-weight:bold;">border</span>: {
     <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$color</span>;
     <span style="font-weight:bold;">width</span>: <span style="color:#0057ae;">$width</span>;
     <span style="font-weight:bold;">style</span>: <span style="color:#b08000;">dashed</span>;
   }
 }
 
 p { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">sexy-border(</span><span style="color:#aa5500;">blue</span>, <span style="color:#b08000;">1</span><span style="color:#0057ae;">in</span><span style="color:#644a9b;">)</span>; }
 
 p { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">sexy-border(</span><span style="color:#0057ae;">$color</span>: <span style="color:#aa5500;">blue</span><span style="color:#644a9b;">)</span>; }
 h1 { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">sexy-border(</span><span style="color:#0057ae;">$color</span>: <span style="color:#aa5500;">blue</span>, <span style="color:#0057ae;">$width</span>: <span style="color:#b08000;">2</span><span style="color:#0057ae;">in</span><span style="color:#644a9b;">)</span>; }
 
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">colors</span>(<span style="color:#0057ae;">$text</span>, <span style="color:#0057ae;">$background</span>, <span style="color:#0057ae;">$border</span>) {
   <span style="font-weight:bold;">color</span>: <span style="color:#0057ae;">$text</span>;
   <span style="font-weight:bold;">background-color</span>: <span style="color:#0057ae;">$background</span>;
   <span style="font-weight:bold;">border-color</span>: <span style="color:#0057ae;">$border</span>;
 }
 
 <span style="color:#0057ae;">$values</span>: <span style="color:#aa5500;">#ff0000</span>, <span style="color:#aa5500;">#00ff00</span>, <span style="color:#aa5500;">#0000ff</span>;
 <span style="color:#644a9b;">.primary</span> {
-  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$values</span><span style="color:#b08000;">...</span><span style="color:#644a9b;">)</span>;
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$values</span>...<span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#0057ae;">$value-map</span>: (<span style="color:#b08000;">text</span>: <span style="color:#aa5500;">#00ff00</span>, <span style="color:#aa5500;">background</span>: <span style="color:#aa5500;">#0000ff</span>, border: <span style="color:#aa5500;">#ff0000</span>);
 <span style="color:#644a9b;">.secondary</span> {
-  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$value-map</span><span style="color:#b08000;">...</span><span style="color:#644a9b;">)</span>;
+  <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">colors(</span><span style="color:#0057ae;">$value-map</span>...<span style="color:#644a9b;">)</span>;
 }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">apply-to-ie6-only</span> {
   * html {
     <span style="color:#ff5500;">@content</span>;
   }
 }
 <span style="color:#ff5500;">@include</span> apply-to-ie6-only {
   <span style="color:#006e28;font-weight:bold;">#logo</span> {
     <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">/logo.gif</span><span style="color:#644a9b;">)</span>;
   }
 }
 
 <span style="color:#0057ae;">$grid-width</span>: <span style="color:#b08000;">40</span><span style="color:#0057ae;">px</span>;
 <span style="color:#0057ae;">$gutter-width</span>: <span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span>;
 
 <span style="color:#ff5500;">@function</span> <span style="color:#644a9b;">grid-width</span>(<span style="color:#0057ae;">$n</span>) {
   <span style="color:#ff5500;">@return</span> <span style="color:#0057ae;">$n</span> * <span style="color:#0057ae;">$grid-width</span> + (<span style="color:#0057ae;">$n</span> - <span style="color:#b08000;">1</span>) * <span style="color:#0057ae;">$gutter-width</span>;
 }
 
 <span style="color:#006e28;font-weight:bold;">#sidebar</span> { <span style="font-weight:bold;">width</span>: <span style="color:#644a9b;">grid-width(</span><span style="color:#b08000;">5</span><span style="color:#644a9b;">)</span>; }
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">unify-parent</span>(<span style="color:#0057ae;">$child</span>) {
   <span style="color:#ff5500;">@at-root</span> #{<span style="color:#644a9b;">selector-unify(</span>&amp;, <span style="color:#0057ae;">$child</span><span style="color:#644a9b;">)</span>} {
     <span style="color:#ff5500;">@content</span>;
   }
 }
 
 <span style="color:#b08000;font-style:italic;">:root</span> {
   <span style="color:#0057ae;">--font-family-sans-serif</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-sans-serif</span><span style="color:#644a9b;">)</span>};
   <span style="color:#0057ae;">--font-family-monospace</span>: #{<span style="color:#644a9b;">inspect(</span><span style="color:#0057ae;">$font-family-monospace</span><span style="color:#644a9b;">)</span>};
 }
 
 div {
   <span style="font-weight:bold;">background-image</span>: <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">&quot;/icons/</span>#{<span style="color:#0057ae;">$name</span>}<span style="color:#bf0303;">.svg&quot;</span><span style="color:#644a9b;">)</span>;
   <span style="font-weight:bold;">font</span>: #{<span style="color:#bf0303;">&quot;string&quot;</span>};
+
+<span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>} {
+  <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>;
+  #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>;
+  -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}: <span style="color:#0057ae;">$value</span>;
+  <span style="color:#644a9b;">.icon-</span>#{<span style="color:#0057ae;">$name</span>} {
+    <span style="font-weight:bold;">position</span>: <span style="color:#b08000;">absolute</span>;
+    #{<span style="color:#0057ae;">$top-or-bottom</span>}: <span style="color:#b08000;">0</span>;
+    -#{<span style="color:#0057ae;">$prefix</span>}-#{<span style="color:#0057ae;">$property</span>}-image: <span style="color:#0057ae;">$value</span>
+  }
 }
 </pre></body></html>
diff --git a/autotests/html/review128925-1.scss.html b/autotests/html/review128925-1.scss.html
index 79db0f9..d9b0f96 100644
--- a/autotests/html/review128925-1.scss.html
+++ b/autotests/html/review128925-1.scss.html
@@ -1,218 +1,218 @@
 <!DOCTYPE html>
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>review128925-1.scss</title>
 <meta name="generator" content="KF5::SyntaxHighlighting (SCSS)"/>
 </head><body style="color:#1f1c1b"><pre>
 <span style="color:#898887;">/*</span>
 <span style="color:#898887;"> * SCSS Syntax Highlight Sample File (Standard)</span>
 <span style="color:#898887;"> *</span>
 <span style="color:#898887;"> * This file contains most SCSS syntax, CSS3 properties, advanced code structure.</span>
 <span style="color:#898887;"> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</span>
 <span style="color:#898887;"> *</span>
 <span style="color:#898887;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
 <span style="color:#898887;"> * @date    2016-09-15</span>
 <span style="color:#898887;"> */</span>
 
 <span style="color:#898887;">/*</span>
 <span style="color:#898887;"> * Block comment</span>
 <span style="color:#898887;"> *</span>
 <span style="color:#898887;"> * Alert keywords:</span>
 <span style="color:#898887;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#898887;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span>
 <span style="color:#898887;"> */</span>
 
 <span style="color:#ff5500;">@charset</span> <span style="color:#bf0303;">&quot;UTF-8&quot;</span>;
 
 <span style="color:#ff5500;">@import</span> <span style="color:#bf0303;">&quot;mixins/button&quot;</span>;
 
 <span style="color:#898887;">// Variable define</span>
 
 <span style="color:#0057ae;">$image-path</span>:            <span style="color:#bf0303;">&quot;../../static/images&quot;</span>;
 <span style="color:#0057ae;">$default-text-color</span>:    <span style="color:#aa5500;">#333</span> <span style="color:#0057ae;">!default</span>; <span style="color:#898887;">// Default can be overrided</span>
 <span style="color:#0057ae;">$default-font-size</span>:     <span style="color:#b08000;">16</span><span style="color:#0057ae;">px</span> <span style="color:#0057ae;">!default</span>;
 <span style="color:#0057ae;">$default-font-family</span>:   Roboto, <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, <span style="color:#b08000;">sans-serif</span>;
 <span style="color:#0057ae;">$default-font-weight</span>:   <span style="color:#b08000;">400</span>;
 <span style="color:#0057ae;">$default-line-height</span>:   <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">1.8</span>;
 <span style="color:#0057ae;">$shadow-transparence</span>:   <span style="color:#b08000;">0.25</span>;
 <span style="color:#0057ae;">$box-shadow</span>:            <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">3</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#0057ae;">$shadow-transparence</span><span style="color:#644a9b;">)</span>;
 <span style="color:#0057ae;">$page-width</span>:            <span style="color:#b08000;">100</span><span style="color:#0057ae;">rem</span>; <span style="color:#898887;">// kabab-case</span>
 <span style="color:#0057ae;">$gapOfArticle</span>:          <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;   <span style="color:#898887;">// camelCase</span>
 <span style="color:#0057ae;">$body_background_color</span>: <span style="color:#aa5500;">white</span>;  <span style="color:#898887;">// snake_case</span>
 
 <span style="color:#898887;">// Mixins</span>
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">border-radius</span>(<span style="color:#0057ae;">$radius</span>) {
   <span style="font-weight:bold;">-webkit-border-radius</span>: <span style="color:#0057ae;">$radius</span>;
      <span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#0057ae;">$radius</span>;
       -ms-border-radius: <span style="color:#0057ae;">$radius</span>;
           <span style="font-weight:bold;">border-radius</span>: <span style="color:#0057ae;">$radius</span>;
 }
 
 <span style="color:#644a9b;">.box</span> { <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">border-radius(</span><span style="color:#b08000;">10</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>; }
 
 <span style="color:#898887;">// Nesting</span>
 
 <span style="color:#006e28;font-weight:bold;">#home-page</span> {
 
     header {
         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">80</span><span style="color:#0057ae;">%</span>;
         <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span> <span style="color:#644a9b;font-weight:bold;">auto</span>;
 
         <span style="color:#644a9b;">.cover</span> {
             <span style="color:#ff5500;">@include</span> <span style="color:#644a9b;">border-radius(</span><span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span><span style="color:#644a9b;">)</span>;
             <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 
             &amp;<span style="color:#b08000;font-style:italic;">:hover</span> {
                 <span style="font-weight:bold;">background</span>: <span style="color:#aa5500;">#ffffff</span>;
             }
 
             <span style="color:#644a9b;">.like-button</span> {
                 <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">0.8</span>;
 
                 <span style="color:#ff5500;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">200</span><span style="color:#0057ae;">px</span>) {
                     <span style="font-weight:bold;">font-size</span>: <span style="color:#0057ae;">$default-font-size</span> * <span style="color:#b08000;">0.8</span>;
 
                     <span style="color:#644a9b;">.icon</span> {
                         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
                         <span style="font-weight:bold;">height</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
                     }
                 }
 
                 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
                     <span style="font-weight:bold;">display</span>: <span style="color:#b08000;">none</span>;
                 }
             }
         }
     }
 }
 
 <span style="color:#898887;">// Extend and inheritance</span>
 
 <span style="color:#644a9b;">.message</span> {
     <span style="font-weight:bold;">border</span>: <span style="color:#0057ae;">$border-light</span>;
     <span style="font-weight:bold;">background-color</span>: <span style="color:#aa5500;">#f0f0f0</span>;
 }
 
 <span style="color:#644a9b;">.message-danger</span> {
     <span style="color:#ff5500;">@extend</span> <span style="color:#644a9b;">.message</span>;
 }
 
 
 <span style="color:#898887;">// Control structures</span>
 
 <span style="color:#ff5500;">@mixin</span> <span style="color:#644a9b;">does-parent-exist</span> {
     <span style="color:#ff5500;">@if</span> &amp; {
         &amp;<span style="color:#b08000;font-style:italic;">:hover</span> {
             <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
         }
     } <span style="color:#ff5500;">@else</span> {
         a {
             <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">red</span>;
         }
     }
 }
 
 
 <span style="color:#898887;">// Operators</span>
 
 <span style="color:#644a9b;">.container</span> { <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>; }
 
 article<span style="color:#0095ff;font-weight:bold;">[role</span>=<span style="color:#bf0303;">&quot;main&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
   <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">left</span>;
   <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 }
 
 aside<span style="color:#0095ff;font-weight:bold;">[role</span>=<span style="color:#bf0303;">&quot;complementary&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
   <span style="font-weight:bold;">float</span>: <span style="color:#b08000;">right</span>;
   <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> / <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span> * <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
 }
 
 
 <span style="color:#898887;">// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</span>
 
 <span style="color:#0057ae;">$color1</span>: <span style="color:#644a9b;">hsl(</span><span style="color:#b08000;">120</span><span style="color:#0057ae;">deg</span>, <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>, <span style="color:#b08000;">50</span><span style="color:#0057ae;">%</span><span style="color:#644a9b;">)</span>;
-<span style="color:#0057ae;">$color2</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#0057ae;">$red</span>, <span style="color:#0057ae;">$green</span>, <span style="color:#aa5500;">blue</span>(<span style="color:#0057ae;">$color1</span><span style="color:#644a9b;">)</span>);
+<span style="color:#0057ae;">$color2</span>: <span style="color:#644a9b;">rgb(</span><span style="color:#0057ae;">$red</span>, <span style="color:#0057ae;">$green</span>, <span style="color:#644a9b;">blue(</span><span style="color:#0057ae;">$color1</span><span style="color:#644a9b;">))</span>;
 <span style="color:#0057ae;">$color3</span>: <span style="color:#644a9b;">mix(</span><span style="color:#0057ae;">$color1</span>, <span style="color:#0057ae;">$color2</span>, [<span style="color:#0057ae;">$weight</span>]<span style="color:#644a9b;">)</span>;
 
 
 <span style="color:#898887;">// Properties</span>
 
 html, body {
     <span style="font-weight:bold;">font-family</span>: <span style="color:#bf0303;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#b08000;">sans-serif</span>;
     <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">11</span><span style="color:#0057ae;">pt</span>;
     <span style="font-weight:bold;">line-height</span>: <span style="color:#b08000;">1.5</span><span style="color:#0057ae;">em</span>;
     <span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">px</span> + <span style="color:#0057ae;">$page-width</span> - <span style="color:#0057ae;">$gap</span> / <span style="color:#b08000;">2</span>;
     <span style="font-weight:bold;">background</span>: <span style="color:#0057ae;">$bg_color</span>;
     <span style="font-weight:bold;">text-shadow</span>: <span style="color:#b08000;">0</span> <span style="color:#b08000;">0</span> <span style="color:#b08000;">2</span><span style="color:#0057ae;">px</span> <span style="color:#644a9b;">rgba(</span><span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>,<span style="color:#b08000;">0</span>, <span style="color:#0057ae;">$transparence</span><span style="color:#644a9b;">)</span>;
     <span style="font-weight:bold;">box-sizing</span>: <span style="color:#b08000;">border-box</span>;
 }
 
 
 <span style="color:#898887;">// Selectors</span>
 
 blockquote {
     <span style="font-weight:bold;">margin</span>: <span style="color:#b08000;">0</span>;
 }
 
 header <span style="color:#006e28;font-weight:bold;">#logo</span> {
     <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">px</span>;
 }
 
 div<span style="color:#006e28;font-weight:bold;">#footer</span> <span style="color:#644a9b;">.link</span> {
     <span style="font-weight:bold;">color</span>: <span style="color:#aa5500;">blue</span>;
 }
 
 sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span> input<span style="color:#0095ff;font-weight:bold;">[type</span>=<span style="color:#bf0303;">&quot;text&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
     <span style="font-weight:bold;">font-size</span>: <span style="color:#b08000;">20</span><span style="color:#0057ae;">px</span>;
 }
 
 sidebar <span style="color:#006e28;font-weight:bold;">#subscribe</span> <span style="color:#644a9b;">.subscribe_form</span><span style="color:#b08000;font-style:italic;">:nth-child(2n + 1):hover</span> input<span style="color:#0095ff;font-weight:bold;">[class</span>*=<span style="color:#bf0303;">&quot;small-&quot;</span><span style="color:#0095ff;font-weight:bold;">]</span> {
     <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
 }
 
 
 <span style="color:#898887;">// Media Queries</span>
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">print</span> {
     <span style="color:#644a9b;">.container</span> {
         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
     }
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) {
     <span style="color:#644a9b;">.container</span> {
         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">600</span><span style="color:#0057ae;">px</span>;
     }
 }
 
 <span style="color:#ff5500;">@media</span> <span style="color:#b08000;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#b08000;">768</span><span style="color:#0057ae;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#b08000;">960</span><span style="color:#0057ae;">px</span>) {
     <span style="color:#644a9b;">.container</span> {
         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">720</span><span style="color:#0057ae;">px</span>;
     }
 }
 
 
 <span style="color:#898887;">// Fontface</span>
 
 <span style="color:#ff5500;">@font-face</span> {
     <span style="font-weight:bold;">font-family</span>: MyHelvetica;
     <span style="font-weight:bold;">src</span>: <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;Helvetica Neue Bold&quot;</span><span style="color:#644a9b;">)</span>,
         <span style="color:#644a9b;">local(</span><span style="color:#bf0303;">&quot;HelveticaNeue-Bold&quot;</span><span style="color:#644a9b;">)</span>,
         <span style="color:#644a9b;">url(</span><span style="color:#bf0303;">MgOpenModernaBold.ttf</span><span style="color:#644a9b;">)</span>;
     <span style="font-weight:bold;">font-weight</span>: <span style="color:#b08000;">bold</span>;
 }
 
 <span style="color:#898887;">// Animation (Keyframes)</span>
 
 <span style="color:#ff5500;">@keyframes</span> slidein {
     <span style="color:#b08000;">from</span> {
         <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">300</span><span style="color:#0057ae;">%</span>;
     }
 
     <span style="color:#b08000;">to</span> {
         <span style="font-weight:bold;">margin-left</span>: <span style="color:#b08000;">0</span><span style="color:#0057ae;">%</span>;
         <span style="font-weight:bold;">width</span>: <span style="color:#b08000;">100</span><span style="color:#0057ae;">%</span>;
     }
 }
 </pre></body></html>
diff --git a/autotests/input/highlight.sass b/autotests/input/highlight.sass
new file mode 100644
index 0000000..3776aca
--- /dev/null
+++ b/autotests/input/highlight.sass
@@ -0,0 +1,824 @@
+html,
+body,
+ul,
+ol
+  margin:  0
+  padding: 0
+
+@import reset
+body
+  font: 100% Helvetica, sans-serif
+  background-color: #efefef
+
+$font-stack:    Helvetica, sans-serif
+$primary-color: #333
+
+body
+  font: 100% $font-stack
+  color: $primary-color
+.container
+  width: 100%
+
+article[role="main"]
+  float: left
+  width: 600px / 960px * 100%
+
+%message-shared
+  border: 1px solid #ccc
+  padding: 10px
+  color: #333
+
+.message
+  @extend %message-shared
+
+.success
+  @extend %message-shared
+  border-color: green
+
+=transform($property)
+  -webkit-transform: $property
+  -ms-transform: $property
+  transform: $property
+.box
+  +transform(rotate(30deg))
+
+  // This comment won't be included in the CSS.
+   This is also commented out.
+  #a
+/* But this comment will, except in compressed mode.
+
+/* It can also contain interpolation:
+   1 + 1 = #{1 + 1}
+  1 + 1 = #{1 + 1}
+ 1 + 1 = #{1 + 1}
+#a
+
+// But this comment will, except in compressed mode.
+
+// It can also contain interpolation:
+   1 + 1 = #{1 + 1}
+  1 + 1 = #{1 + 1}
+ 1 + 1 = #{1 + 1}
+#a
+
+/*! This comment will be included even in compressed mode.
+
+#a
+
+/**/
+
+p .sans
+  font: Helvetica, /* Inline comments must be closed. */ sans-serif
+
+p .sans
+  font/*comment*/: Helvetica, /* Inline comments must be closed. */ sans-serif // comment
+
+/// Computes an exponent.
+///
+/// @param {number} $base
+///   The number to multiply by itself.
+/// @param {integer (unitless)} $exponent
+///   The number of `$base`s to multiply together.
+/// @return {number} `$base` to the power of `$exponent`.
+@function pow($base, $exponent)
+  $result: 1
+  @for $_ from 1 through $exponent
+    $result: $result * $base
+
+  @return $result
+
+$roboto-font-path: "../fonts/roboto"
+
+@font-face
+    // This is parsed as a normal function call that takes a quoted string.
+    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")
+    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2")
+    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2")
+
+    font-family: "Roboto"
+    font-weight: 100
+
+.logo
+  $width: 800px
+  width: $width
+  position: absolute
+  left: calc(50% - #{$width / 2})
+  top: 0
+
+$padding: 12px
+
+.post
+  // Since these max() calls don't use any Sass features other than
+  // interpolation, they're compiled to CSS max() calls.
+  padding-left: max(#{$padding}, env(safe-area-inset-left))
+  padding-right: max(#{$padding}, env(safe-area-inset-right))
+
+
+.sidebar
+  // Since these refer to a Sass variable without interpolation, they call
+  // Sass's built-in max() function.
+  padding-left: max($padding, 20px)
+  padding-right: max($padding, 20px)
+
+.circle
+  $size: 100px
+  width: $size
+  height: $size
+  border-radius: $size / 2
+
+@mixin prefix($property, $value, $prefixes)
+  @each $prefix in $prefixes
+    -#{$prefix}-#{$property}: $value
+
+  #{$property}: $value
+
+
+.gray
+  @include prefix(filter, grayscale(50%), moz webkit)
+
+.enlarge
+  font-size: 14px
+  transition:
+    property: font-size
+    duration: 4s
+    delay: 2s
+
+  &:hover
+    font-size: 36px
+
+.info-page
+  margin: auto
+    bottom: 10px
+    top: 2px
+
+$rounded-corners: false
+
+.button
+  border: 1px solid black
+  border-radius: if($rounded-corners, 5px, null)
+
+$primary: #81899b
+$accent: #ab2e
+$warn: #dfa612aa
+
+:root
+  --primary: #{$primary}
+  --accent: #{$accent}
+  --warn: #{$warn}
+
+  // Even though this looks like a Sass variable, it's valid CSS so it's not
+  // evaluated.
+  --consumed-by-js: $primary
+
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas
+
+:root
+  --font-family-sans-serif: #{inspect($font-family-sans-serif)}
+  --font-family-monospace: #{inspect($font-family-monospace)}
+
+.alert
+  // The parent selector can be used to add pseudo-classes to the outer
+  // selector.
+  &:hover
+    font-weight: bold
+
+
+  // It can also be used to style the outer selector in a certain context, such
+  // as a body set to use a right-to-left language.
+  [dir=rtl] &
+    margin-left: 0
+    margin-right: 10px
+
+
+  // You can even use it as an argument to pseudo-class selectors.
+  :not(&)
+    opacity: 0.8
+
+@mixin unify-parent($child)
+  @at-root #{selector-unify(&, $child)}
+    @content
+
+
+
+.wrapper .field
+  @include unify-parent("input")
+
+@mixin app-background($color)
+  #{if(&, '&.app-background', '.app-background')}
+    background-color: $color
+    color: rgba(#fff, 0.75)
+
+@include app-background(#036)
+
+.sidebar
+  @include app-background(#c6538c)
+
+.accordion
+  max-width: 600px
+  margin: 4rem auto
+
+  &__copy
+    display: none
+    padding: 1rem 1.5rem 2rem 1.5rem
+    line-height: 1.6
+    font-size: 14px
+
+    &--open
+      display: block
+
+
+.alert:hover, %strong-alert
+  font-weight: bold
+
+%strong-alert:hover
+  color: red
+
+%toolbelt
+  box-sizing: border-box
+  border-top: 1px rgba(#000, .12) solid
+
+  &:hover
+    border: 2px rgba(#000, .5) solid
+
+.action-buttons
+  @extend %toolbelt
+  color: #4285f4
+
+$border-dark: rgba($base-color, 0.88)
+$black: #000 !default
+$border-radius: 0.25rem !default
+$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default
+$box-shadow: 0 0.5rem 1rem rgba($black, blue($black)) !default
+$border-radius: 0.1rem
+
+@import 'library'
+
+$global-variable: global value
+
+  // This would fail, because $local-variable isn't in scope:
+  // local: $local-variable
+
+$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)
+
+.alert
+  // Instead of $theme-color-#{warning}
+  background-color: map-get($theme-colors, "warning")
+
+@mixin corner-icon($name, $top-or-bottom, $left-or-right)
+  .icon-#{$name}
+    background-image: url("/icons/#{$name}.svg")
+    position: absolute
+    #{$top-or-bottom}: 0
+    #{$left-or-right}: 0
+
+@include corner-icon("mail", top, right)
+
+@mixin inline-animation($duration)
+  $name: inline-#{unique-id()}
+
+  @keyframes #{$name}
+    @content
+
+  animation-name: $name
+  animation-duration: $duration
+  animation-iteration-count: infinite
+
+
+.pulse
+  @include inline-animation(2s)
+    from
+      background-color: yellow
+    to
+      background-color: red
+
+.example
+  unquoted: #{"string"}
+
+  & &
+    padding:
+      bottom: 0
+      left: 0
+
+// style.sass
+@import 'foundation/code', 'foundation/lists'
+
+@import "theme.css"
+@import "http://fonts.googleapis.com/css?family=Droid+Sans"
+@import url(theme)
+@import "landscape" screen and (orientation: landscape)
+
+@mixin google-font($family)
+  @import url("http://fonts.googleapis.com/css?family=#{$family}")
+
+@include google-font("Droid Sans")
+
+@mixin horizontal-list
+  @include reset-list
+
+  li
+    display: inline-block
+    margin:
+      left: -2px
+      right: 2em
+
+nav ul
+  @include horizontal-list
+
+@mixin rtl($property, $ltr-value, $rtl-value)
+  #{$property}: $ltr-value
+
+  [dir=rtl] &
+    #{$property}: $rtl-value
+
+.sidebar
+  @include rtl(float, left, right)
+
+@mixin replace-text($image, $x: 50%, $y: 50%)
+  text-indent: -99999em
+  overflow: hidden
+  text-align: left
+
+  background:
+    image: $image
+    repeat: no-repeat
+    position: $x $y
+
+.mail-icon
+  @include replace-text(url("/images/mail.svg"), 0)
+
+@include order(150px, "input.name", "input.address", "input.zip")
+
+@mixin syntax-colors($args...)
+  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)
+
+  @each $name, $color in keywords($args)
+    pre span.stx-#{$name}
+      color: $color
+
+@include syntax-colors($string: #080, $comment: #800, $variable: #60b)
+
+@mixin media($types...)
+  @each $type in $types
+    @media #{$type}
+      @content($type)
+
+@include media(screen, print) using ($type)
+  h1
+    font-size: 40px
+    @if $type == print
+      font-family: Calluna
+
+=reset-list
+  margin: 0
+  padding: 0
+  list-style: none
+
+=horizontal-list
+  +reset-list
+
+  li
+    display: inline-block
+    margin:
+      left: -2px
+      right: 2em
+
+nav ul
+  +horizontal-list
+@function pow($base, $exponent)
+  $result: 1
+  @for $_ from 1 through $exponent
+    $result: $result * $base
+
+  @return $result
+
+.sidebar
+  float: left
+  margin-left: pow(4, 3) * 1px
+
+@function sum($numbers...)
+  $sum: 0
+  @each $number in $numbers
+    $sum: $sum + $number
+
+  @return $sum
+
+.micro
+  width: sum(50px, 30px, 100px)
+@function str-insert($string, $insert, $index)
+  // Avoid making new strings if we don't need to.
+  @if str-length($string) == 0
+    @return $insert
+
+  $before: str-slice($string, 0, $index)
+  $after: str-slice($string, $index)
+  @return $before + $insert + $after
+
+.error
+  border: 1px #f00
+  background-color: #fdd
+
+  &--serious
+    @extend .error
+    border-width: 3px
+
+@mixin reflexive-position($property, $value)
+  @if $property != left and $property != right
+    @error "Property #{$property} must be either left or right."
+
+  $left-value: if($property == right, initial, $value)
+  $right-value: if($property == right, $value, initial)
+
+  left: $left-value
+  right: $right-value
+  [dir=rtl] &
+    left: $right-value
+    right: $left-value
+
+$known-prefixes: webkit, moz, ms, o
+
+@mixin prefix($property, $value, $prefixes)
+  @each $prefix in $prefixes
+    @if not index($known-prefixes, $prefix)
+      @warn "Unknown prefix #{$prefix}."
+
+
+    -#{$prefix}-#{$property}: $value
+
+  #{$property}: $value
+
+
+.tilt
+  // Oops, we typo'd "webkit" as "wekbit"!
+  @include prefix(transform, rotate(15deg), wekbit ms)
+
+@mixin inset-divider-offset($offset, $padding)
+  $divider-offset: (2 * $padding) + $offset
+  @debug "divider offset: #{$divider-offset}"
+
+  margin-left: $divider-offset
+  width: calc(100% - #{$divider-offset})
+
+@mixin unify-parent($child)
+  @at-root #{selector-unify(&, $child)}
+    @content
+
+
+.square-av
+  @include avatar(100px, $circle: false)
+.circle-av
+  @include avatar(100px, $circle: true)
+
+@mixin theme-colors($light-theme: true)
+  @if $light-theme
+    background-color: $light-background
+    color: $light-text
+  @else
+    background-color: $dark-background
+    color: $dark-text
+
+.banner
+  @include theme-colors($light-theme: true)
+  body.dark &
+    @include theme-colors($light-theme: false)
+
+@mixin triangle($size, $color, $direction)
+  height: 0
+  width: 0
+
+  border-color: transparent
+  border-style: solid
+  border-width: $size / 2
+
+  @if $direction == up
+    border-bottom-color: $color
+  @else if $direction == right
+    border-left-color: $color
+  @else if $direction == down
+    border-top-color: $color
+  @else if $direction == left
+    border-right-color: $color
+  @else
+    @error "Unknown direction #{$direction}."
+
+@each $size in $sizes
+  .icon-#{$size}
+    font-size: $size
+    height: $size
+    width: $size
+
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
+
+@each $name, $glyph in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+
+$icons: "eye" "\f112" 12px, "start" "\f12e" 16px, "stop" "\f12f" 10px
+
+@each $name, $glyph, $size in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+    font-size: $size
+
+@for $i from 1 through 3
+  ul:nth-child(3n + #{$i})
+    background-color: lighten($base-color, $i * 5%)
+
+/// Divides `$value` by `$ratio` until it's below `$base`.
+@function scale-below($value, $base, $ratio: 1.618)
+  @while $value > $base
+    $value: $value / $ratio
+  @return $value
+
+@namespace svg url(http://www.w3.org/2000/svg)
+
+@font-face
+  font-family: "Open Sans"
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2")
+
+@counter-style thumbs
+  system: cyclic
+  symbols: "\1F44D"
+
+@mixin sticky-position
+  position: fixed
+  @supports (position: sticky)
+    position: sticky
+
+@media (hover: hover)
+  .button:hover
+    border: 2px solid black
+
+    @media (color)
+      border-color: #036
+
+@keyframes slide-in
+  from
+    margin-left: 100%
+    width: 300%
+
+
+  70%
+    margin-left: 90%
+    width: 150%
+
+
+  to
+    margin-left: 0%
+    width: 100%
+
+@debug 100  // 100
+@debug 0.8  // 0.8
+@debug 16px  // 16px
+@debug 5px * 2px  // 10px*px (read "square pixels")
+@debug 5.2e3  // 5200
+@debug 6e-2  // 0.06
+@debug 4px * 6px  // 24px*px (read "square pixels")
+@debug 5px / 2s  // 2.5px/s (read "pixels per second")
+@debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
+//                                 (read "pixel-degrees per second-em")
+
+$degrees-per-second: 20deg/1s
+@debug $degrees-per-second  // 20deg/s
+@debug 1 / $degrees-per-second  // 0.05s/deg
+$transition-speed: 1s/50px
+
+@debug unquote(".widget:hover")  // .widget:hover
+@debug quote(bold)  // "bold"
+@debug 0.012345678912345  // 0.0123456789
+@debug 0.01234567891 == 0.01234567899  // true
+@debug 1.00000000009  // 1
+@debug 0.99999999991  // 1
+@debug "\""  // '"'
+@debug \.widget  // \.widget
+@debug "\a"  // "\a" (a string containing only a newline)
+@debug "line1\a line2"  // "line1\a line2" (foo and bar are separated by a newline)
+@debug "Nat + Liz \1F46D"  // "Nat + Liz 👭"
+@debug "Helvetica Neue"  // "Helvetica Neue"
+@debug "C:\\Program Files"  // "C:\\Program Files"
+@debug "\"Don't Fear the Reaper\""  // "\"Don't Fear the Reaper\""
+@debug "line1\a line2"  // "line1\a line2"
+
+$roboto-variant: "Mono"
+@debug "Roboto #{$roboto-variant}"  // "Roboto Mono"
+@debug bold  // bold
+@debug -webkit-flex  // -webkit-flex
+@debug --123  // --123
+
+$prefix: ms
+@debug -#{$prefix}-flex  // -ms-flex
+@debug \1F46D  // 👭
+@debug \21  // \!
+@debug \7Fx  // \7f x
+@debug str-length(\7Fx)  // 5
+@debug str-index("Helvetica Neue", "Helvetica")  // 1
+@debug str-index("Helvetica Neue", "Neue")  // 11
+@debug str-slice("Roboto Mono", -4)  // "Mono"
+@debug #f2ece4 // #f2ece4
+@debug #b37399aa // rgba(179, 115, 153, 67%)
+@debug midnightblue // #191970
+@debug rgb(204, 102, 153) // #c69
+@debug rgba(107, 113, 127, 0.8) // rgba(107, 113, 127, 0.8)
+@debug hsl(228, 7%, 86%) // #dadbdf
+@debug hsla(20, 20%, 85%, 0.7) // rgb(225, 215, 210, 0.7)
+$venus: #998099
+
+@debug scale-color($venus, $lightness: +15%) // #a893a8
+@debug mix($venus, midnightblue) // #594d85
+@debug nth(10px 12px 16px, 2)  // 12px
+@debug nth([line1, line2, line3], -1)  // line3
+$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
+
+@function prefixes-for-browsers($browsers)
+  $prefixes: ()
+  @each $browser in $browsers
+    $prefixes: append($prefixes, map-get($prefixes-by-browser, $browser))
+
+  @return $prefixes
+
+@debug prefixes-for-browsers("firefox" "ie")  // moz ms
+@mixin syntax-colors($args...)
+  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)
+
+  @each $name, $color in keywords($args)
+    pre span.stx-#{$name}
+      color: $color
+
+@include syntax-colors($string: #080, $comment: #800, $variable: #60b);
+$font-weights: ("regular": 400, "medium": 500, "bold": 700)
+
+@debug map-get($font-weights, "medium")  // 500
+@debug map-get($font-weights, "extra-bold")  // null
+$icons: ("eye": "\f112", "start": "\f12e", "stop": "\f12f")
+
+@each $name, $glyph in $icons
+  .icon-#{$name}:before
+    display: inline-block
+    font-family: "Icon Font"
+    content: $glyph
+
+$prefixes-by-browser: ("firefox": moz, "safari": webkit, "ie": ms)
+
+@mixin add-browser-prefix($browser, $prefix)
+  $prefixes-by-browser: map-merge($prefixes-by-browser, ($browser: $prefix))
+
+@include add-browser-prefix("opera", o)
+@debug $prefixes-by-browser
+// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)
+@debug 1px == 2px  // false
+@debug 1px == 1px  // true
+@debug 10px < 3px  // false
+@debug comparable(100px, 3in)  // true
+
+@debug str-index("Helvetica Neue", "Roboto")  // null
+@debug map-get(("large": 20px), "small")  // null
+@debug &  // null
+$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")
+
+h3
+  font: 18px bold map-get($fonts, "sans")
+
+$fonts: ("serif": "Helvetica Neue", "monospace": "Consolas")
+
+h3
+  font:
+    size: 18px
+    weight: bold
+    family: map-get($fonts, "sans")
+
+copy of $list with all elements for which $condition returns `true`
+/// removed.
+@function remove-where($list, $condition)
+  $new-list: ()
+  $separator: list-separator($list)
+  @each $element in $list
+    @if not call($condition, $element)
+      $new-list: append($new-list, $element, $separator: $separator)
+
+  @return $new-list
+
+$fonts: Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif
+
+content
+  @function contains-helvetica($string)
+    @return str-index($string, "Helvetica")
+
+  font-family: remove-where($fonts, get-function("contains-helvetica"))
+
+@debug 1px == 1px  // true
+@debug 1px != 1em  // true
+@debug 1 != 1px  // true
+@debug 96px == 1in  // true
+
+@debug "Helvetica" == Helvetica  // true
+@debug "Helvetica" != "Arial"  // true
+
+@debug hsl(34, 35%, 92.1%) == #f2ece4  // true
+@debug rgba(179, 115, 153, 0.5) != rgba(179, 115, 153, 0.8)  // true
+
+@debug (5px 7px 10px) == (5px 7px 10px)  // true
+@debug (5px 7px 10px) != (10px 14px 20px)  // true
+@debug (5px 7px 10px) != (5px, 7px, 10px)  // true
+@debug (5px 7px 10px) != [5px 7px 10px]  // true
+
+$theme: ("venus": #998099, "nebula": #d2e1dd)
+@debug $theme == ("venus": #998099, "nebula": #d2e1dd)  // true
+@debug $theme != ("venus": #998099, "iron": #dadbdf)  // true
+
+@debug true == true  // true
+@debug true != false  // true
+@debug null != false  // true
+
+@debug get-function("rgba") == get-function("rgba")  // true
+@debug get-function("rgba") != get-function("hsla")  // true
+
+@debug 10s + 15s  // 25s
+@debug 1in - 10px  // 0.8958333333in
+@debug 5px * 3px  // 15px*px
+@debug (12px/4px)  // 3
+@debug 1in % 9px  // 0.0625in
+@debug 15px / 30px  // 15px/30px
+@debug (10px + 5px) / 30px  // 0.5
+
+$result: 15px / 30px
+@debug $result  // 0.5
+
+@function fifteen-divided-by-thirty()
+  @return 15px / 30px
+
+@debug fifteen-divided-by-thirty()  // 0.5
+
+@debug (15px/30px)  // 0.5
+@debug (bold 15px/30px sans-serif)  // bold 15px/30px sans-serif
+@debug 15px/30px + 1  // 1.5
+
+@debug 4px * 6px  // 24px*px (read "square pixels")
+@debug 5px / 2s  // 2.5px/s (read "pixels per second")
+@debug 5px * 30deg / 2s / 24em  // 3.125px*deg/s*em
+//                                 (read "pixel-degrees per second-em")
+
+$degrees-per-second: 20deg/1s
+@debug $degrees-per-second  // 20deg/s
+@debug 1 / $degrees-per-second  // 0.05s/deg
+@debug 100 > 50  // true
+@debug 10px < 17px  // true
+@debug 96px >= 1in  // true
+@debug 1000ms <= 1s  // true
+@debug "Helvetica" + " Neue"  // "Helvetica Neue"
+@debug sans- + serif  // sans-serif
+@debug #{10px + 5px} / 30px  // 15px/30px
+@debug sans - serif  // sans-serif
+
+@debug "Elapsed time: " + 10s  // "Elapsed time: 10s";
+@debug true + " is a boolean value"  // "true is a boolean value";
+
+@debug / 15px  // /15px
+@debug - moz  // -moz
+@debug not true  // false
+@debug not false  // true
+
+@debug true and true  // true
+@debug true and false  // false
+
+@debug true or false  // true
+@debug false or false  // false
+@debug var(--main-bg-color)  // var(--main-bg-color)
+
+$primary: #f2ece4
+$accent: #e1d7d2
+@debug radial-gradient($primary, $accent)  // radial-gradient(#f2ece4, #e1d7d2)
+@debug str-index("Helvetica Neue", "Helvetica")  // 1
+@debug str-index("Helvetica Neue", "Neue")  // 11
+@debug comparable(2px, 1px)  // true
+@debug comparable(100px, 3em)  // false
+@debug comparable(10cm, 3mm)  // true
+@debug append(10px 20px, 30px)  // 10px 20px 30px
+@debug append((blue, red), green)  // blue, red, green
+@debug append(10px 20px, 30px 40px)  // 10px 20px (30px 40px)
+@debug append(10px, 20px, $separator: comma)  // 10px, 20px
+@debug append((blue, red), green, $separator: space)  // blue red green
+@mixin syntax-colors($args...)
+  @debug keywords($args)  // (string: #080, comment: #800, $variable: $60b)
+
+  @each $name, $color in keywords($args)
+    pre span.stx-#{$name}
+      color: $color
+
+@include syntax-colors($string: #080, $comment: #800, $variable: #60b);
+
+$font-weights: ("regular": 400, "medium": 500, "bold": 700)
+
+@debug map-values($font-weights)  // 400, 500, 700
+
+.icon-#{$name}
+  position: absolute
+  #{$top-or-bottom}: 0
+  -#{$prefix}-#{$property}: $value
+  .icon-#{$name}
+    position: absolute
+    #{$top-or-bottom}: 0
+    -#{$prefix}-#{$property}-image: $value
diff --git a/autotests/input/highlight.scss b/autotests/input/highlight.scss
index aa5b386..9c0bb7e 100644
--- a/autotests/input/highlight.scss
+++ b/autotests/input/highlight.scss
@@ -1,709 +1,719 @@
 /**
  * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.
  */
 
 @import url("othersheet.css") screen, tv;
 
 body {
 	font-size: 15pt;
 	font-family: Verdana, Helvetica, "Bitstream Vera Sans", sans-serif;
 	margin-top: 0px;			/* yet another comment */
 	margin-bottom: 0px;
 	margin-left: 0px;
 	margin-right: 0px;
 }
 
 .something
 {
 	margin-right: 0px;
 	color: #cdd;
 	color: #AAFE04;
 	color: rgb(10%,30%,43%);
 	background: maroon;
 }
 
 a:hover {
 }
 
 #header,
 p.intro:first-letter,
 p:lang(nl),
 img[align="right"]
 {
 	border: 1px solid Qt::red !important;
 	-moz-border-radius: 15px; /* unknown properties render italic */
 }
 
 @media print {
 
 	#header
 	{
 		display: none;
 	}
 
 }
 
 /*
 TODO: add more tests, e.g. media
 */
 
 
 .nice-look {
 	font-variant-alternates: styleset(nice-style);
 }
 
 ul {
 	list-style: thumbs;
 }
 
 /* SVG <a> */
 svg|a {}
 
 /* XHTML and SVG <a> */
 *|a {}
 
 *{}
 .class{}
 #id{}
 :hover{}
 :lang(fr){}
 E{}
 E F{}
 E>F{}
 E > F{}
 E~F{}
 E ~ F{}
 E:first-child{}
 E:visited{}
 E::after{}
 E:lang(c){}
 E:lang(fr-ca){}
 E + F{}
 E+F{}
 E[foo]{}
 E[foo=warning]{}
 E[foo="warning"]{}
 E[foo~="warning"]{}
 E[foo^="warning"]{}
 E[foo$="warning"]{}
 E[foo*="warning"]{}
 E[lang|="en"]{}
 DIV.warning{}
 DIV .warning{}
 E#myid{}
 E #myid{}
 E,E{}
 E, E{}
 E ,E{}
 E , E{}
 
 p:nth-child(2) {
 	background: red;
 }
 
 /* Elements that are not <div> or <span> elements */
 body :not(div):not(span) {
 	font-weight: bold;
 }
 
 /* Elements that are not `.crazy` or `.fancy` */
 /* Note that this syntax is not well supported yet. */
 body :not(.crazy, .fancy) {
 	font-family: sans-serif;
 }
 
 :nth-child(odd) { color: lime; }
 :nth-child(even) { color: lime; }
 :nth-child(4) { color: lime; }
 :nth-child(4n) { color: lime; }
 :nth-child(3n+4) { color: lime; }
 :nth-child(-n+3) { color: lime; }
 :nth-child(n+8):nth-child(-n+15) { color: lime; }
 
 .first span:nth-child(2n+1),
 .second span:nth-child(2n+1),
 .third span:nth-of-type(2n+1) {
 	background-color: lime;
 	unknown-property: lime;
 }
 
 :root{
 	--foo: if(x > 5) this.width = 10; /* valid custom property, invalid in any normal property */
 }
 
 :root,
 :root:lang(en) {--external-link: "external link";}
 :root:lang(de) {--external-link: "externer Link";}
 
 a[href^="http"]::after {content: " (" var(--external-link) ")"}
 
 one   { --foo: 10px; }
 two   { --bar: calc(var(--foo) + 10px); }
 three { --foo: calc(var(--bar) + 10px); }
 .foo {
 	--gap: 20;
 	margin-top: var(--gap)px; /*20 px*/
 	margin-top: calc(var(--gap) * 1px); /*20px*/
 }
 
 foo {
 	width: calc(50% -8px); /* invalid */
 	width: calc(50%- 8px); /* invalid */
 	width: calc(50% +8px); /* invalid */
 	width: calc(50%+ 8px); /* invalid */
 	width: calc(2px -var(--a)); /* invalid */
 	width: calc(50%*-8px);
 	width: calc(50% - 8px);
 	width: calc(50% + -8px);
 	width: calc(50% +(8px));
 	width: calc(2px -(var(--a)));
 }
 
 sweet-alert input:focus::-moz-placeholder {
 	-webkit-transition: opacity 0.3s 0.03s ease;
 	transition: opacity 0.3s 0.03s ease;
 	opacity: 0.5;
 }
 
 
 @font-feature-values Font One {
 	@styleset {
 		nice-style: 12;
 	}
 }
 
 @font-feature-values Font Two {
 	@styleset {
 		nice-style: 4;
 	}
 }
 
 @counter-style thumbs {
 	system: cyclic;
 	symbols: "\1F44D";
 	suffix: " ";
 }
 
 @font-face {
 	font-family: "Open Sans";
 	src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
 	url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
 }
 
 @page {
 	margin: 1cm;
 }
 
 @page :first {
 	margin: 2cm;
 	/* comments */
 	marks: crop cross;
 }
 
 @page :unknown {
 	margin: 2cm;
 }
 
 @font-face {
 	unknown: 2px;
 	/* comments */
 	font-family: "Bitstream Vera Serif Bold";
 	src: url("/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff");
 }
 
 @viewport {
 	zoom: 0.75;
 	/* comments */
 	min-zoom: 0.5;
 	max-zoom: 0.9;
 }
 
 @viewport {
 	orientation: landscape;
 	/* comments */
 	orientation: landscape;
 }
 
 @document url("https://www.example.com/") {
 	h1 {
 		color: green;
 	}
 }
 
 @supports (display: grid) {
 	div {
 		display: grid;
 	}
 }
 
 @media (max-width: 600px) {
 	.sidebar {
 		display: none;
 	}
 }
 
 @import url("fineprint.css") print;
 @import url(fineprint.css) print;
 @import url('bluish.css') speech;
 @import 'custom.css';
 @import url("chrome://communicator/skin/");
 @import "common.css" screen;
 @import url('landscape.css') screen and (orientation:landscape);
 
 @namespace url(http://www.w3.org/1999/xhtml);
 @namespace svg url(http://www.w3.org/2000/svg);
 
 @keyframes important1 {
 	from { margin-top: 50px; }
 	50%  { margin-top: 150px !important; } /* ignored */
 	to   { margin-top: 100px; }
 }
 
 @keyframes important2 {
 	from { margin-top: 50px;
 		margin-bottom: 100px; }
 	to   { margin-top: 150px !important; /* ignored */
 		margin-bottom: 50px; }
 }
 
 @keyframes slidein {
 	from {
 		margin-left: 100%;
 		width: 300%;
 	}
 
 	to {
 		margin-left: 0%;
 		width: 100%;
 	}
 }
 
 @media print {
 	a:hover { color: red }
 	/* comments */
 	a:hover { color: red }
 }
 
 /**
  * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html
  */
 
 #main p {
   color: #00ff00;
   width: 97%;
 
   .redbox {
     background-color: #ff0000;
     color: #000000;
   }
 }
 
 a {
   font-weight: bold;
   text-decoration: none;
   &:hover { text-decoration: underline; }
   body.firefox & { font-weight: normal; }
 }
 
 #main {
   color: black;
   a {
     font-weight: bold;
     &:hover { color: red; }
   }
 }
 
 #main {
   color: black;
   &-sidebar { border: 1px solid; }
 }
 
 .funky {
   font: {
     family: fantasy;
     size: 30em;
     weight: bold;
   }
 }
 
 .funky {
   font: 20px/24px fantasy {
     weight: bold;
   }
 }
 
 /* This comment is
  * several lines long.
  * since it uses the CSS comment syntax,
  * it will appear in the CSS output. */
 body { color: black; }
 
 // These comments are only one line long each.
 // They won't appear in the CSS output,
 // since they use the single-line comment syntax.
 a { color: green; }
 
 $version: "1.2.3";
 /* This CSS is generated by My Snazzy Framework version #{$version}. */
 
 $width: 5em;
 
 #main {
   width: $width;
 }
 
 #main {
   $width: 5em !global;
   width: $width;
 }
 
 #sidebar {
   width: $width;
 }
 
 @mixin firefox-message($selector) {
   body.firefox #{$selector}:before {
     content: "Hi, Firefox users!";
   }
 }
 
 @include firefox-message(".header");
 
 $map: (key1: value1, key2: value2, key3: value3);
 
 p {
   font: 10px/8px;             // Plain CSS, no division
   $width: 1000px;
   width: $width/2;            // Uses a variable, does division
   width: round(1.5)/2;        // Uses a function, does division
   height: (500px/2);          // Uses parentheses, does division
   margin-left: 5px + 8px/2px; // Uses +, does division
   font: (italic bold 10px/8px); // In a list, parentheses don't count
 }
 
 p {
   $font-size: 12px;
   $line-height: 30px;
   font: #{$font-size}/#{$line-height};
 }
 
 p {
   color: #010203 + #040506;
   color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
 }
 
 $translucent-red: rgba(255, 0, 0, 0.5);
 p {
   color: opacify($translucent-red, 0.3);
   background-color: transparentize($translucent-red, 0.25);
 }
 
 $translucent-red: rgba(255, 0, 0, 0.5);
 $green: #00ff00;
 div {
   filter: progid:DXImageTransform.Microsoft.gradient(enabled='false', startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
 }
 p {
   cursor: e + -resize;
 }
 p:before {
   content: "Foo " + Bar;
   font-family: sans- + "serif";
 }
 p:before {
   content: "I ate #{5 + 10} pies!";
 }
 $value: null;
 p:before {
   content: "I ate #{$value} pies!";
 }
 p {
   width: 1em + (2em * 3);
 }
 p {
   color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
 }
 $name: foo;
 $attr: border;
 p.#{$name} {
   #{$attr}-color: blue;
 }
 p {
   $font-size: 12px;
   $line-height: 30px;
   font: #{$font-size}/#{$line-height};
 }
 
 .foo.bar .baz.bang, .bip.qux {
     $selector: &;
 }
 
 @mixin does-parent-exist {
   @if & {
     &:hover {
       color: red;
     }
   } @else {
     a {
       color: red;
     }
   }
 }
 
 $content: "First content";
 $content: "Second content?" !default;
 $new_content: "First time reference" !default;
 
 #main {
   content: $content;
   new-content: $new_content;
 }
 
 @import "foo.css";
 @import "foo" screen;
 @import "http://foo.com/bar";
 @import url(foo);
 
 $family: unquote("Droid+Sans");
 @import url("http://fonts.googleapis.com/css?family=#{$family}");
 #main {
   @import "example";
 }
 
 .sidebar {
   width: 300px;
   @media screen and (orientation: landscape) {
     width: 500px;
   }
 }
 @media screen {
   .sidebar {
     @media (orientation: landscape) {
       width: 500px;
     }
   }
 }
 
 $media: screen;
 $feature: -webkit-min-device-pixel-ratio;
 $value: 1.5;
 
 @media #{$media} and ($feature: $value) {
   .sidebar {
     width: 500px;
   }
 }
 
 .error {
   border: 1px #f00;
   background-color: #fdd;
 }
 .seriousError {
   @extend .error;
   border-width: 3px;
 }
 
 .hoverlink {
   @extend a:hover;
 }
 a:hover {
   text-decoration: underline;
 }
 
 #context a%extreme a %extreme {
   color: blue;
   font-weight: bold;
   font-size: 2em;
 }
 .notice {
   @extend %extreme;
 }
 
 a.important {
   @extend .notice !optional;
 }
 
 @media print {
   .page {
     width: 8in;
     @at-root (without: media) {
       color: red;
     }
   }
 }
 
 @debug 10em + 12em;
 
 @mixin adjust-location($x, $y) {
   @if unitless($x) {
     @warn "Assuming #{$x} to be in pixels";
     $x: 1px * $x;
   }
   @if unitless($y) {
     @warn "Assuming #{$y} to be in pixels";
     $y: 1px * $y;
   }
   position: relative; left: $x; top: $y;
 }
 
 @mixin adjust-location($x, $y) {
   @if unitless($x) {
     @error "$x may not be unitless, was #{$x}.";
   }
   @if unitless($y) {
     @error "$y may not be unitless, was #{$y}.";
   }
   position: relative; left: $x; top: $y;
 }
 
 p {
   @if 1 + 1 == 2 { border: 1px solid;  }
   @if 5 < 3      { border: 2px dotted; }
   @if null       { border: 3px double; }
 }
 
 $type: monster;
 p {
   @if $type == ocean {
     color: blue;
   } @else if $type == matador {
     color: red;
   } @else if $type == monster {
     color: green;
   } @else {
     color: black;
   }
 }
 
 @for $i from 1 through 3 {
   .item-#{$i} { width: 2em * $i; }
 }
 
 @each $animal in puma, sea-slug, egret, salamander {
   .#{$animal}-icon {
     background-image: url('/images/#{$animal}.png');
   }
 }
 
 @each $animal, $color, $cursor in (puma, black, default),
                                   (sea-slug, blue, pointer),
                                   (egret, white, move) {
   .#{$animal}-icon {
     background-image: url('/images/#{$animal}.png');
     border: 2px solid $color;
     cursor: $cursor;
   }
 }
 
 @each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
   #{$header} {
     font-size: $size;
   }
 }
 
 $i: 6;
 @while $i > 0 {
   .item-#{$i} { width: 2em * $i; }
   $i: $i - 2;
 }
 
 @mixin large-text {
   font: {
     family: Arial;
     size: 20px;
     weight: bold;
   }
   color: #ff0000;
 }
 
 @mixin clearfix {
   display: inline-block;
   &:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
   }
   * html & { height: 1px }
 }
 
 .page-title {
   @include large-text;
   padding: 4px;
   margin-top: 10px;
 }
 
 @mixin compound {
   @include highlighted-background;
   @include header-text;
 }
 
 @mixin highlighted-background { background-color: #fc0; }
 @mixin header-text { font-size: 20px; }
 
 @mixin sexy-border($color, $width) {
   border: {
     color: $color;
     width: $width;
     style: dashed;
   }
 }
 
 p { @include sexy-border(blue, 1in); }
 
 p { @include sexy-border($color: blue); }
 h1 { @include sexy-border($color: blue, $width: 2in); }
 
 
 @mixin colors($text, $background, $border) {
   color: $text;
   background-color: $background;
   border-color: $border;
 }
 
 $values: #ff0000, #00ff00, #0000ff;
 .primary {
   @include colors($values...);
 }
 
 $value-map: (text: #00ff00, background: #0000ff, border: #ff0000);
 .secondary {
   @include colors($value-map...);
 }
 
 @mixin apply-to-ie6-only {
   * html {
     @content;
   }
 }
 @include apply-to-ie6-only {
   #logo {
     background-image: url(/logo.gif);
   }
 }
 
 $grid-width: 40px;
 $gutter-width: 10px;
 
 @function grid-width($n) {
   @return $n * $grid-width + ($n - 1) * $gutter-width;
 }
 
 #sidebar { width: grid-width(5); }
 
 @mixin unify-parent($child) {
   @at-root #{selector-unify(&, $child)} {
     @content;
   }
 }
 
 :root {
   --font-family-sans-serif: #{inspect($font-family-sans-serif)};
   --font-family-monospace: #{inspect($font-family-monospace)};
 }
 
 div {
   background-image: url("/icons/#{$name}.svg");
   font: #{"string"};
+
+.icon-#{$name} {
+  position: absolute;
+  #{$top-or-bottom}: 0;
+  -#{$prefix}-#{$property}: $value;
+  .icon-#{$name} {
+    position: absolute;
+    #{$top-or-bottom}: 0;
+    -#{$prefix}-#{$property}-image: $value
+  }
 }
diff --git a/autotests/reference/highlight.css.ref b/autotests/reference/highlight.css.ref
index a262282..cd17f06 100644
--- a/autotests/reference/highlight.css.ref
+++ b/autotests/reference/highlight.css.ref
@@ -1,286 +1,286 @@
 <Comment>/**</Comment><br/>
 <Comment> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</Comment><br/>
 <Comment> */</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"othersheet.css"</String><Function>)</Function><Normal Text> </Normal Text><Value>screen</Value><Normal Text>, tv</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>body</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>15</Number><Unit>pt</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: Verdana</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Bitstream Vera Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text>			</Normal Text><Comment>/* yet another comment */</Comment><br/>
 <Normal Text>	</Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Error>// this is no comment, it's just broken!</Error><br/>
 <Normal Text>	</Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.something</Selector Class><br/>
 <Normal Text>{</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#cdd</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#AAFE04</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgb(</Function><Number>10</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Number>30</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Number>43</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>maroon</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#header</Selector Id><Separator Symbol>,</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Selector Class>.intro</Selector Class><Selector Pseudo>:first-letter</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:lang(nl)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Tag>img</Selector Tag><Selector Attribute>[align</Selector Attribute><Operator>=</Operator><String>"right"</String><Selector Attribute>]</Selector Attribute><br/>
 <Normal Text>{</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> Qt::</Normal Text><Color>red</Color><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>-moz-border-radius</Property><Normal Text>: </Normal Text><Number>15</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* unknown properties render italic */</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Id>#header</Selector Id><br/>
 <Normal Text>	{</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/*</Comment><br/>
 <Alert Level 2>TODO</Alert Level 2><Comment>: add more tests, e.g. media</Comment><br/>
 <Comment>*/</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.nice-look</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-variant-alternates</Property><Normal Text>: styleset</Normal Text><Function>(</Function><Normal Text>nice-style</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>ul</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>list-style</Property><Normal Text>: thumbs</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* SVG <a> */</Comment><br/>
 <Selector Tag>svg</Selector Tag><Operator>|</Operator><Selector Tag>a</Selector Tag><Normal Text> {}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* XHTML and SVG <a> */</Comment><br/>
 <Operator>*|</Operator><Selector Tag>a</Selector Tag><Normal Text> {}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Operator>*</Operator><Normal Text>{}</Normal Text><br/>
 <Selector Class>.class</Selector Class><Normal Text>{}</Normal Text><br/>
 <Selector Id>#id</Selector Id><Normal Text>{}</Normal Text><br/>
 <Selector Pseudo>:hover</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Pseudo>:lang(fr)</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Operator>></Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>></Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Operator>~</Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>~</Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:first-child</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:visited</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>::after</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:lang(c)</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:lang(fr-ca)</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Operator>+</Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>=</Operator><String>warning</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>~=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>^=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>$=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>*=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[lang</Selector Attribute><Operator>|=</Operator><String>"en"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>DIV</Selector Tag><Selector Class>.warning</Selector Class><Normal Text>{}</Normal Text><br/>
 <Selector Tag>DIV</Selector Tag><Normal Text> </Normal Text><Selector Class>.warning</Selector Class><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Id>#myid</Selector Id><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Selector Id>#myid</Selector Id><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Separator Symbol>,</Separator Symbol><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Separator Symbol>,</Separator Symbol><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:nth-child(2)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* Elements that are not <div> or <span> elements */</Comment><br/>
 <Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Selector Tag>div</Selector Tag><Selector Pseudo>):not(</Selector Pseudo><Selector Tag>span</Selector Tag><Selector Pseudo>)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* Elements that are not `.crazy` or `.fancy` */</Comment><br/>
 <Comment>/* Note that this syntax is not well supported yet. */</Comment><br/>
 <Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Selector Class>.crazy</Selector Class><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Class>.fancy</Selector Class><Selector Pseudo>)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:nth-child(odd)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(even)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(4)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(4n)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(3n+4)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(-n+3)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(n+8):nth-child(-n+15)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.first</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-child(2n+1)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Class>.second</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-child(2n+1)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Class>.third</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-of-type(2n+1)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Unknown Property>unknown-property</Unknown Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:root</Selector Pseudo><Normal Text>{</Normal Text><br/>
-<Normal Text>	</Normal Text><Variable>--foo</Variable><Normal Text>: if</Normal Text><Function>(</Function><Normal Text>x > </Normal Text><Number>5</Number><Function>)</Function><Normal Text> this</Normal Text><Number>.</Number><Normal Text>width = </Normal Text><Number>10</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* valid custom property, invalid in any normal property */</Comment><br/>
+<Normal Text>	</Normal Text><Variable>--foo</Variable><Normal Text>: if</Normal Text><Function>(</Function><Normal Text>x > </Normal Text><Number>5</Number><Function>)</Function><Normal Text> this.width = </Normal Text><Number>10</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* valid custom property, invalid in any normal property */</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:root</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Pseudo>:root:lang(en)</Selector Pseudo><Normal Text> {</Normal Text><Variable>--external-link</Variable><Normal Text>: </Normal Text><String>"external link"</String><Separator Symbol>;</Separator Symbol><Normal Text>}</Normal Text><br/>
 <Selector Pseudo>:root:lang(de)</Selector Pseudo><Normal Text> {</Normal Text><Variable>--external-link</Variable><Normal Text>: </Normal Text><String>"externer Link"</String><Separator Symbol>;</Separator Symbol><Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>a</Selector Tag><Selector Attribute>[href</Selector Attribute><Operator>^=</Operator><String>"http"</String><Selector Attribute>]</Selector Attribute><Selector Pseudo>::after</Selector Pseudo><Normal Text> {</Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>" ("</String><Normal Text> </Normal Text><Function>var(</Function><Variable>--external-link</Variable><Function>)</Function><Normal Text> </Normal Text><String>")"</String><Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>one</Selector Tag><Normal Text>   { </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Tag>two</Selector Tag><Normal Text>   { </Normal Text><Variable>--bar</Variable><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--foo</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Tag>three</Selector Tag><Normal Text> { </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--bar</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Class>.foo</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Variable>--gap</Variable><Normal Text>: </Normal Text><Number>20</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Function>var(</Function><Variable>--gap</Variable><Function>)</Function><Normal Text>px</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/*20 px*/</Comment><br/>
 <Normal Text>	</Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--gap</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/*20px*/</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>foo</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Number>-8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Normal Text>%</Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Number>+8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Normal Text>%</Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>2</Number><Unit>px</Unit><Normal Text> -var</Normal Text><Function>(</Function><Normal Text>--a</Normal Text><Function>))</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>*</Operator><Number>-8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>-8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text>(</Normal Text><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text>(</Normal Text><Function>var(</Function><Variable>--a</Variable><Function>)</Function><Normal Text>)</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>sweet-alert</Selector Tag><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Pseudo>:focus::-moz-placeholder</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>-webkit-transition</Property><Normal Text>: opacity </Normal Text><Number>0.3</Number><Unit>s</Unit><Normal Text> </Normal Text><Number>0.03</Number><Unit>s</Unit><Normal Text> </Normal Text><Value>ease</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>transition</Property><Normal Text>: opacity </Normal Text><Number>0.3</Number><Unit>s</Unit><Normal Text> </Normal Text><Number>0.03</Number><Unit>s</Unit><Normal Text> </Normal Text><Value>ease</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>opacity</Property><Normal Text>: </Normal Text><Number>0.5</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-feature-values</At Rule><Normal Text> Font One {</Normal Text><br/>
 <Normal Text>	</Normal Text><At Rule>@styleset</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Unknown Property>nice-style</Unknown Property><Normal Text>: </Normal Text><Number>12</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-feature-values</At Rule><Normal Text> Font Two {</Normal Text><br/>
 <Normal Text>	</Normal Text><At Rule>@styleset</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Unknown Property>nice-style</Unknown Property><Normal Text>: </Normal Text><Number>4</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@counter-style</At Rule><Normal Text> thumbs {</Normal Text><br/>
 <Normal Text>	</Normal Text><Unknown Property>system</Unknown Property><Normal Text>: cyclic</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Unknown Property>symbols</Unknown Property><Normal Text>: </Normal Text><String>"</String><SpecialChar>\1F44D</SpecialChar><String>"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Unknown Property>suffix</Unknown Property><Normal Text>: </Normal Text><String>" "</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Open Sans"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@page</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@page</At Rule><Normal Text> </Normal Text><Selector Pseudo>:first</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>marks</Property><Normal Text>: </Normal Text><Value>crop</Value><Normal Text> </Normal Text><Value>cross</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@page</At Rule><Normal Text> </Normal Text><Selector Pseudo>:unknown</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Unknown Property>unknown</Unknown Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Bitstream Vera Serif Bold"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@viewport</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>zoom</Property><Normal Text>: </Normal Text><Number>0.75</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>min-zoom</Property><Normal Text>: </Normal Text><Number>0.5</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>max-zoom</Property><Normal Text>: </Normal Text><Number>0.9</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@viewport</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@document</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"https://www.example.com/"</String><Function>)</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Tag>h1</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@supports</At Rule><Normal Text> (</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>grid</Value><Normal Text>) {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>display</Property><Normal Text>: grid</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"fineprint.css"</String><Function>)</Function><Normal Text> </Normal Text><Value>print</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>fineprint.css</String><Function>)</Function><Normal Text> </Normal Text><Value>print</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>'bluish.css'</String><Function>)</Function><Normal Text> </Normal Text><Value>speech</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'custom.css'</String><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"chrome://communicator/skin/"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"common.css"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>'landscape.css'</String><Function>)</Function><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>:</Normal Text><Value>landscape</Value><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@namespace</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>http://www.w3.org/1999/xhtml</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@namespace</At Rule><Normal Text> svg </Normal Text><Function>url(</Function><String>http://www.w3.org/2000/svg</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> important1 {</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>from</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>50%</Value><Normal Text>  { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> } </Normal Text><Comment>/* ignored */</Comment><br/>
 <Normal Text>	</Normal Text><Value>to</Value><Normal Text>   { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> important2 {</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>from</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>		</Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>to</Value><Normal Text>   { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* ignored */</Comment><br/>
 <Normal Text>		</Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> slidein {</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>from</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>		</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>	</Normal Text><Value>to</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>		</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Normal Text> }</Normal Text><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
diff --git a/autotests/reference/highlight.sass.ref b/autotests/reference/highlight.sass.ref
new file mode 100644
index 0000000..ae45695
--- /dev/null
+++ b/autotests/reference/highlight.sass.ref
@@ -0,0 +1,824 @@
+<Selector Tag>html</Selector Tag><Separator Symbol>,</Separator Symbol><br/>
+<Selector Tag>body</Selector Tag><Separator Symbol>,</Separator Symbol><br/>
+<Selector Tag>ul</Selector Tag><Separator Symbol>,</Separator Symbol><br/>
+<Normal Text>ol</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>margin</Property><Normal Text>:  </Normal Text><Number>0</Number><br/>
+<Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@import</At Rule><Normal Text> reset</Normal Text><br/>
+<Normal Text>body</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
+<Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#efefef</Color><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$font-stack</Variable><Normal Text>:    Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
+<Variable>$primary-color</Variable><Normal Text>: </Normal Text><Color>#333</Color><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>body</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Variable>$font-stack</Variable><br/>
+<Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$primary-color</Variable><br/>
+<Selector Class>.container</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Selector Tag>article</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"main"</String><Selector Attribute>]</Selector Attribute><br/>
+<Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Placeholder Selector>%message-shared</Placeholder Selector><br/>
+<Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Color>#ccc</Color><br/>
+<Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/>
+<Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#333</Color><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.message</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%message-shared</Placeholder Selector><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.success</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%message-shared</Placeholder Selector><br/>
+<Normal Text>  </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Color>green</Color><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>=</At Rule><Function>transform</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>-webkit-transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/>
+<Normal Text>  </Normal Text><Property>-ms-transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/>
+<Normal Text>  </Normal Text><Property>transform</Property><Normal Text>: </Normal Text><Variable>$property</Variable><br/>
+<Selector Class>.box</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>+</At Rule><Function>transform(rotate(</Function><Number>30</Number><Unit>deg</Unit><Function>))</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Comment>// This comment won't be included in the CSS.</Comment><br/>
+<Comment>   This is also commented out.</Comment><br/>
+<Normal Text>  </Normal Text><Selector Id>#a</Selector Id><br/>
+<Comment>/* But this comment will, except in compressed mode.</Comment><br/>
+<Comment></Comment><br/>
+<Comment>/* It can also contain interpolation:</Comment><br/>
+<Comment>   1 + 1 = #{1 + 1}</Comment><br/>
+<Comment>  1 + 1 = #{1 + 1}</Comment><br/>
+<Comment> 1 + 1 = #{1 + 1}</Comment><br/>
+<Selector Id>#a</Selector Id><br/>
+<Normal Text></Normal Text><br/>
+<Comment>// But this comment will, except in compressed mode.</Comment><br/>
+<Comment></Comment><br/>
+<Comment>// It can also contain interpolation:</Comment><br/>
+<Comment>   1 + 1 = #{1 + 1}</Comment><br/>
+<Comment>  1 + 1 = #{1 + 1}</Comment><br/>
+<Comment> 1 + 1 = #{1 + 1}</Comment><br/>
+<Selector Id>#a</Selector Id><br/>
+<Normal Text></Normal Text><br/>
+<Comment>/*! This comment will be included even in compressed mode.</Comment><br/>
+<Comment></Comment><br/>
+<Selector Id>#a</Selector Id><br/>
+<Normal Text></Normal Text><br/>
+<Comment>/**/</Comment><br/>
+<Comment></Comment><br/>
+<Selector Tag>p</Selector Tag><Normal Text> </Normal Text><Selector Class>.sans</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>font</Property><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Comment>/* Inline comments must be closed. */</Comment><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
+<Normal Text></Normal Text><br/>
+<Selector Tag>p</Selector Tag><Normal Text> </Normal Text><Selector Class>.sans</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>font</Property><Comment>/*comment*/</Comment><Normal Text>: Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Comment>/* Inline comments must be closed. */</Comment><Normal Text> </Normal Text><Value>sans-serif</Value><Normal Text> </Normal Text><Comment>// comment</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Comment>/// Computes an exponent.</Comment><br/>
+<Comment>///</Comment><br/>
+<Comment>/// @param {number} $base</Comment><br/>
+<Comment>///   The number to multiply by itself.</Comment><br/>
+<Comment>/// @param {integer (unitless)} $exponent</Comment><br/>
+<Comment>///   The number of `$base`s to multiply together.</Comment><br/>
+<Comment>/// @return {number} `$base` to the power of `$exponent`.</Comment><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>pow</Function><Normal Text>(</Normal Text><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$exponent</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Number>1</Number><br/>
+<Normal Text>  </Normal Text><At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$_</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Variable>$exponent</Variable><br/>
+<Normal Text>    </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Variable>$result</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$base</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$roboto-font-path</Variable><Normal Text>: </Normal Text><String>"../fonts/roboto"</String><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@font-face</At Rule><br/>
+<Normal Text>    </Normal Text><Comment>// This is parsed as a normal function call that takes a quoted string.</Comment><br/>
+<Normal Text>    </Normal Text><Unknown Property>src</Unknown Property><Normal Text>: </Normal Text><Function>url(</Function><String>"</String><Interpolation>#{</Interpolation><Variable>$roboto-font-path</Variable><Interpolation>}</Interpolation><String>/Roboto-Thin.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
+<Normal Text>    </Normal Text><Unknown Property>src</Unknown Property><Normal Text>: </Normal Text><Function>url(</Function><String>$roboto-font-path + "/Roboto-Light.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
+<Normal Text>    </Normal Text><Unknown Property>src</Unknown Property><Normal Text>: </Normal Text><Function>url(</Function><String>#{$roboto-font-path}/Roboto-Regular.woff2</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Roboto"</String><br/>
+<Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Number>100</Number><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.logo</Selector Class><br/>
+<Normal Text>  </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>800</Number><Unit>px</Unit><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><br/>
+<Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
+<Normal Text>  </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$width</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Interpolation>}</Interpolation><Function>)</Function><br/>
+<Normal Text>  </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$padding</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.post</Selector Class><br/>
+<Normal Text>  </Normal Text><Comment>// Since these max() calls don't use any Sass features other than</Comment><br/>
+<Normal Text>  </Normal Text><Comment>// interpolation, they're compiled to CSS max() calls.</Comment><br/>
+<Normal Text>  </Normal Text><Property>padding-left</Property><Normal Text>: </Normal Text><Function>max(</Function><Interpolation>#{</Interpolation><Variable>$padding</Variable><Interpolation>}</Interpolation><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>env(</Function><Normal Text>safe-area-inset-left</Normal Text><Function>))</Function><br/>
+<Normal Text>  </Normal Text><Property>padding-right</Property><Normal Text>: </Normal Text><Function>max(</Function><Interpolation>#{</Interpolation><Variable>$padding</Variable><Interpolation>}</Interpolation><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>env(</Function><Normal Text>safe-area-inset-right</Normal Text><Function>))</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.sidebar</Selector Class><br/>
+<Normal Text>  </Normal Text><Comment>// Since these refer to a Sass variable without interpolation, they call</Comment><br/>
+<Normal Text>  </Normal Text><Comment>// Sass's built-in max() function.</Comment><br/>
+<Normal Text>  </Normal Text><Property>padding-left</Property><Normal Text>: </Normal Text><Function>max(</Function><Variable>$padding</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Function>)</Function><br/>
+<Normal Text>  </Normal Text><Property>padding-right</Property><Normal Text>: </Normal Text><Function>max(</Function><Variable>$padding</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.circle</Selector Class><br/>
+<Normal Text>  </Normal Text><Variable>$size</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
+<Normal Text>  </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
+<Normal Text>  </Normal Text><Property>border-radius</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>prefix</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefixes</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$prefix</Variable><Normal Text> in </Normal Text><Variable>$prefixes</Variable><br/>
+<Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.gray</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>prefix(</Function><Normal Text>filter</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>grayscale(</Function><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>,</Separator Symbol><Normal Text> moz webkit</Normal Text><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.enlarge</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>14</Number><Unit>px</Unit><br/>
+<Normal Text>  </Normal Text><Property>transition</Property><Normal Text>:</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>property</Property><Normal Text>: font-size</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>duration</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>s</Unit><br/>
+<Normal Text>    </Normal Text><Property>delay</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>s</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>36</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.info-page</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Value Keyword>auto</Value Keyword><br/>
+<Normal Text>    </Normal Text><Property>bottom</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/>
+<Normal Text>    </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$rounded-corners</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.button</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Color>black</Color><br/>
+<Normal Text>  </Normal Text><Property>border-radius</Property><Normal Text>: </Normal Text><Function>if(</Function><Variable>$rounded-corners</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$primary</Variable><Normal Text>: </Normal Text><Color>#81899b</Color><br/>
+<Variable>$accent</Variable><Normal Text>: </Normal Text><Color>#ab2e</Color><br/>
+<Variable>$warn</Variable><Normal Text>: </Normal Text><Color>#dfa612aa</Color><br/>
+<Normal Text></Normal Text><br/>
+<Selector Pseudo>:root</Selector Pseudo><br/>
+<Normal Text>  </Normal Text><Variable>--primary</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$primary</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>  </Normal Text><Variable>--accent</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$accent</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>  </Normal Text><Variable>--warn</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$warn</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Comment>// Even though this looks like a Sass variable, it's valid CSS so it's not</Comment><br/>
+<Normal Text>  </Normal Text><Comment>// evaluated.</Comment><br/>
+<Normal Text>  </Normal Text><Variable>--consumed-by-js</Variable><Normal Text>: </Normal Text><Variable>$primary</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$font-family-sans-serif</Variable><Normal Text>: -apple-system</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> BlinkMacSystemFont</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Segoe UI"</String><Separator Symbol>,</Separator Symbol><Normal Text> Roboto</Normal Text><br/>
+<Variable>$font-family-monospace</Variable><Normal Text>: SFMono-Regular</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Menlo</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Monaco</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Consolas</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Pseudo>:root</Selector Pseudo><br/>
+<Normal Text>  </Normal Text><Variable>--font-family-sans-serif</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Function>inspect(</Function><Variable>$font-family-sans-serif</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
+<Normal Text>  </Normal Text><Variable>--font-family-monospace</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Function>inspect(</Function><Variable>$font-family-monospace</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.alert</Selector Class><br/>
+<Normal Text>  </Normal Text><Comment>// The parent selector can be used to add pseudo-classes to the outer</Comment><br/>
+<Normal Text>  </Normal Text><Comment>// selector.</Comment><br/>
+<Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Comment>// It can also be used to style the outer selector in a certain context, such</Comment><br/>
+<Normal Text>  </Normal Text><Comment>// as a body set to use a right-to-left language.</Comment><br/>
+<Normal Text>  </Normal Text><Selector Attribute>[dir</Selector Attribute><Operator>=</Operator><String>rtl</String><Selector Attribute>]</Selector Attribute><Normal Text> </Normal Text><Operator>&</Operator><br/>
+<Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>    </Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Comment>// You can even use it as an argument to pseudo-class selectors.</Comment><br/>
+<Normal Text>  </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Error>&</Error><Selector Pseudo>)</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>opacity</Property><Normal Text>: </Normal Text><Number>0.8</Number><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>unify-parent</Function><Normal Text>(</Normal Text><Variable>$child</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@at-root</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Function>selector-unify(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$child</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
+<Normal Text>    </Normal Text><At Rule>@content</At Rule><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.wrapper</Selector Class><Normal Text> </Normal Text><Selector Class>.field</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>unify-parent(</Function><String>"input"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>app-background</Function><Normal Text>(</Normal Text><Variable>$color</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Function>if(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>'&.app-background'</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>'.app-background'</String><Function>)</Function><Interpolation>}</Interpolation><br/>
+<Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgba(</Function><Color>#fff</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Color>#036</Color><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.sidebar</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>app-background(</Function><Color>#c6538c</Color><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.accordion</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><br/>
+<Normal Text>  </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>rem</Unit><Normal Text> </Normal Text><Value Keyword>auto</Value Keyword><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Operator>&</Operator><Normal Text>__copy</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><br/>
+<Normal Text>    </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1.5</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>2</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1.5</Number><Unit>rem</Unit><br/>
+<Normal Text>    </Normal Text><Property>line-height</Property><Normal Text>: </Normal Text><Number>1.6</Number><br/>
+<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>14</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>    </Normal Text><Operator>&</Operator><Normal Text>--open</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>block</Value><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.alert</Selector Class><Selector Pseudo>:hover</Selector Pseudo><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Placeholder Selector>%strong-alert</Placeholder Selector><br/>
+<Normal Text>  </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/>
+<Normal Text></Normal Text><br/>
+<Placeholder Selector>%strong-alert</Placeholder Selector><Selector Pseudo>:hover</Selector Pseudo><br/>
+<Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><br/>
+<Normal Text></Normal Text><br/>
+<Placeholder Selector>%toolbelt</Placeholder Selector><br/>
+<Normal Text>  </Normal Text><Property>box-sizing</Property><Normal Text>: </Normal Text><Value>border-box</Value><br/>
+<Normal Text>  </Normal Text><Property>border-top</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Color>#000</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>.12</Number><Function>)</Function><Normal Text> </Normal Text><Value>solid</Value><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Color>#000</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>.5</Number><Function>)</Function><Normal Text> </Normal Text><Value>solid</Value><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.action-buttons</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%toolbelt</Placeholder Selector><br/>
+<Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#4285f4</Color><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$border-dark</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Variable>$base-color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.88</Number><Function>)</Function><br/>
+<Variable>$black</Variable><Normal Text>: </Normal Text><Color>#000</Color><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
+<Variable>$border-radius</Variable><Normal Text>: </Normal Text><Number>0.25</Number><Unit>rem</Unit><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
+<Variable>$box-shadow</Variable><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0.5</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1</Number><Unit>rem</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Variable>$black</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.15</Number><Function>)</Function><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
+<Variable>$box-shadow</Variable><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0.5</Number><Unit>rem</Unit><Normal Text> </Normal Text><Number>1</Number><Unit>rem</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Variable>$black</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>blue(</Function><Variable>$black</Variable><Function>))</Function><Normal Text> </Normal Text><Annotation>!default</Annotation><br/>
+<Variable>$border-radius</Variable><Normal Text>: </Normal Text><Number>0.1</Number><Unit>rem</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@import</At Rule><Normal Text> </Normal Text><String>'library'</String><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$global-variable</Variable><Normal Text>: global value</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Comment>// This would fail, because $local-variable isn't in scope:</Comment><br/>
+<Normal Text>  </Normal Text><Comment>// local: $local-variable</Comment><br/>
+<Comment></Comment><br/>
+<Variable>$theme-colors</Variable><Normal Text>: (</Normal Text><String>"success"</String><Normal Text>: </Normal Text><Color>#28a745</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"info"</String><Normal Text>: </Normal Text><Color>#17a2b8</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"warning"</String><Normal Text>: </Normal Text><Color>#ffc107</Color><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.alert</Selector Class><br/>
+<Normal Text>  </Normal Text><Comment>// Instead of $theme-color-#{warning}</Comment><br/>
+<Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>map-get(</Function><Variable>$theme-colors</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"warning"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>corner-icon</Function><Normal Text>(</Normal Text><Variable>$name</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$top-or-bottom</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$left-or-right</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>    </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/icons/</String><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><String>.svg"</String><Function>)</Function><br/>
+<Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
+<Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$left-or-right</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>corner-icon(</Function><String>"mail"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>top</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>right</Value><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>inline-animation</Function><Normal Text>(</Normal Text><Variable>$duration</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$name</Variable><Normal Text>: inline-</Normal Text><Interpolation>#{</Interpolation><Function>unique-id()</Function><Interpolation>}</Interpolation><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@keyframes</At Rule><Normal Text> #{$name}</Normal Text><br/>
+<Normal Text>    </Normal Text><At Rule>@content</At Rule><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Property>animation-name</Property><Normal Text>: </Normal Text><Variable>$name</Variable><br/>
+<Normal Text>  </Normal Text><Property>animation-duration</Property><Normal Text>: </Normal Text><Variable>$duration</Variable><br/>
+<Normal Text>  </Normal Text><Property>animation-iteration-count</Property><Normal Text>: </Normal Text><Value>infinite</Value><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.pulse</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>inline-animation(</Function><Number>2</Number><Unit>s</Unit><Function>)</Function><br/>
+<Normal Text>    from</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>yellow</Color><br/>
+<Normal Text>    to</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>red</Color><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.example</Selector Class><br/>
+<Normal Text>  </Normal Text><Unknown Property>unquoted</Unknown Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><String>"string"</String><Interpolation>}</Interpolation><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Operator>&</Operator><Normal Text> </Normal Text><Operator>&</Operator><br/>
+<Normal Text>    </Normal Text><Property>padding</Property><Normal Text>:</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>bottom</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>      </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text></Normal Text><br/>
+<Comment>// style.sass</Comment><br/>
+<At Rule>@import</At Rule><Normal Text> </Normal Text><String>'foundation/code'</String><Normal Text>, </Normal Text><String>'foundation/lists'</String><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"theme.css"</String><br/>
+<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://fonts.googleapis.com/css?family=Droid+Sans"</String><br/>
+<At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>theme</String><Function>)</Function><br/>
+<At Rule>@import</At Rule><Normal Text> </Normal Text><String>"landscape"</String><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>google-font</Function><Normal Text>(</Normal Text><Variable>$family</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"http://fonts.googleapis.com/css?family=</String><Interpolation>#{</Interpolation><Variable>$family</Variable><Interpolation>}</Interpolation><String>"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>google-font(</Function><String>"Droid Sans"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>horizontal-list</Function><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> reset-list</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  li</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
+<Normal Text>    </Normal Text><Property>margin</Property><Normal Text>:</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>2</Number><Unit>px</Unit><br/>
+<Normal Text>      </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Selector Tag>nav</Selector Tag><Normal Text> ul</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> horizontal-list</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>rtl</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$ltr-value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$rtl-value</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$ltr-value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Selector Attribute>[dir</Selector Attribute><Operator>=</Operator><String>rtl</String><Selector Attribute>]</Selector Attribute><Normal Text> </Normal Text><Operator>&</Operator><br/>
+<Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$rtl-value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.sidebar</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>rtl(</Function><Normal Text>float</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>left</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>right</Value><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>replace-text</Function><Normal Text>(</Normal Text><Variable>$image</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$x</Variable><Error>:</Error><Normal Text> </Normal Text><Error>50%</Error><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Error>:</Error><Normal Text> </Normal Text><Error>50%</Error><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>text-indent</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>99999</Number><Unit>em</Unit><br/>
+<Normal Text>  </Normal Text><Property>overflow</Property><Normal Text>: </Normal Text><Value>hidden</Value><br/>
+<Normal Text>  </Normal Text><Property>text-align</Property><Normal Text>: </Normal Text><Value>left</Value><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Property>background</Property><Normal Text>:</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>image</Property><Normal Text>: </Normal Text><Variable>$image</Variable><br/>
+<Normal Text>    </Normal Text><Property>repeat</Property><Normal Text>: </Normal Text><Value>no-repeat</Value><br/>
+<Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Normal Text> </Normal Text><Variable>$y</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.mail-icon</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>replace-text(url(</Function><String>"/images/mail.svg"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>order(</Function><Number>150</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"input.name"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"input.address"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"input.zip"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors</Function><Normal Text>(</Normal Text><Variable>$args</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// (string: #080, comment: #800, $variable: $60b)</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text> in </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><br/>
+<Normal Text>    </Normal Text><Selector Tag>pre</Selector Tag><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Class>.stx-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$string</Variable><Normal Text>: </Normal Text><Color>#080</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$comment</Variable><Normal Text>: </Normal Text><Color>#800</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$variable</Variable><Normal Text>: </Normal Text><Color>#60b</Color><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>media</Function><Normal Text>(</Normal Text><Variable>$types</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> in </Normal Text><Variable>$types</Variable><br/>
+<Normal Text>    </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$type</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>      </Normal Text><At Rule>@content</At Rule><Normal Text>(</Normal Text><Variable>$type</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>media(</Function><Normal Text>screen</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> print</Normal Text><Function>)</Function><Normal Text> using (</Normal Text><Variable>$type</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  h1</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><br/>
+<Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> print</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>font-family</Property><Normal Text>: Calluna</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>=</At Rule><Function>reset-list</Function><br/>
+<Normal Text>  </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>  </Normal Text><Property>list-style</Property><Normal Text>: </Normal Text><Value>none</Value><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>=</At Rule><Function>horizontal-list</Function><br/>
+<Normal Text>  </Normal Text><At Rule>+</At Rule><Normal Text>reset-list</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  li</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
+<Normal Text>    </Normal Text><Property>margin</Property><Normal Text>:</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Operator>-</Operator><Number>2</Number><Unit>px</Unit><br/>
+<Normal Text>      </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Selector Tag>nav</Selector Tag><Normal Text> ul</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>+</At Rule><Normal Text>horizontal-list</Normal Text><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>pow</Function><Normal Text>(</Normal Text><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$exponent</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Number>1</Number><br/>
+<Normal Text>  </Normal Text><At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$_</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Variable>$exponent</Variable><br/>
+<Normal Text>    </Normal Text><Variable>$result</Variable><Normal Text>: </Normal Text><Variable>$result</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$base</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.sidebar</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><br/>
+<Normal Text>  </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Function>pow(</Function><Number>4</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Function>)</Function><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>sum</Function><Normal Text>(</Normal Text><Variable>$numbers</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$sum</Variable><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$number</Variable><Normal Text> in </Normal Text><Variable>$numbers</Variable><br/>
+<Normal Text>    </Normal Text><Variable>$sum</Variable><Normal Text>: </Normal Text><Variable>$sum</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$number</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$sum</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.micro</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>sum(</Function><Number>50</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>100</Number><Unit>px</Unit><Function>)</Function><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>str-insert</Function><Normal Text>(</Normal Text><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$insert</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$index</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Comment>// Avoid making new strings if we don't need to.</Comment><br/>
+<Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>str-length(</Function><Variable>$string</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Number>0</Number><br/>
+<Normal Text>    </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$insert</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$before</Variable><Normal Text>: </Normal Text><Function>str-slice(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$index</Variable><Function>)</Function><br/>
+<Normal Text>  </Normal Text><Variable>$after</Variable><Normal Text>: </Normal Text><Function>str-slice(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$index</Variable><Function>)</Function><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$before</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$insert</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$after</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.error</Selector Class><br/>
+<Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Color>#f00</Color><br/>
+<Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Operator>&</Operator><Normal Text>--serious</Normal Text><br/>
+<Normal Text>    </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.error</Selector Class><br/>
+<Normal Text>    </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>reflexive-position</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$property</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Operator>=</Operator><Normal Text> </Normal Text><Value>left</Value><Normal Text> </Normal Text><Operator>and</Operator><Normal Text> </Normal Text><Variable>$property</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Operator>=</Operator><Normal Text> </Normal Text><Value>right</Value><br/>
+<Normal Text>    </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"Property </String><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><String> must be either left or right."</String><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$left-value</Variable><Normal Text>: </Normal Text><Function>if(</Function><Variable>$property</Variable><Normal Text> == </Normal Text><Value>right</Value><Separator Symbol>,</Separator Symbol><Normal Text> initial</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Function>)</Function><br/>
+<Normal Text>  </Normal Text><Variable>$right-value</Variable><Normal Text>: </Normal Text><Function>if(</Function><Variable>$property</Variable><Normal Text> == </Normal Text><Value>right</Value><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> initial</Normal Text><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$left-value</Variable><br/>
+<Normal Text>  </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Variable>$right-value</Variable><br/>
+<Normal Text>  </Normal Text><Selector Attribute>[dir</Selector Attribute><Operator>=</Operator><String>rtl</String><Selector Attribute>]</Selector Attribute><Normal Text> </Normal Text><Operator>&</Operator><br/>
+<Normal Text>    </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$right-value</Variable><br/>
+<Normal Text>    </Normal Text><Property>right</Property><Normal Text>: </Normal Text><Variable>$left-value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$known-prefixes</Variable><Normal Text>: webkit</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> moz</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> ms</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> o</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>prefix</Function><Normal Text>(</Normal Text><Variable>$property</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefixes</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$prefix</Variable><Normal Text> in </Normal Text><Variable>$prefixes</Variable><br/>
+<Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Operator>not</Operator><Normal Text> </Normal Text><Function>index(</Function><Variable>$known-prefixes</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefix</Variable><Function>)</Function><br/>
+<Normal Text>      </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Unknown prefix </String><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><String>."</String><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.tilt</Selector Class><br/>
+<Normal Text>  </Normal Text><Comment>// Oops, we typo'd "webkit" as "wekbit"!</Comment><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>prefix(</Function><Normal Text>transform</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>rotate(</Function><Number>15</Number><Unit>deg</Unit><Function>)</Function><Separator Symbol>,</Separator Symbol><Normal Text> wekbit ms</Normal Text><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>inset-divider-offset</Function><Normal Text>(</Normal Text><Variable>$offset</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$padding</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$divider-offset</Variable><Normal Text>: (</Normal Text><Number>2</Number><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$padding</Variable><Normal Text>) </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$offset</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"divider offset: </String><Interpolation>#{</Interpolation><Variable>$divider-offset</Variable><Interpolation>}</Interpolation><String>"</String><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Variable>$divider-offset</Variable><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>100</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$divider-offset</Variable><Interpolation>}</Interpolation><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>unify-parent</Function><Normal Text>(</Normal Text><Variable>$child</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@at-root</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Function>selector-unify(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$child</Variable><Function>)</Function><Interpolation>}</Interpolation><br/>
+<Normal Text>    </Normal Text><At Rule>@content</At Rule><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.square-av</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>avatar(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$circle</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><Function>)</Function><br/>
+<Selector Class>.circle-av</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>avatar(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$circle</Variable><Normal Text>: </Normal Text><Value Keyword>true</Value Keyword><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>theme-colors</Function><Normal Text>(</Normal Text><Variable>$light-theme</Variable><Error>:</Error><Normal Text> </Normal Text><Error>true</Error><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$light-theme</Variable><br/>
+<Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$light-background</Variable><br/>
+<Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$light-text</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@else</At Rule><br/>
+<Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$dark-background</Variable><br/>
+<Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$dark-text</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.banner</Selector Class><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>theme-colors(</Function><Variable>$light-theme</Variable><Normal Text>: </Normal Text><Value Keyword>true</Value Keyword><Function>)</Function><br/>
+<Normal Text>  </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.dark</Selector Class><Normal Text> </Normal Text><Operator>&</Operator><br/>
+<Normal Text>    </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>theme-colors(</Function><Variable>$light-theme</Variable><Normal Text>: </Normal Text><Value Keyword>false</Value Keyword><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>triangle</Function><Normal Text>(</Normal Text><Variable>$size</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Value>transparent</Value><br/>
+<Normal Text>  </Normal Text><Property>border-style</Property><Normal Text>: </Normal Text><Value>solid</Value><br/>
+<Normal Text>  </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> up</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>border-bottom-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Value>right</Value><br/>
+<Normal Text>    </Normal Text><Property>border-left-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> down</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>border-top-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$direction</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Value>left</Value><br/>
+<Normal Text>    </Normal Text><Property>border-right-color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@else</At Rule><br/>
+<Normal Text>    </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"Unknown direction </String><Interpolation>#{</Interpolation><Variable>$direction</Variable><Interpolation>}</Interpolation><String>."</String><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$size</Variable><Normal Text> in </Normal Text><Variable>$sizes</Variable><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$size</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
+<Normal Text>    </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
+<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$icons</Variable><Normal Text>: (</Normal Text><String>"eye"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f112</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"start"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12e</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"stop"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12f</SpecialChar><String>"</String><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$glyph</Variable><Normal Text> in </Normal Text><Variable>$icons</Variable><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
+<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/>
+<Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$icons</Variable><Normal Text>: </Normal Text><String>"eye"</String><Normal Text> </Normal Text><String>"</String><SpecialChar>\f112</SpecialChar><String>"</String><Normal Text> </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"start"</String><Normal Text> </Normal Text><String>"</String><SpecialChar>\f12e</SpecialChar><String>"</String><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"stop"</String><Normal Text> </Normal Text><String>"</String><SpecialChar>\f12f</SpecialChar><String>"</String><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$glyph</Variable><Normal Text>, </Normal Text><Variable>$size</Variable><Normal Text> in </Normal Text><Variable>$icons</Variable><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
+<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/>
+<Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/>
+<Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Number>3</Number><br/>
+<Normal Text>  </Normal Text><Selector Tag>ul</Selector Tag><Selector Pseudo>:nth-child(3n + #{$i})</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>lighten(</Function><Variable>$base-color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>5</Number><Unit>%</Unit><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Comment>/// Divides `$value` by `$ratio` until it's below `$base`.</Comment><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>scale-below</Function><Normal Text>(</Normal Text><Variable>$value</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$base</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$ratio</Variable><Error>:</Error><Normal Text> </Normal Text><Error>1.618</Error><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$value</Variable><Normal Text> > </Normal Text><Variable>$base</Variable><br/>
+<Normal Text>    </Normal Text><Variable>$value</Variable><Normal Text>: </Normal Text><Variable>$value</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Variable>$ratio</Variable><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$value</Variable><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@namespace</At Rule><Normal Text> svg </Normal Text><Function>url(</Function><String>http://www.w3.org/2000/svg</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@font-face</At Rule><br/>
+<Normal Text>  </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Open Sans"</String><br/>
+<Normal Text>  </Normal Text><Unknown Property>src</Unknown Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@counter-style</At Rule><Normal Text> thumbs</Normal Text><br/>
+<Normal Text>  </Normal Text><Unknown Property>system</Unknown Property><Normal Text>: cyclic</Normal Text><br/>
+<Normal Text>  </Normal Text><Unknown Property>symbols</Unknown Property><Normal Text>: </Normal Text><String>"</String><SpecialChar>\1F44D</SpecialChar><String>"</String><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>sticky-position</Function><br/>
+<Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>fixed</Value><br/>
+<Normal Text>  </Normal Text><At Rule>@supports</At Rule><Normal Text> (</Normal Text><Property>position</Property><Normal Text>: sticky)</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>position</Property><Normal Text>: sticky</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>hover</Property><Normal Text>: </Normal Text><Value>hover</Value><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Selector Class>.button</Selector Class><Selector Pseudo>:hover</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Color>black</Color><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>    </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Value>color</Value><Normal Text>)</Normal Text><br/>
+<Normal Text>      </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Color>#036</Color><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@keyframes</At Rule><Normal Text> slide-in</Normal Text><br/>
+<Normal Text>  from</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/>
+<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  70%</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>90</Number><Unit>%</Unit><br/>
+<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>%</Unit><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  to</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><br/>
+<Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>100</Number><Normal Text>  </Normal Text><Comment>// 100</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.8</Number><Normal Text>  </Normal Text><Comment>// 0.8</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 16px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 10px*px (read "square pixels")</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5.2e3</Number><Normal Text>  </Normal Text><Comment>// 5200</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>6e-2</Number><Normal Text>  </Normal Text><Comment>// 0.06</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>4</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>6</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 24px*px (read "square pixels")</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// 2.5px/s (read "pixels per second")</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>deg</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>24</Number><Unit>em</Unit><Normal Text>  </Normal Text><Comment>// 3.125px*deg/s*em</Comment><br/>
+<Comment>//                                 (read "pixel-degrees per second-em")</Comment><br/>
+<Comment></Comment><br/>
+<Variable>$degrees-per-second</Variable><Normal Text>: </Normal Text><Number>20</Number><Unit>deg</Unit><Operator>/</Operator><Number>1</Number><Unit>s</Unit><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 20deg/s</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 0.05s/deg</Comment><br/>
+<Variable>$transition-speed</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>s</Unit><Operator>/</Operator><Number>50</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>unquote(</Function><String>".widget:hover"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// .widget:hover</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>quote(</Function><Value>bold</Value><Function>)</Function><Normal Text>  </Normal Text><Comment>// "bold"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.012345678912345</Number><Normal Text>  </Normal Text><Comment>// 0.0123456789</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.01234567891</Number><Normal Text> == </Normal Text><Number>0.01234567899</Number><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1.00000000009</Number><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>0.99999999991</Number><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\"</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// '"'</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> \.widget  </Normal Text><Comment>// \.widget</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\a</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// "\a" (a string containing only a newline)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"line1</String><SpecialChar>\a</SpecialChar><String> line2"</String><Normal Text>  </Normal Text><Comment>// "line1\a line2" (foo and bar are separated by a newline)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Nat + Liz </String><SpecialChar>\1F46D</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// "Nat + Liz 👭"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica Neue"</String><Normal Text>  </Normal Text><Comment>// "Helvetica Neue"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"C:</String><SpecialChar>\\</SpecialChar><String>Program Files"</String><Normal Text>  </Normal Text><Comment>// "C:\\Program Files"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"</String><SpecialChar>\"</SpecialChar><String>Don't Fear the Reaper</String><SpecialChar>\"</SpecialChar><String>"</String><Normal Text>  </Normal Text><Comment>// "\"Don't Fear the Reaper\""</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"line1</String><SpecialChar>\a</SpecialChar><String> line2"</String><Normal Text>  </Normal Text><Comment>// "line1\a line2"</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$roboto-variant</Variable><Normal Text>: </Normal Text><String>"Mono"</String><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Roboto </String><Interpolation>#{</Interpolation><Variable>$roboto-variant</Variable><Interpolation>}</Interpolation><String>"</String><Normal Text>  </Normal Text><Comment>// "Roboto Mono"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value>bold</Value><Normal Text>  </Normal Text><Comment>// bold</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> -webkit-flex  </Normal Text><Comment>// -webkit-flex</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>--</Operator><Number>123</Number><Normal Text>  </Normal Text><Comment>// --123</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$prefix</Variable><Normal Text>: ms</Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>-</Operator><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-flex  </Normal Text><Comment>// -ms-flex</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> \1F46D  </Normal Text><Comment>// 👭</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> \21  </Normal Text><Comment>// \!</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> \7Fx  </Normal Text><Comment>// \7f x</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-length(</Function><Normal Text>\7Fx</Normal Text><Function>)</Function><Normal Text>  </Normal Text><Comment>// 5</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Neue"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 11</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-slice(</Function><String>"Roboto Mono"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Operator>-</Operator><Number>4</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// "Mono"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>#f2ece4</Color><Normal Text> </Normal Text><Comment>// #f2ece4</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>#b37399aa</Color><Normal Text> </Normal Text><Comment>// rgba(179, 115, 153, 67%)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Color>midnightblue</Color><Normal Text> </Normal Text><Comment>// #191970</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>rgb(</Function><Number>204</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>102</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>153</Number><Function>)</Function><Normal Text> </Normal Text><Comment>// #c69</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>rgba(</Function><Number>107</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>113</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>127</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.8</Number><Function>)</Function><Normal Text> </Normal Text><Comment>// rgba(107, 113, 127, 0.8)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>hsl(</Function><Number>228</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>7</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>86</Number><Unit>%</Unit><Function>)</Function><Normal Text> </Normal Text><Comment>// #dadbdf</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>hsla(</Function><Number>20</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>85</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.7</Number><Function>)</Function><Normal Text> </Normal Text><Comment>// rgb(225, 215, 210, 0.7)</Comment><br/>
+<Variable>$venus</Variable><Normal Text>: </Normal Text><Color>#998099</Color><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>scale-color(</Function><Variable>$venus</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$lightness</Variable><Normal Text>: </Normal Text><Operator>+</Operator><Number>15</Number><Unit>%</Unit><Function>)</Function><Normal Text> </Normal Text><Comment>// #a893a8</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>mix(</Function><Variable>$venus</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>midnightblue</Color><Function>)</Function><Normal Text> </Normal Text><Comment>// #594d85</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>nth(</Function><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>12</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>16</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>2</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// 12px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>nth(</Function><Normal Text>[line1</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> line2</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> line3]</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Operator>-</Operator><Number>1</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// line3</Comment><br/>
+<Variable>$prefixes-by-browser</Variable><Normal Text>: (</Normal Text><String>"firefox"</String><Normal Text>: moz</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"safari"</String><Normal Text>: webkit</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"ie"</String><Normal Text>: ms)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>prefixes-for-browsers</Function><Normal Text>(</Normal Text><Variable>$browsers</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$prefixes</Variable><Normal Text>: ()</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$browser</Variable><Normal Text> in </Normal Text><Variable>$browsers</Variable><br/>
+<Normal Text>    </Normal Text><Variable>$prefixes</Variable><Normal Text>: </Normal Text><Function>append(</Function><Variable>$prefixes</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$prefixes-by-browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$browser</Variable><Function>))</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$prefixes</Variable><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>prefixes-for-browsers(</Function><String>"firefox"</String><Normal Text> </Normal Text><String>"ie"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// moz ms</Comment><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors</Function><Normal Text>(</Normal Text><Variable>$args</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// (string: #080, comment: #800, $variable: $60b)</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text> in </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><br/>
+<Normal Text>    </Normal Text><Selector Tag>pre</Selector Tag><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Class>.stx-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$string</Variable><Normal Text>: </Normal Text><Color>#080</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$comment</Variable><Normal Text>: </Normal Text><Color>#800</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$variable</Variable><Normal Text>: </Normal Text><Color>#60b</Color><Function>)</Function><Normal Text>;</Normal Text><br/>
+<Variable>$font-weights</Variable><Normal Text>: (</Normal Text><String>"regular"</String><Normal Text>: </Normal Text><Number>400</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"medium"</String><Normal Text>: </Normal Text><Number>500</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"bold"</String><Normal Text>: </Normal Text><Number>700</Number><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$font-weights</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"medium"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 500</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$font-weights</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"extra-bold"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// null</Comment><br/>
+<Variable>$icons</Variable><Normal Text>: (</Normal Text><String>"eye"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f112</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"start"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12e</SpecialChar><String>"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"stop"</String><Normal Text>: </Normal Text><String>"</String><SpecialChar>\f12f</SpecialChar><String>"</String><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$glyph</Variable><Normal Text> in </Normal Text><Variable>$icons</Variable><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><br/>
+<Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><br/>
+<Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Icon Font"</String><br/>
+<Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$glyph</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$prefixes-by-browser</Variable><Normal Text>: (</Normal Text><String>"firefox"</String><Normal Text>: moz</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"safari"</String><Normal Text>: webkit</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"ie"</String><Normal Text>: ms)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>add-browser-prefix</Function><Normal Text>(</Normal Text><Variable>$browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$prefix</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$prefixes-by-browser</Variable><Normal Text>: </Normal Text><Function>map-merge(</Function><Variable>$prefixes-by-browser</Variable><Separator Symbol>,</Separator Symbol><Normal Text> (</Normal Text><Variable>$browser</Variable><Normal Text>: </Normal Text><Variable>$prefix</Variable><Function>)</Function><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>add-browser-prefix(</Function><String>"opera"</String><Separator Symbol>,</Separator Symbol><Normal Text> o</Normal Text><Function>)</Function><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$prefixes-by-browser</Variable><br/>
+<Comment>// ("firefox": moz, "safari": webkit, "ie": ms, "opera": o)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> < </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Unit>in</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Roboto"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// null</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-get(</Function><Normal Text>(</Normal Text><String>"large"</String><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Function>)</Function><Normal Text>, </Normal Text><String>"small"</String><Normal Text>)  </Normal Text><Comment>// null</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>&</Operator><Normal Text>  </Normal Text><Comment>// null</Comment><br/>
+<Variable>$fonts</Variable><Normal Text>: (</Normal Text><String>"serif"</String><Normal Text>: </Normal Text><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"monospace"</String><Normal Text>: </Normal Text><String>"Consolas"</String><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>h3</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>18</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Function>map-get(</Function><Variable>$fonts</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"sans"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$fonts</Variable><Normal Text>: (</Normal Text><String>"serif"</String><Normal Text>: </Normal Text><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"monospace"</String><Normal Text>: </Normal Text><String>"Consolas"</String><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>h3</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>font</Property><Normal Text>:</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>18</Number><Unit>px</Unit><br/>
+<Normal Text>    </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><br/>
+<Normal Text>    </Normal Text><Property>family</Property><Normal Text>: </Normal Text><Function>map-get(</Function><Variable>$fonts</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"sans"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Selector Tag>copy</Selector Tag><Normal Text> </Normal Text><Selector Tag>of</Selector Tag><Normal Text> $</Normal Text><Selector Tag>list</Selector Tag><Normal Text> </Normal Text><Selector Tag>with</Selector Tag><Normal Text> </Normal Text><Selector Tag>all</Selector Tag><Normal Text> </Normal Text><Selector Tag>elements</Selector Tag><Normal Text> </Normal Text><Selector Tag>for</Selector Tag><Normal Text> </Normal Text><Selector Tag>which</Selector Tag><Normal Text> $</Normal Text><Selector Tag>condition</Selector Tag><Normal Text> </Normal Text><Selector Tag>returns</Selector Tag><Normal Text> `true`</Normal Text><br/>
+<Comment>/// removed.</Comment><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>remove-where</Function><Normal Text>(</Normal Text><Variable>$list</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$condition</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$new-list</Variable><Normal Text>: ()</Normal Text><br/>
+<Normal Text>  </Normal Text><Variable>$separator</Variable><Normal Text>: </Normal Text><Function>list-separator(</Function><Variable>$list</Variable><Function>)</Function><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$element</Variable><Normal Text> in </Normal Text><Variable>$list</Variable><br/>
+<Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Operator>not</Operator><Normal Text> </Normal Text><Function>call(</Function><Variable>$condition</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$element</Variable><Function>)</Function><br/>
+<Normal Text>      </Normal Text><Variable>$new-list</Variable><Normal Text>: </Normal Text><Function>append(</Function><Variable>$new-list</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$element</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$separator</Variable><Normal Text>: </Normal Text><Variable>$separator</Variable><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$new-list</Variable><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$fonts</Variable><Normal Text>: Tahoma</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Geneva</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Arial</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>content</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@function</At Rule><Normal Text> </Normal Text><Function>contains-helvetica</Function><Normal Text>(</Normal Text><Variable>$string</Variable><Normal Text>)</Normal Text><br/>
+<Normal Text>    </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><Variable>$string</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica"</String><Function>)</Function><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><Function>remove-where(</Function><Variable>$fonts</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>get-function(</Function><String>"contains-helvetica"</String><Function>))</Function><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Number>1</Number><Unit>em</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>96</Number><Unit>px</Unit><Normal Text> == </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> == Helvetica  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><String>"Arial"</String><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>hsl(</Function><Number>34</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>35</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>92.1</Number><Unit>%</Unit><Function>)</Function><Normal Text> == </Normal Text><Color>#f2ece4</Color><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>rgba(</Function><Number>179</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>115</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>153</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Function>rgba(</Function><Number>179</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>115</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>153</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.8</Number><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) == (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) </Normal Text><Annotation>!</Annotation><Normal Text>= (</Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>14</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) </Normal Text><Annotation>!</Annotation><Normal Text>= (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text>, </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text>, </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>) </Normal Text><Annotation>!</Annotation><Normal Text>= [</Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>7</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>]  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$theme</Variable><Normal Text>: (</Normal Text><String>"venus"</String><Normal Text>: </Normal Text><Color>#998099</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"nebula"</String><Normal Text>: </Normal Text><Color>#d2e1dd</Color><Normal Text>)</Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$theme</Variable><Normal Text> == (</Normal Text><String>"venus"</String><Normal Text>: </Normal Text><Color>#998099</Color><Normal Text>, </Normal Text><String>"nebula"</String><Normal Text>: </Normal Text><Color>#d2e1dd</Color><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$theme</Variable><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= (</Normal Text><String>"venus"</String><Normal Text>: </Normal Text><Color>#998099</Color><Normal Text>, </Normal Text><String>"iron"</String><Normal Text>: </Normal Text><Color>#dadbdf</Color><Normal Text>)  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> == </Normal Text><Value Keyword>true</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>get-function(</Function><String>"rgba"</String><Function>)</Function><Normal Text> == </Normal Text><Function>get-function(</Function><String>"rgba"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>get-function(</Function><String>"rgba"</String><Function>)</Function><Normal Text> </Normal Text><Annotation>!</Annotation><Normal Text>= </Normal Text><Function>get-function(</Function><String>"hsla"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>s</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>15</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// 25s</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 0.8958333333in</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 15px*px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>12</Number><Unit>px</Unit><Operator>/</Operator><Number>4</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// 3</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text> </Normal Text><Operator>%</Operator><Normal Text> </Normal Text><Number>9</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 0.0625in</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 15px/30px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text>) </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 0.5</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$result</Variable><Normal Text>: </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$result</Variable><Normal Text>  </Normal Text><Comment>// 0.5</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@function</At Rule><Normal Text> </Normal Text><Function>fifteen-divided-by-thirty</Function><Normal Text>()</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>fifteen-divided-by-thirty()</Function><Normal Text>  </Normal Text><Comment>// 0.5</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Number>15</Number><Unit>px</Unit><Operator>/</Operator><Number>30</Number><Unit>px</Unit><Normal Text>)  </Normal Text><Comment>// 0.5</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> (</Normal Text><Value>bold</Value><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Operator>/</Operator><Number>30</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>sans-serif</Value><Normal Text>)  </Normal Text><Comment>// bold 15px/30px sans-serif</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Operator>/</Operator><Number>30</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text>  </Normal Text><Comment>// 1.5</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>4</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>6</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 24px*px (read "square pixels")</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// 2.5px/s (read "pixels per second")</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>deg</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Unit>s</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>24</Number><Unit>em</Unit><Normal Text>  </Normal Text><Comment>// 3.125px*deg/s*em</Comment><br/>
+<Comment>//                                 (read "pixel-degrees per second-em")</Comment><br/>
+<Comment></Comment><br/>
+<Variable>$degrees-per-second</Variable><Normal Text>: </Normal Text><Number>20</Number><Unit>deg</Unit><Operator>/</Operator><Number>1</Number><Unit>s</Unit><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 20deg/s</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Variable>$degrees-per-second</Variable><Normal Text>  </Normal Text><Comment>// 0.05s/deg</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>100</Number><Normal Text> > </Normal Text><Number>50</Number><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Normal Text> < </Normal Text><Number>17</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>96</Number><Unit>px</Unit><Normal Text> >= </Normal Text><Number>1</Number><Unit>in</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>1000</Number><Unit>ms</Unit><Normal Text> <= </Normal Text><Number>1</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Helvetica"</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>" Neue"</String><Normal Text>  </Normal Text><Comment>// "Helvetica Neue"</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> sans- </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Value>serif</Value><Normal Text>  </Normal Text><Comment>// sans-serif</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>5</Number><Unit>px</Unit><Interpolation>}</Interpolation><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// 15px/30px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> sans </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Value>serif</Value><Normal Text>  </Normal Text><Comment>// sans-serif</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><String>"Elapsed time: "</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>s</Unit><Normal Text>  </Normal Text><Comment>// "Elapsed time: 10s";</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>" is a boolean value"</String><Normal Text>  </Normal Text><Comment>// "true is a boolean value";</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>15</Number><Unit>px</Unit><Normal Text>  </Normal Text><Comment>// /15px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> moz  </Normal Text><Comment>// -moz</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Keyword>not</Keyword><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Keyword>not</Keyword><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>true</Value Keyword><Normal Text> </Normal Text><Operator>or</Operator><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text> </Normal Text><Operator>or</Operator><Normal Text> </Normal Text><Value Keyword>false</Value Keyword><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>var(</Function><Variable>--main-bg-color</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// var(--main-bg-color)</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$primary</Variable><Normal Text>: </Normal Text><Color>#f2ece4</Color><br/>
+<Variable>$accent</Variable><Normal Text>: </Normal Text><Color>#e1d7d2</Color><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>radial-gradient(</Function><Variable>$primary</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$accent</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// radial-gradient(#f2ece4, #e1d7d2)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Helvetica"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 1</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>str-index(</Function><String>"Helvetica Neue"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Neue"</String><Function>)</Function><Normal Text>  </Normal Text><Comment>// 11</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>2</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>100</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Unit>em</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// false</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>comparable(</Function><Number>10</Number><Unit>cm</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>3</Number><Unit>mm</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// true</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// 10px 20px 30px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Normal Text>(</Normal Text><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>red</Color><Function>)</Function><Normal Text>, </Normal Text><Color>green</Color><Normal Text>)  </Normal Text><Comment>// blue, red, green</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Number>10</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>30</Number><Unit>px</Unit><Normal Text> </Normal Text><Number>40</Number><Unit>px</Unit><Function>)</Function><Normal Text>  </Normal Text><Comment>// 10px 20px (30px 40px)</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Number>10</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$separator</Variable><Normal Text>: comma</Normal Text><Function>)</Function><Normal Text>  </Normal Text><Comment>// 10px, 20px</Comment><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>append(</Function><Normal Text>(</Normal Text><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>red</Color><Function>)</Function><Normal Text>, </Normal Text><Color>green</Color><Normal Text>, </Normal Text><Variable>$separator</Variable><Normal Text>: space)  </Normal Text><Comment>// blue red green</Comment><br/>
+<At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>syntax-colors</Function><Normal Text>(</Normal Text><Variable>$args</Variable><Operator>...</Operator><Normal Text>)</Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// (string: #080, comment: #800, $variable: $60b)</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Normal Text>  </Normal Text><At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$name</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text> in </Normal Text><Function>keywords(</Function><Variable>$args</Variable><Function>)</Function><br/>
+<Normal Text>    </Normal Text><Selector Tag>pre</Selector Tag><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Class>.stx-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@include</At Rule><Normal Text> </Normal Text><Function>syntax-colors(</Function><Variable>$string</Variable><Normal Text>: </Normal Text><Color>#080</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$comment</Variable><Normal Text>: </Normal Text><Color>#800</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$variable</Variable><Normal Text>: </Normal Text><Color>#60b</Color><Function>)</Function><Normal Text>;</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<Variable>$font-weights</Variable><Normal Text>: (</Normal Text><String>"regular"</String><Normal Text>: </Normal Text><Number>400</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"medium"</String><Normal Text>: </Normal Text><Number>500</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"bold"</String><Normal Text>: </Normal Text><Number>700</Number><Normal Text>)</Normal Text><br/>
+<Normal Text></Normal Text><br/>
+<At Rule>@debug</At Rule><Normal Text> </Normal Text><Function>map-values(</Function><Variable>$font-weights</Variable><Function>)</Function><Normal Text>  </Normal Text><Comment>// 400, 500, 700</Comment><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
+<Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>  -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><br/>
+<Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><br/>
+<Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><br/>
+<Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>-image: </Normal Text><Variable>$value</Variable><br/>
diff --git a/autotests/reference/highlight.scss.ref b/autotests/reference/highlight.scss.ref
index ce0cd66..79ec820 100644
--- a/autotests/reference/highlight.scss.ref
+++ b/autotests/reference/highlight.scss.ref
@@ -1,709 +1,719 @@
 <Comment>/**</Comment><br/>
 <Comment> * This is a pseudo SCSS file to test Kate's SCSS syntax highlighting.</Comment><br/>
 <Comment> */</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"othersheet.css"</String><Function>)</Function><Normal Text> </Normal Text><Value>screen</Value><Normal Text>, tv</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>body</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>15</Number><Unit>pt</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: Verdana</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> Helvetica</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Bitstream Vera Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text>			</Normal Text><Comment>/* yet another comment */</Comment><br/>
 <Normal Text>	</Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.something</Selector Class><br/>
 <Normal Text>{</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin-right</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#cdd</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#AAFE04</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgb(</Function><Number>10</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Number>30</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Number>43</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>maroon</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#header</Selector Id><Separator Symbol>,</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Selector Class>.intro</Selector Class><Selector Pseudo>:first-letter</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:lang(nl)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Tag>img</Selector Tag><Selector Attribute>[align</Selector Attribute><Operator>=</Operator><String>"right"</String><Selector Attribute>]</Selector Attribute><br/>
 <Normal Text>{</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> Qt::</Normal Text><Color>red</Color><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>-moz-border-radius</Property><Normal Text>: </Normal Text><Number>15</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* unknown properties render italic */</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Id>#header</Selector Id><br/>
 <Normal Text>	{</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/*</Comment><br/>
 <Alert Level 2>TODO</Alert Level 2><Comment>: add more tests, e.g. media</Comment><br/>
 <Comment>*/</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.nice-look</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-variant-alternates</Property><Normal Text>: </Normal Text><Function>styleset(</Function><Normal Text>nice-style</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>ul</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>list-style</Property><Normal Text>: thumbs</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* SVG <a> */</Comment><br/>
 <Selector Tag>svg</Selector Tag><Operator>|</Operator><Selector Tag>a</Selector Tag><Normal Text> {}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* XHTML and SVG <a> */</Comment><br/>
 <Operator>*|</Operator><Selector Tag>a</Selector Tag><Normal Text> {}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Operator>*</Operator><Normal Text>{}</Normal Text><br/>
 <Selector Class>.class</Selector Class><Normal Text>{}</Normal Text><br/>
 <Selector Id>#id</Selector Id><Normal Text>{}</Normal Text><br/>
 <Selector Pseudo>:hover</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Pseudo>:lang(fr)</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Operator>></Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>></Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Operator>~</Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>~</Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:first-child</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:visited</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>::after</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:lang(c)</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Pseudo>:lang(fr-ca)</Selector Pseudo><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Operator>+</Operator><Selector Tag>F</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>=</Operator><String>warning</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>~=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>^=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>$=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[foo</Selector Attribute><Operator>*=</Operator><String>"warning"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Attribute>[lang</Selector Attribute><Operator>|=</Operator><String>"en"</String><Selector Attribute>]</Selector Attribute><Normal Text>{}</Normal Text><br/>
 <Selector Tag>DIV</Selector Tag><Selector Class>.warning</Selector Class><Normal Text>{}</Normal Text><br/>
 <Selector Tag>DIV</Selector Tag><Normal Text> </Normal Text><Selector Class>.warning</Selector Class><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Selector Id>#myid</Selector Id><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Selector Id>#myid</Selector Id><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Separator Symbol>,</Separator Symbol><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Separator Symbol>,</Separator Symbol><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Selector Tag>E</Selector Tag><Normal Text> </Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>E</Selector Tag><Normal Text>{}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:nth-child(2)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* Elements that are not <div> or <span> elements */</Comment><br/>
 <Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Selector Tag>div</Selector Tag><Selector Pseudo>):not(</Selector Pseudo><Selector Tag>span</Selector Tag><Selector Pseudo>)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* Elements that are not `.crazy` or `.fancy` */</Comment><br/>
 <Comment>/* Note that this syntax is not well supported yet. */</Comment><br/>
 <Selector Tag>body</Selector Tag><Normal Text> </Normal Text><Selector Pseudo>:not(</Selector Pseudo><Selector Class>.crazy</Selector Class><Error>,</Error><Normal Text> </Normal Text><Selector Class>.fancy</Selector Class><Selector Pseudo>)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:nth-child(odd)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(even)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(4)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(4n)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(3n+4)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(-n+3)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Pseudo>:nth-child(n+8):nth-child(-n+15)</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.first</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-child(2n+1)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Class>.second</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-child(2n+1)</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Class>.third</Selector Class><Normal Text> </Normal Text><Selector Tag>span</Selector Tag><Selector Pseudo>:nth-of-type(2n+1)</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Unknown Property>unknown-property</Unknown Property><Normal Text>: </Normal Text><Color>lime</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:root</Selector Pseudo><Normal Text>{</Normal Text><br/>
-<Normal Text>	</Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Function>if(</Function><Normal Text>x > </Normal Text><Number>5</Number><Function>)</Function><Normal Text> this</Normal Text><Number>.</Number><Normal Text>width = </Normal Text><Number>10</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* valid custom property, invalid in any normal property */</Comment><br/>
+<Normal Text>	</Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Function>if(</Function><Normal Text>x > </Normal Text><Number>5</Number><Function>)</Function><Normal Text> this.width = </Normal Text><Number>10</Number><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* valid custom property, invalid in any normal property */</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:root</Selector Pseudo><Separator Symbol>,</Separator Symbol><br/>
 <Selector Pseudo>:root:lang(en)</Selector Pseudo><Normal Text> {</Normal Text><Variable>--external-link</Variable><Normal Text>: </Normal Text><String>"external link"</String><Separator Symbol>;</Separator Symbol><Normal Text>}</Normal Text><br/>
 <Selector Pseudo>:root:lang(de)</Selector Pseudo><Normal Text> {</Normal Text><Variable>--external-link</Variable><Normal Text>: </Normal Text><String>"externer Link"</String><Separator Symbol>;</Separator Symbol><Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>a</Selector Tag><Selector Attribute>[href</Selector Attribute><Operator>^=</Operator><String>"http"</String><Selector Attribute>]</Selector Attribute><Selector Pseudo>::after</Selector Pseudo><Normal Text> {</Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>" ("</String><Normal Text> </Normal Text><Function>var(</Function><Variable>--external-link</Variable><Function>)</Function><Normal Text> </Normal Text><String>")"</String><Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>one</Selector Tag><Normal Text>   { </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Tag>two</Selector Tag><Normal Text>   { </Normal Text><Variable>--bar</Variable><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--foo</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Tag>three</Selector Tag><Normal Text> { </Normal Text><Variable>--foo</Variable><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--bar</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Class>.foo</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Variable>--gap</Variable><Normal Text>: </Normal Text><Number>20</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Function>var(</Function><Variable>--gap</Variable><Function>)</Function><Normal Text>px</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/*20 px*/</Comment><br/>
 <Normal Text>	</Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Function>calc(var(</Function><Variable>--gap</Variable><Function>)</Function><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/*20px*/</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>foo</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>-</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>-var(</Function><Operator>-</Operator><Normal Text>-a</Normal Text><Function>))</Function><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* invalid */</Comment><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Operator>*-</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Operator>-</Operator><Number>8</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>50</Number><Unit>%</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text>(</Normal Text><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>calc(</Function><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>-</Operator><Normal Text>(</Normal Text><Function>var(</Function><Variable>--a</Variable><Function>)</Function><Normal Text>)</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>sweet-alert</Selector Tag><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Pseudo>:focus::-moz-placeholder</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>-webkit-transition</Property><Normal Text>: opacity </Normal Text><Number>0.3</Number><Unit>s</Unit><Normal Text> </Normal Text><Number>0.03</Number><Unit>s</Unit><Normal Text> </Normal Text><Value>ease</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>transition</Property><Normal Text>: opacity </Normal Text><Number>0.3</Number><Unit>s</Unit><Normal Text> </Normal Text><Number>0.03</Number><Unit>s</Unit><Normal Text> </Normal Text><Value>ease</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>opacity</Property><Normal Text>: </Normal Text><Number>0.5</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-feature-values</At Rule><Normal Text> Font One {</Normal Text><br/>
 <Normal Text>	</Normal Text><At Rule>@styleset</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Unknown Property>nice-style</Unknown Property><Normal Text>: </Normal Text><Number>12</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-feature-values</At Rule><Normal Text> Font Two {</Normal Text><br/>
 <Normal Text>	</Normal Text><At Rule>@styleset</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Unknown Property>nice-style</Unknown Property><Normal Text>: </Normal Text><Number>4</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@counter-style</At Rule><Normal Text> thumbs {</Normal Text><br/>
 <Normal Text>	</Normal Text><Unknown Property>system</Unknown Property><Normal Text>: cyclic</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Unknown Property>symbols</Unknown Property><Normal Text>: </Normal Text><String>"</String><SpecialChar>\1F44D</SpecialChar><String>"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Unknown Property>suffix</Unknown Property><Normal Text>: </Normal Text><String>" "</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Open Sans"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff2"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff2"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Function>url(</Function><String>"/fonts/OpenSans-Regular-webfont.woff"</String><Function>)</Function><Normal Text> </Normal Text><Function>format(</Function><String>"woff"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@page</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@page</At Rule><Normal Text> </Normal Text><Selector Pseudo>:first</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>marks</Property><Normal Text>: </Normal Text><Value>crop</Value><Normal Text> </Normal Text><Value>cross</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@page</At Rule><Normal Text> </Normal Text><Selector Pseudo>:unknown</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>cm</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Unknown Property>unknown</Unknown Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Bitstream Vera Serif Bold"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@viewport</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>zoom</Property><Normal Text>: </Normal Text><Number>0.75</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>min-zoom</Property><Normal Text>: </Normal Text><Number>0.5</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Property>max-zoom</Property><Normal Text>: </Normal Text><Number>0.9</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@viewport</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@document</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"https://www.example.com/"</String><Function>)</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Tag>h1</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@supports</At Rule><Normal Text> (</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>grid</Value><Normal Text>) {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>display</Property><Normal Text>: grid</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"fineprint.css"</String><Function>)</Function><Normal Text> </Normal Text><Value>print</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>fineprint.css</String><Function>)</Function><Normal Text> </Normal Text><Value>print</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>'bluish.css'</String><Function>)</Function><Normal Text> </Normal Text><Value>speech</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>'custom.css'</String><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"chrome://communicator/skin/"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"common.css"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>'landscape.css'</String><Function>)</Function><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>:</Normal Text><Value>landscape</Value><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@namespace</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>http://www.w3.org/1999/xhtml</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@namespace</At Rule><Normal Text> svg </Normal Text><Function>url(</Function><String>http://www.w3.org/2000/svg</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> important1 {</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>from</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>50%</Value><Normal Text>  { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> } </Normal Text><Comment>/* ignored */</Comment><br/>
 <Normal Text>	</Normal Text><Value>to</Value><Normal Text>   { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> important2 {</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>from</Value><Normal Text> { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>		</Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>to</Value><Normal Text>   { </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>150</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!important</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>/* ignored */</Comment><br/>
 <Normal Text>		</Normal Text><Property>margin-bottom</Property><Normal Text>: </Normal Text><Number>50</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> slidein {</Normal Text><br/>
 <Normal Text>	</Normal Text><Value>from</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>		</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>	</Normal Text><Value>to</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>		</Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>		</Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>	}</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>	</Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Normal Text> }</Normal Text><br/>
 <Normal Text>	</Normal Text><Comment>/* comments */</Comment><br/>
 <Normal Text>	</Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/**</Comment><br/>
 <Comment> * SCSS https://sass-lang.com/documentation/file.SASS_REFERENCE.html</Comment><br/>
 <Comment> */</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#main</Selector Id><Normal Text> </Normal Text><Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>97</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.redbox</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#ff0000</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#000000</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>text-decoration</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>text-decoration</Property><Normal Text>: </Normal Text><Value>underline</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.firefox</Selector Class><Normal Text> </Normal Text><Operator>&</Operator><Normal Text> { </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>normal</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Operator>&</Operator><Selector Tag>-sidebar</Selector Tag><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.funky</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>family</Property><Normal Text>: </Normal Text><Value>fantasy</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>30</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.funky</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Operator>/</Operator><Number>24</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>fantasy</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/* This comment is</Comment><br/>
 <Comment> * several lines long.</Comment><br/>
 <Comment> * since it uses the CSS comment syntax,</Comment><br/>
 <Comment> * it will appear in the CSS output. */</Comment><br/>
 <Selector Tag>body</Selector Tag><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// These comments are only one line long each.</Comment><br/>
 <Comment>// They won't appear in the CSS output,</Comment><br/>
 <Comment>// since they use the single-line comment syntax.</Comment><br/>
 <Selector Tag>a</Selector Tag><Normal Text> { </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$version</Variable><Normal Text>: </Normal Text><String>"1.2.3"</String><Separator Symbol>;</Separator Symbol><br/>
 <Comment>/* This CSS is generated by My Snazzy Framework version #{$version}. */</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$width</Variable><Normal Text>: </Normal Text><Number>5</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>5</Number><Unit>em</Unit><Normal Text> </Normal Text><Annotation>!global</Annotation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#sidebar</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>firefox-message</Function><Normal Text>(</Normal Text><Variable>$selector</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Tag>body</Selector Tag><Selector Class>.firefox</Selector Class><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$selector</Variable><Interpolation>}</Interpolation><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Hi, Firefox users!"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@include</At Rule><Normal Text> </Normal Text><Function>firefox-message(</Function><String>".header"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$map</Variable><Normal Text>: (key1: value1</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key2: value2</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> key3: value3)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text>             </Normal Text><Comment>// Plain CSS, no division</Comment><br/>
 <Normal Text>  </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>1000</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text>            </Normal Text><Comment>// Uses a variable, does division</Comment><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>round(</Function><Number>1.5</Number><Function>)</Function><Operator>/</Operator><Number>2</Number><Separator Symbol>;</Separator Symbol><Normal Text>        </Normal Text><Comment>// Uses a function, does division</Comment><br/>
 <Normal Text>  </Normal Text><Property>height</Property><Normal Text>: (</Normal Text><Number>500</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text>          </Normal Text><Comment>// Uses parentheses, does division</Comment><br/>
 <Normal Text>  </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>5</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>8</Number><Unit>px</Unit><Operator>/</Operator><Number>2</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Uses +, does division</Comment><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: (</Normal Text><Value>italic</Value><Normal Text> </Normal Text><Value>bold</Value><Normal Text> </Normal Text><Number>10</Number><Unit>px</Unit><Operator>/</Operator><Number>8</Number><Unit>px</Unit><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// In a list, parentheses don't count</Comment><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$font-size</Variable><Interpolation>}</Interpolation><Operator>/</Operator><Interpolation>#{</Interpolation><Variable>$line-height</Variable><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#010203</Color><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Color>#040506</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.75</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>opacify(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.3</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Function>transparentize(</Function><Variable>$translucent-red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.25</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$translucent-red</Variable><Normal Text>: </Normal Text><Function>rgba(</Function><Number>255</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>0.5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$green</Variable><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>;</Separator Symbol><br/>
 <Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/>
-<Normal Text>  </Normal Text><Property>filter</Property><Normal Text>: progid:DXImageTransform</Normal Text><Number>.</Number><Normal Text>Microsoft</Normal Text><Number>.</Number><Function>gradient(</Function><Normal Text>enabled=</Normal Text><String>'false'</String><Separator Symbol>,</Separator Symbol><Normal Text> startColorstr=</Normal Text><String>'</String><Interpolation>#{</Interpolation><Function>ie-hex-str(</Function><Variable>$green</Variable><Function>)</Function><Interpolation>}</Interpolation><String>'</String><Separator Symbol>,</Separator Symbol><Normal Text> endColorstr=</Normal Text><String>'</String><Interpolation>#{</Interpolation><Function>ie-hex-str(</Function><Variable>$translucent-red</Variable><Function>)</Function><Interpolation>}</Interpolation><String>'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>  </Normal Text><Property>filter</Property><Normal Text>: progid:DXImageTransform.Microsoft.</Normal Text><Function>gradient(</Function><Normal Text>enabled=</Normal Text><String>'false'</String><Separator Symbol>,</Separator Symbol><Normal Text> startColorstr=</Normal Text><String>'</String><Interpolation>#{</Interpolation><Function>ie-hex-str(</Function><Variable>$green</Variable><Function>)</Function><Interpolation>}</Interpolation><String>'</String><Separator Symbol>,</Separator Symbol><Normal Text> endColorstr=</Normal Text><String>'</String><Interpolation>#{</Interpolation><Function>ie-hex-str(</Function><Variable>$translucent-red</Variable><Function>)</Function><Interpolation>}</Interpolation><String>'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>cursor</Property><Normal Text>: e </Normal Text><Operator>+</Operator><Normal Text> -resize</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"Foo "</String><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> Bar</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>font-family</Property><Normal Text>: sans- </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><String>"serif"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate </String><Interpolation>#{</Interpolation><Number>5</Number><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>10</Number><Interpolation>}</Interpolation><String> pies!"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
-<Variable>$value</Variable><Normal Text>: null</Normal Text><Separator Symbol>;</Separator Symbol><br/>
+<Variable>$value</Variable><Normal Text>: </Normal Text><Value Keyword>null</Value Keyword><Separator Symbol>;</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Selector Pseudo>:before</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"I ate </String><Interpolation>#{</Interpolation><Variable>$value</Variable><Interpolation>}</Interpolation><String> pies!"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Function>hsl(</Function><Variable>$hue</Variable><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$saturation</Variable><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$lightness</Variable><Normal Text>: </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Variable>$name</Variable><Normal Text>: foo</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$attr</Variable><Normal Text>: border</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$attr</Variable><Interpolation>}</Interpolation><Unknown Property>-color</Unknown Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Variable>$font-size</Variable><Normal Text>: </Normal Text><Number>12</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Variable>$line-height</Variable><Normal Text>: </Normal Text><Number>30</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Variable>$font-size</Variable><Interpolation>}</Interpolation><Operator>/</Operator><Interpolation>#{</Interpolation><Variable>$line-height</Variable><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.foo.bar</Selector Class><Normal Text> </Normal Text><Selector Class>.baz.bang</Selector Class><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Class>.bip.qux</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Variable>$selector</Variable><Normal Text>: &</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>does-parent-exist</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> & {</Normal Text><br/>
 <Normal Text>    </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>  } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$content</Variable><Normal Text>: </Normal Text><String>"First content"</String><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$content</Variable><Normal Text>: </Normal Text><String>"Second content?"</String><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$new_content</Variable><Normal Text>: </Normal Text><String>"First time reference"</String><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>content</Property><Normal Text>: </Normal Text><Variable>$content</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Unknown Property>new-content</Unknown Property><Normal Text>: </Normal Text><Variable>$new_content</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo.css"</String><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"foo"</String><Normal Text> </Normal Text><Value>screen</Value><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"http://foo.com/bar"</String><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>foo</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$family</Variable><Normal Text>: </Normal Text><Function>unquote(</Function><String>"Droid+Sans"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><Function>url(</Function><String>"http://fonts.googleapis.com/css?family=</String><Interpolation>#{</Interpolation><Variable>$family</Variable><Interpolation>}</Interpolation><String>"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Selector Id>#main</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@import</At Rule><Normal Text> </Normal Text><String>"example"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>orientation</Property><Normal Text>: </Normal Text><Value>landscape</Value><Normal Text>) {</Normal Text><br/>
 <Normal Text>      </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$media</Variable><Normal Text>: screen</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$feature</Variable><Normal Text>: -webkit-min-device-pixel-ratio</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$value</Variable><Normal Text>: </Normal Text><Number>1.5</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Variable>$media</Variable><Interpolation>}</Interpolation><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Variable>$feature</Variable><Normal Text>: </Normal Text><Variable>$value</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.sidebar</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>500</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.error</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Color>#f00</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fdd</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Class>.seriousError</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.error</Selector Class><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>border-width</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.hoverlink</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Tag>a</Selector Tag><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>text-decoration</Property><Normal Text>: </Normal Text><Value>underline</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#context</Selector Id><Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Placeholder Selector>%extreme</Placeholder Selector><Normal Text> </Normal Text><Selector Tag>a</Selector Tag><Normal Text> </Normal Text><Placeholder Selector>%extreme</Placeholder Selector><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Selector Class>.notice</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Placeholder Selector>%extreme</Placeholder Selector><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>a</Selector Tag><Selector Class>.important</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.notice</Selector Class><Normal Text> !</Normal Text><Selector Tag>optional</Selector Tag><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.page</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>8</Number><Unit>in</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><At Rule>@at-root</At Rule><Normal Text> (</Normal Text><Property>without</Property><Normal Text>: media) {</Normal Text><br/>
 <Normal Text>      </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@debug</At Rule><Normal Text> </Normal Text><Number>10</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>12</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming </String><Interpolation>#{</Interpolation><Variable>$x</Variable><Interpolation>}</Interpolation><String> to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Variable>$x</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@warn</At Rule><Normal Text> </Normal Text><String>"Assuming </String><Interpolation>#{</Interpolation><Variable>$y</Variable><Interpolation>}</Interpolation><String> to be in pixels"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Variable>$y</Variable><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>adjust-location</Function><Normal Text>(</Normal Text><Variable>$x</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$y</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$x</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$x may not be unitless, was </String><Interpolation>#{</Interpolation><Variable>$x</Variable><Interpolation>}</Interpolation><String>."</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Function>unitless(</Function><Variable>$y</Variable><Function>)</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@error</At Rule><Normal Text> </Normal Text><String>"$y may not be unitless, was </String><Interpolation>#{</Interpolation><Variable>$y</Variable><Interpolation>}</Interpolation><String>."</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>relative</Value><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>left</Property><Normal Text>: </Normal Text><Variable>$x</Variable><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Property>top</Property><Normal Text>: </Normal Text><Variable>$y</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> </Normal Text><Number>2</Number><Normal Text> { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Separator Symbol>;</Separator Symbol><Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Number>5</Number><Normal Text> </Normal Text><Operator><</Operator><Normal Text> </Normal Text><Number>3</Number><Normal Text>      { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>dotted</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Value Keyword>null</Value Keyword><Normal Text>       { </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>double</Value><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$type</Variable><Normal Text>: monster</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Selector Tag>p</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> ocean {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> matador {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  } </Normal Text><At Rule>@else</At Rule><Normal Text> </Normal Text><At Rule>if</At Rule><Normal Text> </Normal Text><Variable>$type</Variable><Normal Text> </Normal Text><Operator>==</Operator><Normal Text> monster {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>green</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>black</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@for</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> from </Normal Text><Number>1</Number><Normal Text> through </Normal Text><Number>3</Number><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.item-</Selector Class><Interpolation>#{</Interpolation><Variable>$i</Variable><Interpolation>}</Interpolation><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text> in puma, sea-slug, egret, salamander {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/</String><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><String>.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$animal</Variable><Normal Text>, </Normal Text><Variable>$color</Variable><Normal Text>, </Normal Text><Variable>$cursor</Variable><Normal Text> in (puma, </Normal Text><Color>black</Color><Normal Text>, </Normal Text><Value>default</Value><Normal Text>),</Normal Text><br/>
 <Normal Text>                                  (sea-slug, </Normal Text><Color>blue</Color><Normal Text>, </Normal Text><Value>pointer</Value><Normal Text>),</Normal Text><br/>
 <Normal Text>                                  (egret, </Normal Text><Color>white</Color><Normal Text>, </Normal Text><Value>move</Value><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.</Selector Class><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><Selector Tag>-icon</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>'/images/</String><Interpolation>#{</Interpolation><Variable>$animal</Variable><Interpolation>}</Interpolation><String>.png'</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Value>solid</Value><Normal Text> </Normal Text><Variable>$color</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>cursor</Property><Normal Text>: </Normal Text><Variable>$cursor</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@each</At Rule><Normal Text> </Normal Text><Variable>$header</Variable><Normal Text>, </Normal Text><Variable>$size</Variable><Normal Text> in (h1: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text>, h2: </Normal Text><Number>1.5</Number><Unit>em</Unit><Normal Text>, h3: </Normal Text><Number>1.2</Number><Unit>em</Unit><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$header</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$size</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$i</Variable><Normal Text>: </Normal Text><Number>6</Number><Separator Symbol>;</Separator Symbol><br/>
 <At Rule>@while</At Rule><Normal Text> </Normal Text><Variable>$i</Variable><Normal Text> > </Normal Text><Number>0</Number><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Class>.item-</Selector Class><Interpolation>#{</Interpolation><Variable>$i</Variable><Interpolation>}</Interpolation><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>2</Number><Unit>em</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$i</Variable><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text>  </Normal Text><Variable>$i</Variable><Normal Text>: </Normal Text><Variable>$i</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>2</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>large-text</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>family</Property><Normal Text>: Arial</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>#ff0000</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>clearfix</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>inline-block</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Operator>&</Operator><Selector Pseudo>:after</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>content</Property><Normal Text>: </Normal Text><String>"."</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>block</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>clear</Property><Normal Text>: </Normal Text><Value>both</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>visibility</Property><Normal Text>: </Normal Text><Value>hidden</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>  </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Selector Tag>html</Selector Tag><Normal Text> </Normal Text><Operator>&</Operator><Normal Text> { </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>1</Number><Unit>px</Unit><Normal Text> }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.page-title</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> large-text</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>padding</Property><Normal Text>: </Normal Text><Number>4</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>margin-top</Property><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>compound</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> highlighted-background</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> header-text</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>highlighted-background</Function><Normal Text> { </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#fc0</Color><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>header-text</Function><Normal Text> { </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>sexy-border</Function><Normal Text>(</Normal Text><Variable>$color</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>border</Property><Normal Text>: {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$color</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Variable>$width</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>style</Property><Normal Text>: </Normal Text><Value>dashed</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>sexy-border(</Function><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>1</Number><Unit>in</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>p</Selector Tag><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>sexy-border(</Function><Variable>$color</Variable><Normal Text>: </Normal Text><Color>blue</Color><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Selector Tag>h1</Selector Tag><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>sexy-border(</Function><Variable>$color</Variable><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$width</Variable><Normal Text>: </Normal Text><Number>2</Number><Unit>in</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>colors</Function><Normal Text>(</Normal Text><Variable>$text</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$background</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$border</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Variable>$text</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Variable>$background</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>border-color</Property><Normal Text>: </Normal Text><Variable>$border</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$values</Variable><Normal Text>: </Normal Text><Color>#ff0000</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>#00ff00</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>#0000ff</Color><Separator Symbol>;</Separator Symbol><br/>
 <Selector Class>.primary</Selector Class><Normal Text> {</Normal Text><br/>
-<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>colors(</Function><Variable>$values</Variable><Number>...</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>colors(</Function><Variable>$values</Variable><Operator>...</Operator><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$value-map</Variable><Normal Text>: (</Normal Text><Value>text</Value><Normal Text>: </Normal Text><Color>#00ff00</Color><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>background</Color><Normal Text>: </Normal Text><Color>#0000ff</Color><Separator Symbol>,</Separator Symbol><Normal Text> border: </Normal Text><Color>#ff0000</Color><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Selector Class>.secondary</Selector Class><Normal Text> {</Normal Text><br/>
-<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>colors(</Function><Variable>$value-map</Variable><Number>...</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>  </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>colors(</Function><Variable>$value-map</Variable><Operator>...</Operator><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>apply-to-ie6-only</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Selector Tag>html</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@content</At Rule><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <At Rule>@include</At Rule><Normal Text> apply-to-ie6-only {</Normal Text><br/>
 <Normal Text>  </Normal Text><Selector Id>#logo</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>/logo.gif</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$grid-width</Variable><Normal Text>: </Normal Text><Number>40</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$gutter-width</Variable><Normal Text>: </Normal Text><Number>10</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@function</At Rule><Normal Text> </Normal Text><Function>grid-width</Function><Normal Text>(</Normal Text><Variable>$n</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@return</At Rule><Normal Text> </Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$grid-width</Variable><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> (</Normal Text><Variable>$n</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Number>1</Number><Normal Text>) </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Variable>$gutter-width</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#sidebar</Selector Id><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Function>grid-width(</Function><Number>5</Number><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>unify-parent</Function><Normal Text>(</Normal Text><Variable>$child</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><At Rule>@at-root</At Rule><Normal Text> </Normal Text><Interpolation>#{</Interpolation><Function>selector-unify(</Function><Normal Text>&</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$child</Variable><Function>)</Function><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@content</At Rule><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Pseudo>:root</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Variable>--font-family-sans-serif</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Function>inspect(</Function><Variable>$font-family-sans-serif</Variable><Function>)</Function><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Variable>--font-family-monospace</Variable><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><Function>inspect(</Function><Variable>$font-family-monospace</Variable><Function>)</Function><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>div</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>background-image</Property><Normal Text>: </Normal Text><Function>url(</Function><String>"/icons/</String><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><String>.svg"</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>font</Property><Normal Text>: </Normal Text><Interpolation>#{</Interpolation><String>"string"</String><Interpolation>}</Interpolation><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text></Normal Text><br/>
+<Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
+<Normal Text>  </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>  </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>  -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Variable>$value</Variable><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>  </Normal Text><Selector Class>.icon-</Selector Class><Interpolation>#{</Interpolation><Variable>$name</Variable><Interpolation>}</Interpolation><Normal Text> {</Normal Text><br/>
+<Normal Text>    </Normal Text><Property>position</Property><Normal Text>: </Normal Text><Value>absolute</Value><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>    </Normal Text><Interpolation>#{</Interpolation><Variable>$top-or-bottom</Variable><Interpolation>}</Interpolation><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>;</Separator Symbol><br/>
+<Normal Text>    -</Normal Text><Interpolation>#{</Interpolation><Variable>$prefix</Variable><Interpolation>}</Interpolation><Normal Text>-</Normal Text><Interpolation>#{</Interpolation><Variable>$property</Variable><Interpolation>}</Interpolation><Unknown Property>-image</Unknown Property><Normal Text>: </Normal Text><Variable>$value</Variable><br/>
+<Normal Text>  }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
diff --git a/autotests/reference/review128925-1.scss.ref b/autotests/reference/review128925-1.scss.ref
index fee32c7..78a1d5b 100644
--- a/autotests/reference/review128925-1.scss.ref
+++ b/autotests/reference/review128925-1.scss.ref
@@ -1,211 +1,211 @@
 <Comment>/*</Comment><br/>
 <Comment> * SCSS Syntax Highlight Sample File (Standard)</Comment><br/>
 <Comment> *</Comment><br/>
 <Comment> * This file contains most SCSS syntax, CSS3 properties, advanced code structure.</Comment><br/>
 <Comment> * It is NOT a valid SCSS file that can be compiled by SCSS preprocessors.</Comment><br/>
 <Comment> *</Comment><br/>
 <Comment> * @author  Guo Yunhe guoyunhebrave@gmail.com</Comment><br/>
 <Comment> * @date    2016-09-15</Comment><br/>
 <Comment> */</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Comment>/*</Comment><br/>
 <Comment> * Block comment</Comment><br/>
 <Comment> *</Comment><br/>
 <Comment> * Alert keywords:</Comment><br/>
 <Comment> * </Comment><Alert Level 2>TODO</Alert Level 2><Comment> </Comment><Alert Level 2>BUG</Alert Level 2><Comment> </Comment><Alert Level 2>FIXME</Alert Level 2><br/>
 <Comment> */</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@charset</At Rule><Normal Text> </Normal Text><String>"UTF-8"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@import</At Rule><Normal Text> </Normal Text><String>"mixins/button"</String><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Variable define</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$image-path</Variable><Normal Text>:            </Normal Text><String>"../../static/images"</String><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$default-text-color</Variable><Normal Text>:    </Normal Text><Color>#333</Color><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// Default can be overrided</Comment><br/>
 <Variable>$default-font-size</Variable><Normal Text>:     </Normal Text><Number>16</Number><Unit>px</Unit><Normal Text> </Normal Text><Annotation>!default</Annotation><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$default-font-family</Variable><Normal Text>:   Roboto</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><String>"Droid Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$default-font-weight</Variable><Normal Text>:   </Normal Text><Number>400</Number><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$default-line-height</Variable><Normal Text>:   </Normal Text><Variable>$default-font-size</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>1.8</Number><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$shadow-transparence</Variable><Normal Text>:   </Normal Text><Number>0.25</Number><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$box-shadow</Variable><Normal Text>:            </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>3</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Variable>$shadow-transparence</Variable><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$page-width</Variable><Normal Text>:            </Normal Text><Number>100</Number><Unit>rem</Unit><Separator Symbol>;</Separator Symbol><Normal Text> </Normal Text><Comment>// kabab-case</Comment><br/>
 <Variable>$gapOfArticle</Variable><Normal Text>:          </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><Normal Text>   </Normal Text><Comment>// camelCase</Comment><br/>
 <Variable>$body_background_color</Variable><Normal Text>: </Normal Text><Color>white</Color><Separator Symbol>;</Separator Symbol><Normal Text>  </Normal Text><Comment>// snake_case</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Mixins</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>border-radius</Function><Normal Text>(</Normal Text><Variable>$radius</Variable><Normal Text>) {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>-webkit-border-radius</Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>     </Normal Text><Property>-moz-border-radius</Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>      </Normal Text><Unknown Property>-ms-border-radius</Unknown Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>          </Normal Text><Property>border-radius</Property><Normal Text>: </Normal Text><Variable>$radius</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.box</Selector Class><Normal Text> { </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>border-radius(</Function><Number>10</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Nesting</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Selector Id>#home-page</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>    </Normal Text><Selector Tag>header</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>80</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>        </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Value Keyword>auto</Value Keyword><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>        </Normal Text><Selector Class>.cover</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>            </Normal Text><At Rule>@include</At Rule><Normal Text> </Normal Text><Function>border-radius(</Function><Number>20</Number><Unit>px</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>            </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>            </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>                </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Color>#ffffff</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>            }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>            </Normal Text><Selector Class>.like-button</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>                </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$default-font-size</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>0.8</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>                </Normal Text><At Rule>@media</At Rule><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Normal Text>) </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Number>200</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
 <Normal Text>                    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Variable>$default-font-size</Variable><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>0.8</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>                    </Normal Text><Selector Class>.icon</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>                        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>                        </Normal Text><Property>height</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>                    }</Normal Text><br/>
 <Normal Text>                }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>                </Normal Text><At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>                    </Normal Text><Property>display</Property><Normal Text>: </Normal Text><Value>none</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>                }</Normal Text><br/>
 <Normal Text>            }</Normal Text><br/>
 <Normal Text>        }</Normal Text><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Extend and inheritance</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.message</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>border</Property><Normal Text>: </Normal Text><Variable>$border-light</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>background-color</Property><Normal Text>: </Normal Text><Color>#f0f0f0</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.message-danger</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@extend</At Rule><Normal Text> </Normal Text><Selector Class>.message</Selector Class><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Control structures</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@mixin</At Rule><Normal Text> </Normal Text><Function>does-parent-exist</Function><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><At Rule>@if</At Rule><Normal Text> & {</Normal Text><br/>
 <Normal Text>        </Normal Text><Operator>&</Operator><Selector Pseudo>:hover</Selector Pseudo><Normal Text> {</Normal Text><br/>
 <Normal Text>            </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>        }</Normal Text><br/>
 <Normal Text>    } </Normal Text><At Rule>@else</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Selector Tag>a</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>            </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>red</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>        }</Normal Text><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Operators</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Selector Class>.container</Selector Class><Normal Text> { </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><Normal Text> }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>article</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"main"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>left</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>aside</Selector Tag><Selector Attribute>[role</Selector Attribute><Operator>=</Operator><String>"complementary"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
 <Normal Text>  </Normal Text><Property>float</Property><Normal Text>: </Normal Text><Value>right</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>  </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>*</Operator><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Functions - see http://sass-lang.com/documentation/Sass/Script/Functions.html</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Variable>$color1</Variable><Normal Text>: </Normal Text><Function>hsl(</Function><Number>120</Number><Unit>deg</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Number>50</Number><Unit>%</Unit><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
-<Variable>$color2</Variable><Normal Text>: </Normal Text><Function>rgb(</Function><Variable>$red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$green</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Color>blue</Color><Normal Text>(</Normal Text><Variable>$color1</Variable><Function>)</Function><Normal Text>)</Normal Text><Separator Symbol>;</Separator Symbol><br/>
+<Variable>$color2</Variable><Normal Text>: </Normal Text><Function>rgb(</Function><Variable>$red</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$green</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Function>blue(</Function><Variable>$color1</Variable><Function>))</Function><Separator Symbol>;</Separator Symbol><br/>
 <Variable>$color3</Variable><Normal Text>: </Normal Text><Function>mix(</Function><Variable>$color1</Variable><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$color2</Variable><Separator Symbol>,</Separator Symbol><Normal Text> [</Normal Text><Variable>$weight</Variable><Normal Text>]</Normal Text><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Properties</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>html</Selector Tag><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Selector Tag>body</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: </Normal Text><String>"Droid Sans"</String><Separator Symbol>,</Separator Symbol><Normal Text> Arial</Normal Text><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Value>sans-serif</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>11</Number><Unit>pt</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>line-height</Property><Normal Text>: </Normal Text><Number>1.5</Number><Unit>em</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>px</Unit><Normal Text> </Normal Text><Operator>+</Operator><Normal Text> </Normal Text><Variable>$page-width</Variable><Normal Text> </Normal Text><Operator>-</Operator><Normal Text> </Normal Text><Variable>$gap</Variable><Normal Text> </Normal Text><Operator>/</Operator><Normal Text> </Normal Text><Number>2</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>background</Property><Normal Text>: </Normal Text><Variable>$bg_color</Variable><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>text-shadow</Property><Normal Text>: </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>0</Number><Normal Text> </Normal Text><Number>2</Number><Unit>px</Unit><Normal Text> </Normal Text><Function>rgba(</Function><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Number>0</Number><Separator Symbol>,</Separator Symbol><Normal Text> </Normal Text><Variable>$transparence</Variable><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>box-sizing</Property><Normal Text>: </Normal Text><Value>border-box</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Selectors</Comment><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>blockquote</Selector Tag><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>margin</Property><Normal Text>: </Normal Text><Number>0</Number><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>header</Selector Tag><Normal Text> </Normal Text><Selector Id>#logo</Selector Id><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>div</Selector Tag><Selector Id>#footer</Selector Id><Normal Text> </Normal Text><Selector Class>.link</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>color</Property><Normal Text>: </Normal Text><Color>blue</Color><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>sidebar</Selector Tag><Normal Text> </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Attribute>[type</Selector Attribute><Operator>=</Operator><String>"text"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>font-size</Property><Normal Text>: </Normal Text><Number>20</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Selector Tag>sidebar</Selector Tag><Normal Text> </Normal Text><Selector Id>#subscribe</Selector Id><Normal Text> </Normal Text><Selector Class>.subscribe_form</Selector Class><Selector Pseudo>:nth-child(2n + 1):hover</Selector Pseudo><Normal Text> </Normal Text><Selector Tag>input</Selector Tag><Selector Attribute>[class</Selector Attribute><Operator>*=</Operator><String>"small-"</String><Selector Attribute>]</Selector Attribute><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Media Queries</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>print</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Number>768</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
 <Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>600</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@media</At Rule><Normal Text> </Normal Text><Value>screen</Value><Normal Text> </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>min-width</Property><Normal Text>: </Normal Text><Number>768</Number><Unit>px</Unit><Normal Text>) </Normal Text><Keyword>and</Keyword><Normal Text> (</Normal Text><Property>max-width</Property><Normal Text>: </Normal Text><Number>960</Number><Unit>px</Unit><Normal Text>) {</Normal Text><br/>
 <Normal Text>    </Normal Text><Selector Class>.container</Selector Class><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>720</Number><Unit>px</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Fontface</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@font-face</At Rule><Normal Text> {</Normal Text><br/>
 <Normal Text>    </Normal Text><Property>font-family</Property><Normal Text>: MyHelvetica</Normal Text><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>src</Property><Normal Text>: </Normal Text><Function>local(</Function><String>"Helvetica Neue Bold"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/>
 <Normal Text>        </Normal Text><Function>local(</Function><String>"HelveticaNeue-Bold"</String><Function>)</Function><Separator Symbol>,</Separator Symbol><br/>
 <Normal Text>        </Normal Text><Function>url(</Function><String>MgOpenModernaBold.ttf</String><Function>)</Function><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    </Normal Text><Property>font-weight</Property><Normal Text>: </Normal Text><Value>bold</Value><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>}</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Comment>// Animation (Keyframes)</Comment><br/>
 <Normal Text></Normal Text><br/>
 <At Rule>@keyframes</At Rule><Normal Text> slidein {</Normal Text><br/>
 <Normal Text>    </Normal Text><Value>from</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>300</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text></Normal Text><br/>
 <Normal Text>    </Normal Text><Value>to</Value><Normal Text> {</Normal Text><br/>
 <Normal Text>        </Normal Text><Property>margin-left</Property><Normal Text>: </Normal Text><Number>0</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>        </Normal Text><Property>width</Property><Normal Text>: </Normal Text><Number>100</Number><Unit>%</Unit><Separator Symbol>;</Separator Symbol><br/>
 <Normal Text>    }</Normal Text><br/>
 <Normal Text>}</Normal Text><br/>
diff --git a/data/syntax/css.xml b/data/syntax/css.xml
index 25a614e..228bb45 100644
--- a/data/syntax/css.xml
+++ b/data/syntax/css.xml
@@ -1,1735 +1,1738 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE language SYSTEM "language.dtd"
 [
   <!-- https://www.w3.org/TR/CSS22/syndata.html#tokenization -->
   <!ENTITY nmstart "[_a-zA-Z]|(\\[0-9a-fA-F]{1,6})|(\\[^\n\r\f0-9a-fA-F])">
   <!ENTITY nmchar  "[_a-zA-Z0-9-]|(\\[0-9a-fA-F]{1,6})|(\\[^\n\r\f0-9a-fA-F])">
 ]>
 
 <!--
 
 Kate CSS syntax highlighting definition
 
 Changelog:
 
 - Version 8, by Jonathan Poelen
 - fix some Operator and Selector Tag highlighting
 
 - Version 7, by Jonathan Poelen
 - fix tag followed by a pseudo-class in a nested rule (@media, ...)
 - fix constraint in a rule
 - fix Kate auto-completion for properties and rules
 - New highlighting categories: Keyword, Operator, Separator Symbol, SpecialChar, Variable, Value Keyword, Color, Number, Unit, Selector Tag
 
 - Version 4, by Guo Yunhe guoyunhebrave@gmail.com
 - Remake for complex CSS syntax, avoid errors
 
 - Version 2.13, by Guo Yunhe
 - Add all W3C Work Draft properties
 
 - Version 2.06, by Mte90:
 - CSS3 tag
 
 - Version 2.03, by Milian Wolff:
 - Make it spelling aware
 
 - Version 2.08, Joseph Wenninger:
 - CSS3 media queries
 
 -->
 
-<language name="CSS" version="8" kateversion="5.0" section="Markup" extensions="*.css" indenter="cstyle" mimetype="text/css" author="Wilbert Berendsen (wilbert@kde.nl)" license="LGPL" priority="10">
+<language name="CSS" version="9" kateversion="5.0" section="Markup" extensions="*.css" indenter="cstyle" mimetype="text/css" author="Wilbert Berendsen (wilbert@kde.nl)" license="LGPL" priority="10">
+    <!-- https://www.w3.org/Style/CSS/current-work -->
 
     <highlighting>
         <list name="properties">
             <!-- W3C > Work Draft, from https://www.w3.org/Style/CSS/all-properties -->
             <item>align-content</item>
             <item>align-items</item>
             <item>alignment-baseline</item>
             <item>align-self</item>
             <item>all</item>
             <item>animation</item>
             <item>animation-delay</item>
             <item>animation-direction</item>
             <item>animation-duration</item>
             <item>animation-fill-mode</item>
             <item>animation-iteration-count</item>
             <item>animation-name</item>
             <item>animation-play-state</item>
             <item>animation-timing-function</item>
             <item>appearance</item>
             <item>azimuth</item>
             <item>backface-visibility</item>
             <item>background</item>
             <item>background-attachment</item>
             <item>background-blend-mode</item>
             <item>background-clip</item>
             <item>background-color</item>
             <item>background-image</item>
             <item>background-image-transform</item>
             <item>background-origin</item>
             <item>background-position</item>
             <item>background-repeat</item>
             <item>background-size</item>
             <item>baseline-shift</item>
             <item>block-size</item>
             <item>block-step</item>
             <item>block-step-align</item>
             <item>block-step-insert</item>
             <item>block-step-round</item>
             <item>block-step-size</item>
             <item>bookmark-label</item>
             <item>bookmark-level</item>
             <item>bookmark-state</item>
             <item>border</item>
             <item>border-block</item>
             <item>border-block-color</item>
             <item>border-block-end</item>
             <item>border-block-end-color</item>
             <item>border-block-end-style</item>
             <item>border-block-end-width</item>
             <item>border-block-start</item>
             <item>border-block-start-color</item>
             <item>border-block-start-style</item>
             <item>border-block-start-width</item>
             <item>border-block-style</item>
             <item>border-block-width</item>
             <item>border-bottom</item>
             <item>border-bottom-color</item>
             <item>border-bottom-left-radius</item>
             <item>border-bottom-right-radius</item>
             <item>border-bottom-style</item>
             <item>border-bottom-width</item>
             <item>border-boundary</item>
             <item>border-collapse</item>
             <item>border-color</item>
             <item>border-image</item>
             <item>border-image-outset</item>
             <item>border-image-repeat</item>
             <item>border-image-slice</item>
             <item>border-image-source</item>
             <item>border-image-transform</item>
             <item>border-image-width</item>
             <item>border-inline</item>
             <item>border-inline-color</item>
             <item>border-inline-end</item>
             <item>border-inline-end-color</item>
             <item>border-inline-end-style</item>
             <item>border-inline-end-width</item>
             <item>border-inline-start</item>
             <item>border-inline-start-color</item>
             <item>border-inline-start-style</item>
             <item>border-inline-start-width</item>
             <item>border-inline-style</item>
             <item>border-inline-width</item>
             <item>border-left</item>
             <item>border-left-color</item>
             <item>border-left-style</item>
             <item>border-left-width</item>
             <item>border-radius</item>
             <item>border-right</item>
             <item>border-right-color</item>
             <item>border-right-style</item>
             <item>border-right-width</item>
             <item>border-spacing</item>
             <item>border-style</item>
             <item>border-top</item>
             <item>border-top-color</item>
             <item>border-top-left-radius</item>
             <item>border-top-right-radius</item>
             <item>border-top-style</item>
             <item>border-top-width</item>
             <item>border-width</item>
             <item>bottom</item>
             <item>box-decoration-break</item>
             <item>box-shadow</item>
             <item>box-sizing</item>
             <item>box-snap</item>
             <item>break-after</item>
             <item>break-before</item>
             <item>break-inside</item>
             <item>caption-side</item>
             <item>caret</item>
             <item>caret-color</item>
             <item>caret-shape</item>
             <item>clear</item>
             <item>clip</item>
             <item>clip-path</item>
             <item>clip-rule</item>
             <item>color</item>
             <item>color-adjust</item>
             <item>color-interpolation-filters</item>
             <item>columns</item>
             <item>column-count</item>
             <item>column-fill</item>
             <item>column-gap</item>
             <item>column-rule</item>
             <item>column-rule-color</item>
             <item>column-rule-style</item>
             <item>column-rule-width</item>
             <item>column-span</item>
             <item>column-width</item>
             <item>contain</item>
             <item>content</item>
             <item>continue</item>
             <item>counter-increment</item>
             <item>counter-reset</item>
             <item>counter-set</item>
             <item>cue</item>
             <item>cue-after</item>
             <item>cue-before</item>
             <item>cursor</item>
             <item>direction</item>
             <item>display</item>
             <item>dominant-baseline</item>
             <item>elevation</item>
             <item>empty-cells</item>
             <item>fill</item>
             <item>fill-break</item>
             <item>fill-color</item>
             <item>fill-image</item>
             <item>fill-opacity</item>
             <item>fill-origin</item>
             <item>fill-position</item>
             <item>fill-repeat</item>
             <item>fill-rule</item>
             <item>fill-size</item>
             <item>filter</item>
             <item>flex</item>
             <item>flex-basis</item>
             <item>flex-direction</item>
             <item>flex-flow</item>
             <item>flex-grow</item>
             <item>flex-shrink</item>
             <item>flex-wrap</item>
             <item>float</item>
             <item>float-defer</item>
             <item>float-offset</item>
             <item>float-reference</item>
             <item>flood-color</item>
             <item>flood-opacity</item>
             <item>flow-from</item>
             <item>flow-into</item>
             <item>font</item>
             <item>font-family</item>
             <item>font-feature-settings</item>
             <item>font-kerning</item>
             <item>font-language-override</item>
             <item>font-max-size</item>
             <item>font-min-size</item>
             <item>font-optical-sizing</item>
             <item>font-palette</item>
             <item>font-size</item>
             <item>font-size-adjust</item>
             <item>font-stretch</item>
             <item>font-style</item>
             <item>font-synthesis</item>
             <item>font-variant</item>
             <item>font-variant-alternates</item>
             <item>font-variant-caps</item>
             <item>font-variant-east-asian</item>
             <item>font-variant-emoji</item>
             <item>font-variant-ligatures</item>
             <item>font-variant-numeric</item>
             <item>font-variant-position</item>
             <item>font-variation-settings</item>
             <item>font-weight</item>
             <item>footnote-display</item>
             <item>footnote-policy</item>
             <item>gap</item>
             <item>glyph-orientation-vertical</item>
             <item>grid</item>
             <item>grid-area</item>
             <item>grid-auto-columns</item>
             <item>grid-auto-flow</item>
             <item>grid-auto-rows</item>
             <item>grid-column</item>
             <item>grid-column-end</item>
             <item>grid-column-gap</item>
             <item>grid-column-start</item>
             <item>grid-gap</item>
             <item>grid-row</item>
             <item>grid-row-end</item>
             <item>grid-row-gap</item>
             <item>grid-row-start</item>
             <item>grid-template</item>
             <item>grid-template-areas</item>
             <item>grid-template-columns</item>
             <item>grid-template-rows</item>
             <item>hanging-punctuation</item>
             <item>height</item>
             <item>hyphenate-character</item>
             <item>hyphenate-limit-chars</item>
             <item>hyphenate-limit-last</item>
             <item>hyphenate-limit-lines</item>
             <item>hyphenate-limit-zone</item>
             <item>hyphens</item>
             <item>image-orientation</item>
             <item>image-rendering</item>
             <item>image-resolution</item>
             <item>initial-letter</item>
             <item>initial-letter-align</item>
             <item>initial-letter-wrap</item>
             <item>inline-size</item>
             <item>inset</item>
             <item>inset-block</item>
             <item>inset-block-end</item>
             <item>inset-block-start</item>
             <item>inset-inline</item>
             <item>inset-inline-end</item>
             <item>inset-inline-start</item>
             <item>isolation</item>
             <item>justify-content</item>
             <item>justify-items</item>
             <item>justify-self</item>
             <item>left</item>
             <item>letter-spacing</item>
             <item>lighting-color</item>
             <item>line-break</item>
             <item>line-grid</item>
             <item>line-height</item>
             <item>line-height-step</item>
             <item>line-snap</item>
             <item>list-style</item>
             <item>list-style-image</item>
             <item>list-style-position</item>
             <item>list-style-type</item>
             <item>margin</item>
             <item>margin-block</item>
             <item>margin-block-end</item>
             <item>margin-block-start</item>
             <item>margin-bottom</item>
             <item>margin-inline</item>
             <item>margin-inline-end</item>
             <item>margin-inline-start</item>
             <item>margin-left</item>
             <item>margin-right</item>
             <item>margin-top</item>
             <item>marker</item>
             <item>marker-end</item>
             <item>marker-knockout-left</item>
             <item>marker-knockout-right</item>
             <item>marker-mid</item>
             <item>marker-pattern</item>
             <item>marker-segment</item>
             <item>marker-side</item>
             <item>marker-start</item>
             <item>marquee-direction</item>
             <item>marquee-loop</item>
             <item>marquee-speed</item>
             <item>marquee-style</item>
             <item>mask</item>
             <item>mask-border</item>
             <item>mask-border-mode</item>
             <item>mask-border-outset</item>
             <item>mask-border-repeat</item>
             <item>mask-border-slice</item>
             <item>mask-border-source</item>
             <item>mask-border-width</item>
             <item>mask-clip</item>
             <item>mask-composite</item>
             <item>mask-image</item>
             <item>mask-mode</item>
             <item>mask-origin</item>
             <item>mask-position</item>
             <item>mask-repeat</item>
             <item>mask-size</item>
             <item>mask-type</item>
             <item>max-block-size</item>
             <item>max-height</item>
             <item>max-inline-size</item>
             <item>max-lines</item>
             <item>max-width</item>
             <item>min-block-size</item>
             <item>min-height</item>
             <item>min-inline-size</item>
             <item>min-width</item>
             <item>mix-blend-mode</item>
             <item>nav-up</item>
             <item>nav-down</item>
             <item>nav-left</item>
             <item>nav-right</item>
             <item>object-fit</item>
             <item>object-position</item>
             <item>offset</item>
             <item>offset-after</item>
             <item>offset-anchor</item>
             <item>offset-before</item>
             <item>offset-distance</item>
             <item>offset-end</item>
             <item>offset-path</item>
             <item>offset-position</item>
             <item>offset-rotate</item>
             <item>offset-start</item>
             <item>opacity</item>
             <item>order</item>
             <item>orphans</item>
             <item>outline</item>
             <item>outline-color</item>
             <item>outline-offset</item>
             <item>outline-style</item>
             <item>outline-width</item>
             <item>overflow</item>
             <item>overflow-style</item>
             <item>overflow-wrap</item>
             <item>overflow-x</item>
             <item>overflow-y</item>
             <item>padding</item>
             <item>padding-block</item>
             <item>padding-block-end</item>
             <item>padding-block-start</item>
             <item>padding-bottom</item>
             <item>padding-inline</item>
             <item>padding-inline-end</item>
             <item>padding-inline-start</item>
             <item>padding-left</item>
             <item>padding-right</item>
             <item>padding-top</item>
             <item>page</item>
             <item>page-break-after</item>
             <item>page-break-before</item>
             <item>page-break-inside</item>
             <item>pause</item>
             <item>pause-after</item>
             <item>pause-before</item>
             <item>perspective</item>
             <item>perspective-origin</item>
             <item>pitch</item>
             <item>pitch-range</item>
             <item>place-content</item>
             <item>place-items</item>
             <item>place-self</item>
             <item>play-during</item>
             <item>pointer-events</item>
             <item>position</item>
             <item>quotes</item>
             <item>region-fragment</item>
             <item>resize</item>
             <item>richness</item>
             <item>right</item>
             <item>rotation</item>
             <item>rotation-point</item>
             <item>row-gap</item>
             <item>ruby-align</item>
             <item>ruby-merge</item>
             <item>ruby-position</item>
             <item>running</item>
             <item>scrollbar-gutter</item>
             <item>shape-image-threshold</item>
             <item>shape-inside</item>
             <item>shape-margin</item>
             <item>shape-outside</item>
             <item>size</item>
             <item>speak</item>
             <item>speak-header</item>
             <item>speak-numeral</item>
             <item>speak-punctuation</item>
             <item>speech-rate</item>
             <item>stress</item>
             <item>string-set</item>
             <item>table-layout</item>
             <item>tab-size</item>
             <item>text-align-all</item>
             <item>text-align</item>
             <item>text-align-last</item>
             <item>text-combine-upright</item>
             <item>text-decoration-color</item>
             <item>text-decoration</item>
             <item>text-decoration-line</item>
             <item>text-decoration-skip</item>
             <item>text-decoration-skip-ink</item>
             <item>text-decoration-style</item>
             <item>text-decoration-width</item>
             <item>text-emphasis</item>
             <item>text-emphasis-color</item>
             <item>text-emphasis-position</item>
             <item>text-emphasis-skip</item>
             <item>text-emphasis-style</item>
             <item>text-indent</item>
             <item>text-justify</item>
             <item>text-orientation</item>
             <item>text-overflow</item>
             <item>text-shadow</item>
             <item>text-space-collapse</item>
             <item>text-space-trim</item>
             <item>text-spacing</item>
             <item>text-transform</item>
             <item>text-underline-offset</item>
             <item>text-underline-position</item>
             <item>text-wrap</item>
             <item>top</item>
             <item>transform</item>
             <item>transform-box</item>
             <item>transform-origin</item>
             <item>transform-style</item>
             <item>transition</item>
             <item>transition-delay</item>
             <item>transition-duration</item>
             <item>transition-property</item>
             <item>transition-timing-function</item>
             <item>unicode-bidi</item>
             <item>user-select</item>
             <item>vertical-align</item>
             <item>visibility</item>
             <item>voice-family</item>
             <item>volume</item>
             <item>white-space</item>
             <item>widows</item>
             <item>width</item>
             <item>will-change</item>
             <item>word-break</item>
             <item>word-spacing</item>
             <item>word-wrap</item>
             <item>wrap-after</item>
             <item>wrap-before</item>
             <item>wrap-flow</item>
             <item>wrap-inside</item>
             <item>wrap-through</item>
             <item>writing-mode</item>
             <item>z-index</item>
 
             <!-- Gecko rendering engine CSS property extensions -->
             <item>-moz-animation</item>
             <item>-moz-animation-delay</item>
             <item>-moz-animation-direction</item>
             <item>-moz-animation-duration</item>
             <item>-moz-animation-fill-mode</item>
             <item>-moz-animation-iteration-count</item>
             <item>-moz-animation-name</item>
             <item>-moz-animation-play-state</item>
             <item>-moz-animation-timing-function</item>
             <item>-moz-appearance</item>
             <item>-moz-background-clip</item>
             <item>-moz-background-origin</item>
             <item>-moz-background-size</item>
             <item>-moz-border-image</item>
             <item>-moz-border-radius</item>
             <item>-moz-border-radius-bottomleft</item>
             <item>-moz-border-radius-bottomright</item>
             <item>-moz-border-radius-topleft</item>
             <item>-moz-border-radius-topright</item>
             <item>-moz-box-align</item>
             <item>-moz-box-direction</item>
             <item>-moz-box-flex</item>
             <item>-moz-box-flex-group</item>
             <item>-moz-box-ordinal-group</item>
             <item>-moz-box-orient</item>
             <item>-moz-box-pack</item>
             <item>-moz-box-shadow</item>
             <item>-moz-box-sizing</item>
             <item>-moz-box</item>
             <item>-moz-column-count</item>
             <item>-moz-column-fill</item>
             <item>-moz-column-gap</item>
             <item>-moz-column-rule</item>
             <item>-moz-column-rule-color</item>
             <item>-moz-column-rule-style</item>
             <item>-moz-column-rule-width</item>
             <item>-moz-columns</item>
             <item>-moz-column-width</item>
             <item>-moz-hyphens</item>
             <item>-moz-opacity</item>
             <item>-moz-outline-style</item>
             <item>-moz-perspective</item>
             <item>-moz-resize</item>
             <item>-moz-text-align-last</item>
             <item>-moz-text-decoration-color</item>
             <item>-moz-text-decoration-line</item>
             <item>-moz-text-decoration-style</item>
             <item>-moz-transform</item>
             <item>-moz-transform-origin</item>
             <item>-moz-transform-style</item>
             <item>-moz-transition</item>
             <item>-moz-transition-delay</item>
             <item>-moz-transition-duration</item>
             <item>-moz-transition-property</item>
             <item>-moz-transition-timing-function</item>
             <item>-moz-user-select</item>
 
             <!-- Opera rendering engine CSS property extensions -->
             <item>-o-background-size</item>
             <item>-o-linear-gradient</item>
             <item>-o-text-overflow</item>
             <item>-o-transition</item>
             <item>-o-transform-origin</item>
 
             <!-- konq specific -->
             <item>konq_bgpos_x</item>
             <item>konq_bgpos_y</item>
             <item>-khtml-background-size</item>
             <item>-khtml-border-top-left-radius</item>
             <item>-khtml-border-top-right-radius</item>
             <item>-khtml-border-bottom-left-radius</item>
             <item>-khtml-border-bottom-right-radius</item>
             <item>-khtml-border-radius</item>
             <item>-khtml-box-shadow</item>
             <item>-khtml-opacity</item>
 
             <!-- Webkit rendering engine CSS property extensions -->
             <item>-webkit-appearance</item>
             <item>-webkit-animation</item>
             <item>-webkit-animation-name</item>
             <item>-webkit-animation-duration</item>
             <item>-webkit-animation-iteration</item>
             <item>-webkit-animation-direction</item>
             <item>-webkit-animation-delay</item>
             <item>-webkit-animation-play-state</item>
             <item>-webkit-animation-fill-mode</item>
             <item>-webkit-background-size</item>
             <item>-webkit-backface-visibility</item>
             <item>-webkit-border-image</item>
             <item>-webkit-border-bottom-colors</item>
             <item>-webkit-border-left-colors</item>
             <item>-webkit-border-radius</item>
             <item>-webkit-border-right-colors</item>
             <item>-webkit-border-top-colors</item>
             <item>-webkit-border-top-left-radius</item>
             <item>-webkit-border-top-right-radius</item>
             <item>-webkit-border-bottom-left-radius</item>
             <item>-webkit-border-bottom-right-radius</item>
             <item>-webkit-border-radius-bottomleft</item>
             <item>-webkit-border-radius-bottomright</item>
             <item>-webkit-box-align</item>
             <item>-webkit-box-direction</item>
             <item>-webkit-box-flex</item>
             <item>-webkit-box-ordinal-group</item>
             <item>-webkit-box-orient</item>
             <item>-webkit-box-pack</item>
             <item>-webkit-box-reflect</item>
             <item>-webkit-box-shadow</item>
             <item>-webkit-box-sizing</item>
             <item>-webkit-column-count</item>
             <item>-webkit-column-gap</item>
             <item>-webkit-hyphens</item>
             <item>-webkit-linear-gradient</item>
             <item>-webkit-gradient</item>
             <item>-webkit-overflow-scrolling</item>
             <item>-webkit-perspective</item>
             <item>-webkit-text-decoration</item>
             <item>-webkit-text-decoration-skip</item>
             <item>-webkit-text-fill-color</item>
             <item>-webkit-text-stroke-color</item>
             <item>-webkit-text-stroke-width</item>
             <item>-webkit-text-size-adjust</item>
             <item>-webkit-tap-highlight-color</item>
             <item>-webkit-transform</item>
             <item>-webkit-transform-origin</item>
             <item>-webkit-transform-style</item>
             <item>-webkit-transition</item>
             <item>-webkit-transition-property</item>
             <item>-webkit-transition-delay</item>
             <item>-webkit-transition-duration</item>
             <item>-webkit-user-select</item>
 
             <!-- Trident (a.k.a., MSHTML) CSS property extensions -->
             <item>zoom</item>
             <item>-ms-animation-name</item>
             <item>-ms-animation-duration</item>
             <item>-ms-animation-iteration</item>
             <item>-ms-animation-direction</item>
             <item>-ms-animation-delay</item>
             <item>-ms-animation-play-state</item>
             <item>-ms-animation-fill-mode</item>
             <item>-ms-box-sizing</item>
             <item>-ms-filter</item>
             <item>-ms-flex</item>
             <item>-ms-flex-align</item>
             <item>-ms-flex-direction</item>
             <item>-ms-flex-flow</item>
             <item>-ms-flex-item-align</item>
             <item>-ms-flex-line-pack</item>
             <item>-ms-flex-negative</item>
             <item>-ms-flex-order</item>
             <item>-ms-flex-pack</item>
             <item>-ms-flex-positive</item>
             <item>-ms-flex-position</item>
             <item>-ms-flex-preferred-size</item>
             <item>-ms-flex-wrap</item>
             <item>-ms-interpolation-mode</item>
             <item>-ms-linear-gradient</item>
             <item>-ms-overflow-style</item>
             <item>-ms-text-size-adjust</item>
             <item>-ms-transform</item>
             <item>-ms-transition</item>
             <item>-ms-user-select</item>
         </list>
 
         <list name="value keywords">
             <item>inherit</item>
             <item>unset</item>
             <item>auto</item>
             <!-- <item>revert</item> -->
         </list>
 
         <list name="values">
             <item>none</item>
             <item>hidden</item>
             <item>dotted</item>
             <item>dashed</item>
             <item>solid</item>
             <item>double</item>
             <item>groove</item>
             <item>ridge</item>
             <item>inset</item>
             <item>outset</item>
             <item>xx-small</item>
             <item>x-small</item>
             <item>small</item>
             <item>medium</item>
             <item>large</item>
             <item>x-large</item>
             <item>xx-large</item>
             <item>smaller</item>
             <item>larger</item>
             <item>italic</item>
             <item>oblique</item>
             <item>small-caps</item>
             <item>normal</item>
             <item>bold</item>
             <item>bolder</item>
             <item>lighter</item>
             <item>light</item>
             <item>transparent</item>
             <item>repeat</item>
             <item>repeat-x</item>
             <item>repeat-y</item>
             <item>no-repeat</item>
             <item>baseline</item>
             <item>sub</item>
             <item>super</item>
             <item>top</item>
             <item>text-top</item>
             <item>middle</item>
             <item>bottom</item>
             <item>text-bottom</item>
             <item>left</item>
             <item>right</item>
             <item>center</item>
             <item>justify</item>
             <item>konq-center</item>
             <item>disc</item>
             <item>circle</item>
             <item>square</item>
             <item>box</item>
             <item>decimal</item>
             <item>decimal-leading-zero</item>
             <item>lower-roman</item>
             <item>upper-roman</item>
             <item>lower-greek</item>
             <item>lower-alpha</item>
             <item>lower-latin</item>
             <item>upper-alpha</item>
             <item>upper-latin</item>
             <item>hebrew</item>
             <item>armenian</item>
             <item>georgian</item>
             <item>cjk-ideographic</item>
             <item>hiragana</item>
             <item>katakana</item>
             <item>hiragana-iroha</item>
             <item>katakana-iroha</item>
             <item>inline</item>
             <item>inline-block</item>
             <item>block</item>
             <item>list-item</item>
             <item>run-in</item>
             <item>compact</item>
             <item>marker</item>
             <item>table</item>
             <item>inline-table</item>
             <item>table-row-group</item>
             <item>table-header-group</item>
             <item>table-footer-group</item>
             <item>table-row</item>
             <item>table-column-group</item>
             <item>table-column</item>
             <item>table-cell</item>
             <item>table-caption</item>
             <item>crosshair</item>
             <item>default</item>
             <item>pointer</item>
             <item>move</item>
             <item>e-resize</item>
             <item>ne-resize</item>
             <item>nw-resize</item>
             <item>n-resize</item>
             <item>se-resize</item>
             <item>sw-resize</item>
             <item>s-resize</item>
             <item>w-resize</item>
             <item>text</item>
             <item>wait</item>
             <item>help</item>
             <item>above</item>
             <item>absolute</item>
             <item>always</item>
             <item>avoid</item>
             <item>below</item>
             <item>bidi-override</item>
             <item>blink</item>
             <item>both</item>
             <item>capitalize</item>
             <item>caption</item>
             <item>clip</item>
             <item>close-quote</item>
             <item>collapse</item>
             <item>condensed</item>
             <item>crop</item>
             <item>cross</item>
             <item>ellipsis</item>
             <item>ellipsis-word</item>
             <item>embed</item>
             <item>expanded</item>
             <item>extra-condensed</item>
             <item>extra-expanded</item>
             <item>fixed</item>
             <item>hand</item>
             <item>hide</item>
             <item>higher</item>
             <item>icon</item>
             <item>inside</item>
             <item>invert</item>
             <item>landscape</item>
             <item>level</item>
             <item>line-through</item>
             <item>loud</item>
             <item>lower</item>
             <item>lowercase</item>
             <item>ltr</item>
             <item>menu</item>
             <item>message-box</item>
             <item>mix</item>
             <item>narrower</item>
             <item>no-close-quote</item>
             <item>no-open-quote</item>
             <item>nowrap</item>
             <item>open-quote</item>
             <item>outside</item>
             <item>overline</item>
             <item>portrait</item>
             <item>pre</item>
             <item>pre-line</item>
             <item>pre-wrap</item>
             <item>relative</item>
             <item>rtl</item>
             <item>scroll</item>
             <item>semi-condensed</item>
             <item>semi-expanded</item>
             <item>separate</item>
             <item>show</item>
             <item>small-caption</item>
             <item>static</item>
             <item>static-position</item>
             <item>status-bar</item>
             <item>thick</item>
             <item>thin</item>
             <item>ultra-condensed</item>
             <item>ultra-expanded</item>
             <item>underline</item>
             <item>uppercase</item>
             <item>visible</item>
             <item>wider</item>
             <item>break</item>
             <item>serif</item>
             <item>sans-serif</item>
             <item>cursive</item>
             <item>fantasy</item>
             <item>monospace</item>
             <item>border-box</item>
             <item>content-box</item>
             <item>-epub-hyphens</item>
             <item>contain</item>
             <item>cover</item>
 
             <!-- transition and animation -->
             <item>all</item>
             <item>ease</item>
             <item>ease-in</item>
             <item>ease-out</item>
             <item>ease-in-out</item>
             <item>step-start</item>
             <item>step-end</item>
             <item>linear</item>
 
             <!-- animation -->
             <item>infinite</item>
             <item>reverse</item>
             <item>alternate</item>
             <item>alternate-reverse</item>
             <item>forwards</item>
             <item>backwards</item>
             <item>running</item>
             <item>paused</item>
         </list>
 
         <list name="colors">
             <item>black</item>
             <item>silver</item>
             <item>gray</item>
             <item>white</item>
             <item>maroon</item>
             <item>red</item>
             <item>purple</item>
             <item>fuchsia</item>
             <item>green</item>
             <item>lime</item>
             <item>olive</item>
             <item>yellow</item>
             <item>navy</item>
             <item>blue</item>
             <item>teal</item>
             <item>aqua</item>
             <item>orange</item>
             <item>aliceblue</item>
             <item>antiquewhite</item>
             <item>aquamarine</item>
             <item>azure</item>
             <item>beige</item>
             <item>bisque</item>
             <item>blanchedalmond</item>
             <item>blueviolet</item>
             <item>brown</item>
             <item>burlywood</item>
             <item>cadetblue</item>
             <item>chartreuse</item>
             <item>chocolate</item>
             <item>coral</item>
             <item>cornflowerblue</item>
             <item>cornsilk</item>
             <item>crimson</item>
             <item>cyan</item>
             <item>aqua</item>
             <item>darkblue</item>
             <item>darkcyan</item>
             <item>darkgoldenrod</item>
             <item>darkgray</item>
             <item>darkgreen</item>
             <item>darkgrey</item>
             <item>darkkhaki</item>
             <item>darkmagenta</item>
             <item>darkolivegreen</item>
             <item>darkorange</item>
             <item>darkorchid</item>
             <item>darkred</item>
             <item>darksalmon</item>
             <item>darkseagreen</item>
             <item>darkslateblue</item>
             <item>darkslategray</item>
             <item>darkslategrey</item>
             <item>darkturquoise</item>
             <item>darkviolet</item>
             <item>deeppink</item>
             <item>deepskyblue</item>
             <item>dimgray</item>
             <item>dimgrey</item>
             <item>dodgerblue</item>
             <item>firebrick</item>
             <item>floralwhite</item>
             <item>forestgreen</item>
             <item>gainsboro</item>
             <item>ghostwhite</item>
             <item>gold</item>
             <item>goldenrod</item>
             <item>greenyellow</item>
             <item>grey</item>
             <item>honeydew</item>
             <item>hotpink</item>
             <item>indianred</item>
             <item>indigo</item>
             <item>ivory</item>
             <item>khaki</item>
             <item>lavender</item>
             <item>lavenderblush</item>
             <item>lawngreen</item>
             <item>lemonchiffon</item>
             <item>lightblue</item>
             <item>lightcoral</item>
             <item>lightcyan</item>
             <item>lightgoldenrodyellow</item>
             <item>lightgray</item>
             <item>lightgreen</item>
             <item>lightgrey</item>
             <item>lightpink</item>
             <item>lightsalmon</item>
             <item>lightseagreen</item>
             <item>lightskyblue</item>
             <item>lightslategray</item>
             <item>lightslategrey</item>
             <item>lightsteelblue</item>
             <item>lightyellow</item>
             <item>limegreen</item>
             <item>linen</item>
             <item>magenta</item>
             <item>fuchsia</item>
             <item>mediumaquamarine</item>
             <item>mediumblue</item>
             <item>mediumorchid</item>
             <item>mediumpurple</item>
             <item>mediumseagreen</item>
             <item>mediumslateblue</item>
             <item>mediumspringgreen</item>
             <item>mediumturquoise</item>
             <item>mediumvioletred</item>
             <item>midnightblue</item>
             <item>mintcream</item>
             <item>mistyrose</item>
             <item>moccasin</item>
             <item>navajowhite</item>
             <item>oldlace</item>
             <item>olivedrab</item>
             <item>orangered</item>
             <item>orchid</item>
             <item>palegoldenrod</item>
             <item>palegreen</item>
             <item>paleturquoise</item>
             <item>palevioletred</item>
             <item>papayawhip</item>
             <item>peachpuff</item>
             <item>peru</item>
             <item>pink</item>
             <item>plum</item>
             <item>powderblue</item>
             <item>rosybrown</item>
             <item>royalblue</item>
             <item>saddlebrown</item>
             <item>salmon</item>
             <item>sandybrown</item>
             <item>seagreen</item>
             <item>seashell</item>
             <item>sienna</item>
             <item>skyblue</item>
             <item>slateblue</item>
             <item>slategray</item>
             <item>slategrey</item>
             <item>snow</item>
             <item>springgreen</item>
             <item>steelblue</item>
             <item>tan</item>
             <item>thistle</item>
             <item>tomato</item>
             <item>turquoise</item>
             <item>violet</item>
             <item>wheat</item>
             <item>whitesmoke</item>
             <item>yellowgreen</item>
             <item>rebeccapurple</item>
 
             <item>ActiveBorder</item>
             <item>ActiveCaption</item>
             <item>AppWorkspace</item>
             <item>Background</item>
             <item>ButtonFace</item>
             <item>ButtonHighlight</item>
             <item>ButtonShadow</item>
             <item>ButtonText</item>
             <item>CaptionText</item>
             <item>GrayText</item>
             <item>Highlight</item>
             <item>HighlightText</item>
             <item>InactiveBorder</item>
             <item>InactiveCaption</item>
             <item>InactiveCaptionText</item>
             <item>InfoBackground</item>
             <item>InfoText</item>
             <item>Menu</item>
             <item>MenuText</item>
             <item>Scrollbar</item>
             <item>ThreeDDarkShadow</item>
             <item>ThreeDFace</item>
             <item>ThreeDHighlight</item>
             <item>ThreeDLightShadow</item>
             <item>ThreeDShadow</item>
             <item>Window</item>
             <item>WindowFrame</item>
             <item>WindowText</item>
         </list>
 
         <list name="functions">
             <item>attr</item>
             <item>calc</item>
             <item>hsl</item>
             <item>hsla</item>
             <item>linear-gradient</item>
             <item>radial-gradient</item>
             <item>repeating-linear-gradient</item>
             <item>repeating-radial-gradient</item>
             <item>rgb</item>
             <item>rgba</item>
             <item>var</item>
             <item>url</item>
 
             <!-- clip -->
             <item>rect</item>
 
             <!-- shape-outside and clip-path -->
             <item>inset</item>
             <item>circle</item>
             <item>ellipse</item>
             <item>polygon</item>
 
             <!-- filter and backdrop-filter -->
             <item>blur</item>
             <item>brightness</item>
             <item>contrast</item>
             <item>drop-shadow</item>
             <item>grayscale</item>
             <item>hue-rotate</item>
             <item>invert</item>
             <item>opacity</item>
             <item>saturate</item>
             <item>sepia</item>
 
             <!-- grid-template-columns and grid-template-rows -->
             <item>max-content</item>
             <item>min-content</item>
             <item>minmax</item>
             <item>fix-content</item>
             <item>repeat</item>
 
             <!-- transition and animation -->
             <item>cubic-bezier</item>
             <item>frames</item>
             <item>steps</item>
 
             <!-- transform -->
             <item>matrix</item>
             <item>matrix3d</item>
             <item>perspective</item>
             <item>rotate</item>
             <item>rotate3d</item>
             <item>rotateX</item>
             <item>rotateY</item>
             <item>rotateZ</item>
             <item>scale</item>
             <item>scale3d</item>
             <item>scaleX</item>
             <item>scaleY</item>
             <item>scaleZ</item>
             <item>skew</item>
             <item>skewX</item>
             <item>skewY</item>
             <item>translate</item>
             <item>translate3d</item>
             <item>translateX</item>
             <item>translateY</item>
             <item>translateZ</item>
 
             <!-- inner @font-face -->
             <item>local</item>
             <item>format</item>
         </list>
 
         <list name="medias">
             <!-- types -->
             <item>all</item>
             <item>print</item>
             <item>screen</item>
             <item>speech</item>
 
             <!-- features -->
             <item>any-pointer</item>
             <item>any-hover</item>
             <item>aspect-ratio</item>
             <item>color</item>
             <item>color-gamut</item>
             <item>color-index</item>
             <item>display-mode</item>
             <item>grid</item>
             <item>height</item>
             <item>hover</item>
             <item>max-aspect-ratio</item>
             <item>max-color</item>
             <item>max-color-index</item>
             <item>max-device-aspect-ratio</item>
             <item>max-device-height</item>
             <item>max-device-width</item>
             <item>max-height</item>
             <item>max-monochrome</item>
             <item>max-resolution</item>
             <item>max-width</item>
             <item>min-aspect-ratio</item>
             <item>min-color</item>
             <item>min-color-index</item>
             <item>min-device-aspect-ratio</item>
             <item>min-device-height</item>
             <item>min-device-width</item>
             <item>min-height</item>
             <item>min-monochrome</item>
             <item>min-resolution</item>
             <item>min-width</item>
             <item>monochrome</item>
             <item>orientation</item>
             <item>pointer</item>
             <item>resolution</item>
             <item>scan</item>
             <item>update</item>
             <item>width</item>
         </list>
 
         <!-- prefixed by :: -->
         <list name="pseudoelements">
             <item>after</item>
             <item>before</item>
             <item>cue</item>
             <item>first-letter</item>
             <item>first-line</item>
             <item>selection</item>
 
             <!-- experimental -->
             <item>backdrop</item>
             <item>placeholder</item>
             <!-- <item>marker</item> -->
             <item>slotted</item>
             <!-- <item>spelling-error</item> -->
             <!-- <item>grammar-error</item> -->
 
             <!-- UI pseudo-classes -->
             <item>value</item>
             <item>choices</item>
             <item>repeat-item</item>
             <item>repeat-index</item>
 
             <item>-moz-progress-bar</item>
             <item>-moz-range-progress</item>
             <item>-moz-range-thumb</item>
             <item>-moz-range-track</item>
             <item>-moz-selection</item>
             <item>-ms-fill</item>
             <item>-ms-fill-lower</item>
             <item>-ms-fill-upper</item>
             <item>-ms-thumb</item>
             <item>-ms-track</item>
             <item>-webkit-progress-bar</item>
             <item>-webkit-progress-value</item>
             <item>-webkit-slider-runnable-track</item>
             <item>-webkit-slider-thumb</item>
         </list>
 
         <!-- prefixed by : -->
         <list name="pseudoclasses">
             <item>active</item>
             <item>any-link</item>
             <item>checked</item>
             <item>default</item>
             <item>defined</item>
             <!-- <item>dir</item> -->
             <item>disabled</item>
             <item>empty</item>
             <item>enabled</item>
             <item>first-child</item>
             <item>first-of-type</item>
             <item>fullscreen</item>
             <item>focus</item>
             <item>focus-within</item>
             <item>host</item>
             <item>hover</item>
             <item>in-range</item>
             <item>indeterminate</item>
             <item>invalid</item>
             <item>lang</item>
             <item>last-child</item>
             <item>last-of-type</item>
             <item>link</item>
             <item>not</item>
             <item>nth-child</item>
             <item>nth-last-child</item>
             <item>nth-last-of-type</item>
             <item>nth-of-type</item>
             <item>only-child</item>
             <item>only-of-type</item>
             <item>optional</item>
             <item>out-of-range</item>
             <item>placeholder-shown</item>
             <item>read-only</item>
             <item>read-write</item>
             <item>required</item>
             <item>root</item>
             <item>scope</item>
             <item>target</item>
             <item>valid</item>
             <item>visited</item>
 
             <!-- pseudo-elements -->
             <item>after</item>
             <item>before</item>
             <item>cue</item>
             <item>first-letter</item>
             <item>first-line</item>
             <item>selection</item>
         </list>
 
-        <list name="pseudoclass-not">
+        <list name="pseudoclass-selector">
             <item>not</item>
+            <item>matches</item>
         </list>
 
         <list name="pseudoclasses-@page">
             <item>blank</item>
             <item>first</item>
             <item>left</item>
             <item>recto</item>
             <item>right</item>
             <item>verso</item>
         </list>
 
         <list name="at-rules">
             <item>@character</item>
             <item>@charset</item>
             <item>@import</item>
             <item>@namespace</item>
         </list>
 
         <list name="nested at-rules">
             <item>@document</item>
             <item>@media</item>
             <item>@supports</item>
         </list>
 
         <list name="@viewport">
             <item>@viewport</item>
         </list>
 
         <list name="within-@viewport">
             <item>min-width</item>
             <item>max-width</item>
             <item>width</item>
             <item>min-height</item>
             <item>max-height</item>
             <item>height</item>
             <item>zoom</item>
             <item>min-zoom</item>
             <item>max-zoom</item>
             <item>user-zoom</item>
             <item>orientation</item>
             <item>viewport-fit</item>
         </list>
 
         <list name="@page">
             <item>@page</item>
         </list>
 
         <list name="within-@page">
             <item>size</item>
             <item>marks</item>
             <item>bleed</item>
         </list>
 
         <list name="@font-face">
             <item>@font-face</item>
         </list>
 
         <list name="within-@font-face">
             <item>font-display</item>
             <item>font-family</item>
             <item>font-stretch</item>
             <item>font-style</item>
             <item>font-weight</item>
             <item>font-variant</item>
             <item>font-feature-settings</item>
             <item>font-variation-settings</item>
             <item>src</item>
             <item>unicode-range</item>
         </list>
 
         <list name="@keyframes">
             <item>@keyframes</item>
         </list>
 
         <list name="within-@keyframes">
             <item>from</item>
             <item>to</item>
         </list>
 
         <list name="media operators">
             <item>and</item>
             <item>only</item>
             <item>not</item>
         </list>
 
         <contexts>
             <context name="Base" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="RuleSet" char="{" beginRegion="ruleset" />
                 <DetectChar attribute="At Rule" context="SelectAtRule" char="@" lookAhead="true" />
                 <!-- find selectors // .class #id :hover :nth-child(2n+1) [type="search"] -->
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudo" char=":" />
                 <DetectChar attribute="Selector Attribute" context="SelectorAttr" char="[" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <AnyChar attribute="Operator" context="#stay" String="*>+~|" />
                 <RegExpr attribute="Selector Id" context="#stay" String="#[-]?(&nmstart;)(&nmchar;)*" />
                 <RegExpr attribute="Selector Class" context="#stay" String="\.([a-zA-Z0-9\-_]|[\x80-\xFF]|\\[0-9A-Fa-f]{1,6})*" />
                 <RegExpr attribute="Selector Tag" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
             </context>
 
             <context name="FindSelector" attribute="Normal Text" lineEndContext="#stay">
                 <IncludeRules context="FindComments" />
                 <!-- find selectors // .class #id :hover :nth-child(2n+1) [type="search"] -->
                 <DetectChar attribute="Selector Attribute" context="SelectorAttr" char="[" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <AnyChar attribute="Operator" context="#stay" String="*>+~|" />
                 <RegExpr attribute="Selector Id" context="#stay" String="#[-]?(&nmstart;)(&nmchar;)*" />
                 <RegExpr attribute="Selector Class" context="#stay" String="\.([a-zA-Z0-9\-_]|[\x80-\xFF]|\\[0-9A-Fa-f]{1,6})*" />
                 <RegExpr attribute="Selector Tag" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
             </context>
 
             <!-- find functions // rgba(255,255,255,0.75) -->
             <context name="FindFunctions" attribute="Normal Text" lineEndContext="#stay">
                 <RegExpr attribute="Function" context="Function" String="[a-z\-]{2,}\(" lookAhead="true" />
             </context>
 
             <!-- find values //  10px 12pt 2.5em 1rem 75% #ffcc99 red solid -->
             <context name="FindValues" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Annotation" context="Annotation" char="!" />
                 <keyword attribute="Value Keyword" context="#stay" String="value keywords" />
                 <keyword attribute="Value" context="#stay" String="values" />
                 <keyword attribute="Color" context="#stay" String="colors" />
-                <RegExpr attribute="Color" context="#stay" String="#([0-9A-Fa-f]{3}){1,2}\b" />
-                <RegExpr attribute="Number" context="FindUnits" String="[-+]?[0-9.]+(?![-+])" />
+                <RegExpr attribute="Color" context="#stay" String="#([0-9A-Fa-f]{3,4}){1,2}\b" />
+                <RegExpr attribute="Number" context="FindUnits" String="[-+]?([0-9]+(\.[0-9]+)?|\.[0-9]+)([eE][+-]?[0-9]+)?(?![-+])" />
                 <RegExpr attribute="Normal Text" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
             </context>
 
             <context name="Annotation" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
                 <WordDetect attribute="Annotation" context="#pop" String="important" />
             </context>
 
             <context name="FindUnits" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
-                <RegExpr attribute="Unit" context="#stay" String="(%|(em|ex|ch|rem|vw|vh|vm|px|in|cm|mm|pt|pc|deg|rad|grad|turn|ms|s|Hz|kHz)\b)(?![-+])" />
+                <!-- https://drafts.csswg.org/css-values-4/#lengths -->
+                <RegExpr attribute="Unit" context="#stay" String="(%|(em|ex|cap|ch|ic|rem|lh|rlh|vw|vh|vi|vb|vmin|vmax|cm|mm|Q|in|pc|pt|px|deg|rad|grad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|x)\b)(?![-+])" />
             </context>
 
             <!-- find strings // "some words" 'some words' -->
             <context name="FindStrings" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="String" context="StringDQ" char="&quot;" />
                 <DetectChar attribute="String" context="StringSQ" char="'" />
             </context>
 
             <!-- find comments // /* comment */ -->
             <context name="FindComments" attribute="Normal Text" lineEndContext="#stay">
                 <Detect2Chars attribute="Comment" context="IsComments" char="/" char1="*" lookAhead="true"/>
                 <Detect2Chars attribute="Error" context="Error" char="/" char1="/" />
             </context>
 
             <context name="Error" attribute="Error" lineEndContext="#pop">
                 <RegExpr attribute="Error" context="#pop" String=".*" />
             </context>
 
             <context name="IsComments" attribute="Normal Text" lineEndContext="#stay">
                 <RegExpr attribute="Region Marker" context="#pop" String="/\*\s*BEGIN\b.*\*/" beginRegion="UserDefined" />
                 <RegExpr attribute="Region Marker" context="#pop" String="/\*\s*END\b.*\*/" endRegion="UserDefined" />
                 <Detect2Chars attribute="Comment" context="Comment" char="/" char1="*" beginRegion="comment" />
             </context>
 
             <context name="SelectAtRule" attribute="At Rule" lineEndContext="#pop">
                 <keyword attribute="At Rule" context="#pop!NestedAtRule" String="nested at-rules" />
                 <keyword attribute="At Rule" context="#pop!AtRule" String="at-rules" />
                 <keyword attribute="At Rule" context="#pop!@keyframes" String="@keyframes" />
                 <keyword attribute="At Rule" context="#pop!@viewport" String="@viewport" />
                 <keyword attribute="At Rule" context="#pop!@font-face" String="@font-face" />
                 <keyword attribute="At Rule" context="#pop!@page" String="@page" />
                 <RegExpr attribute="At Rule" context="#pop!UnknownAtRule" String="@[a-zA-Z0-9\-_]+\b" />
             </context>
 
             <context name="@keyframes" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="Within-@keyframes" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="Within-@keyframes" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="#pop#pop" char="}" endRegion="ruleset" />
                 <DetectChar attribute="Normal Text" context="RuleSet" char="{" beginRegion="ruleset" />
                 <keyword attribute="Value" context="#stay" String="within-@keyframes" />
                 <RegExpr attribute="Value" context="#stay" String="[-+]?[0-9.]+%" />
             </context>
 
             <context name="@viewport" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudo" char=":" />
                 <DetectChar attribute="Normal Text" context="#pop!Within-@viewport" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="Within-@viewport" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <keyword attribute="Property" context="IsProperty" String="within-@viewport" />
                 <IncludeRules context="RuleSet" />
             </context>
 
             <context name="@font-face" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="#pop!Within-@font-face" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="Within-@font-face" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <keyword attribute="Property" context="IsProperty" String="within-@font-face" />
                 <RegExpr attribute="Unknown Property" context="IsProperty" String="[A-Za-z_-]+\b" />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
             </context>
 
             <context name="@page" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudo-@page" char=":" />
                 <DetectChar attribute="Normal Text" context="#pop!Within-@page" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="SelectorPseudo-@page" attribute="Selector Pseudo" lineEndContext="#pop">
                 <keyword attribute="Selector Pseudo" context="#pop" String="pseudoclasses-@page" />
                 <RegExpr attribute="Selector Pseudo" context="#pop" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="Within-@page" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <keyword attribute="Property" context="IsProperty" String="within-@page" />
                 <IncludeRules context="RuleSet" />
             </context>
 
             <context name="IsProperty" attribute="Error" lineEndContext="#stay">
                 <DetectSpaces attribute="Normal Text" />
                 <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
             </context>
 
             <context name="NestedAtRule" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="NestedBase" char="{" beginRegion="ruleset" />
                 <IncludeRules context="AtRuleValue" />
             </context>
 
             <context name="NestedBase" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop#pop" char="}" endRegion="ruleset" />
                 <IncludeRules context="Base" />
             </context>
 
             <context name="AtRule" attribute="Normal Text" lineEndContext="#pop">
                 <DetectSpaces />
                 <DetectChar attribute="Separator Symbol" context="#pop" char=";" />
                 <IncludeRules context="AtRuleValue" />
             </context>
 
             <context name="UnknownAtRule" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Separator Symbol" context="#pop" char=";" />
                 <DetectChar attribute="Normal Text" context="#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
                 <IncludeRules context="AtRuleValue" />
             </context>
 
             <context name="AtRuleValue" attribute="Normal Text" lineEndContext="#stay">
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <keyword attribute="Keyword" context="#stay" String="media operators" />
                 <RegExpr attribute="Property" context="#stay" String="[A-Za-z_-]+(?=\s*:)" />
                 <keyword attribute="Value" context="#stay" String="medias" />
                 <IncludeRules context="FindValues" />
             </context>
 
             <context name="SelectorAttr" attribute="Selector Attribute" lineEndContext="#stay">
                 <DetectChar attribute="Selector Attribute" context="#pop" char="]" />
                 <IncludeRules context="FindStrings" />
                 <DetectChar   attribute="Operator" context="SelectorAttrValue" char="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="~" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="^" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="$" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="*" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="|" char1="=" />
                 <DetectIdentifier />
             </context>
 
             <context name="SelectorAttrValue" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="Selector Attribute" context="#pop#pop" char="]" />
                 <DetectIdentifier />
             </context>
 
             <context name="SelectorPseudo" attribute="Selector Pseudo" lineEndContext="#pop">
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudoElements" char=":" />
-                <keyword attribute="Selector Pseudo" context="SelectorPseudoValueSelector" String="pseudoclass-not" />
+                <keyword attribute="Selector Pseudo" context="SelectorPseudoValueSelector" String="pseudoclass-selector" />
                 <keyword attribute="Selector Pseudo" context="SelectorPseudoValue" String="pseudoclasses" />
                 <RegExpr attribute="Selector Pseudo" context="SelectorPseudoValue" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="SelectorPseudoElements" attribute="Selector Pseudo" lineEndContext="#pop#pop">
                 <keyword attribute="Selector Pseudo" context="#pop!SelectorPseudoValue" String="pseudoelements" />
                 <RegExpr attribute="Selector Pseudo" context="#pop!SelectorPseudoValue" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="SelectorPseudoValueSelector" attribute="Selector Pseudo" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop#pop">
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudoValueCloseSelector" char="(" />
             </context>
 
             <context name="SelectorPseudoValueCloseSelector" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Selector Pseudo" context="#pop#pop#pop" char=")" />
                 <DetectChar attribute="Error" context="#pop#pop#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <IncludeRules context="FindSelector" />
             </context>
 
             <context name="SelectorPseudoValue" attribute="Selector Pseudo" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop#pop">
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudoValueClose" char="(" />
             </context>
 
             <context name="SelectorPseudoValueClose" attribute="Selector Pseudo" lineEndContext="#pop#pop#pop">
                 <DetectChar attribute="Selector Pseudo" context="#pop#pop#pop" char=")" />
                 <DetectIdentifier />
             </context>
 
             <context name="Comment" attribute="Comment" lineEndContext="#stay">
                 <DetectSpaces />
                 <Detect2Chars attribute="Comment" context="#pop#pop" char="*" char1="/" endRegion="comment" />
                 <IncludeRules context="##Alerts" />
                 <DetectIdentifier />
             </context>
 
             <context name="RuleSet" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
                 <RegExpr attribute="Property" context="Rule" String="[A-Za-z_-]+(?=\s*:)" lookAhead="true" />
                 <IncludeRules context="Base" />
                 <RegExpr attribute="Normal Text" context="#stay" String="[A-Za-z_-]+" />
                 <!-- auto-completion only, includes by previous rule -->
                 <keyword attribute="Normal Text" context="#stay" String="properties" />
             </context>
 
             <context name="Rule" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
                 <Detect2Chars attribute="Variable" context="IsVariable" char="-" char1="-" />
                 <keyword attribute="Property" context="#stay" String="properties" />
                 <RegExpr attribute="Unknown Property" context="#stay" String="[^:]+" />
             </context>
 
             <context name="IsVariable" attribute="Normal Text" lineEndContext="#pop">
                 <DetectChar attribute="Normal Text" context="#pop!RuleParameters" char=":" />
                 <RegExpr attribute="Variable" context="#stay" String="[^:]+" />
             </context>
 
             <context name="RuleParameters" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <IncludeRules context="FindValues" />
                 <!-- Jump out conditions -->
                 <DetectChar attribute="Separator Symbol" context="#pop#pop" char=";" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <DetectChar attribute="Normal Text" context="#pop#pop#pop" char="}" endRegion="ruleset" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
             <context name="Function" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Function" context="FunctionParameters" char="(" />
                 <StringDetect attribute="Function" context="FunctionVar" String="var(" />
                 <StringDetect attribute="Function" context="FunctionUrl" String="url(" />
                 <StringDetect attribute="Function" context="FunctionCalc" String="calc(" />
                 <keyword attribute="Function" context="#stay" String="functions" />
                 <RegExpr attribute="Normal Text" context="#stay" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="FunctionVar" attribute="Variable" lineEndContext="#stay" fallthrough="true" fallthroughContext="#pop!FunctionParameters">
                 <DetectSpaces />
                 <RegExpr attribute="Variable" context="#pop!FunctionParameters" String="--[^ \t\),]+" />
             </context>
 
             <context name="FunctionCalc" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Function" context="#pop#pop" char=")" />
                 <IncludeRules context="Calc" />
             </context>
 
             <context name="NestedCalc" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop" char=")" />
                 <IncludeRules context="Calc" />
             </context>
 
             <context name="Calc" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <DetectChar attribute="Normal Text" context="NestedCalc" char="(" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <IncludeRules context="FindValues" />
                 <RegExpr attribute="Operator" context="#stay" String="[-](?=$|[ \t(,;])|[+](?=$|[^0-9)])|[/*]" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
             <context name="FunctionUrl" attribute="Normal Text" lineEndContext="#stay" fallthrough="true" fallthroughContext="UrlValue">
                 <DetectSpaces />
                 <IncludeRules context="FindStrings" />
                 <DetectChar attribute="Function" context="#pop#pop" char=")" />
             </context>
 
             <context name="UrlValue" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="Function" context="#pop#pop#pop" char=")" />
             </context>
 
             <context name="FunctionParameters" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Function" context="#pop#pop" char=")" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindValues" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
             </context>
 
             <!-- string contexts -->
             <context name="StringDQ" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="String" context="#pop" char="&quot;" />
                 <IncludeRules context="InsideString" />
             </context>
 
             <context name="StringSQ" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="String" context="#pop" char="'" />
                 <IncludeRules context="InsideString" />
             </context>
 
             <context name="InsideString" attribute="String" lineEndContext="#stay">
                 <RegExpr attribute="SpecialChar" context="#stay" String="\\([0-9A-Fa-f]{1,6}|.?)" />
                 <RegExpr attribute="String" context="#stay" String="\\?[^&quot;'\\]+" />
             </context>
 
         </contexts>
 
         <itemDatas>
             <itemData name="Normal Text" defStyleNum="dsNormal" spellChecking="false"/>
             <itemData name="At Rule" defStyleNum="dsImport" spellChecking="false"/>
             <itemData name="Keyword" defStyleNum="dsKeyword" spellChecking="false"/>
             <itemData name="Property" defStyleNum="dsKeyword" spellChecking="false"/>
             <itemData name="Unknown Property" defStyleNum="dsNormal" spellChecking="false"/>
             <itemData name="String" defStyleNum="dsString"/>
             <itemData name="SpecialChar" defStyleNum="dsSpecialChar" spellChecking="false"/>
             <itemData name="Operator" defStyleNum="dsOperator" spellChecking="false"/>
             <itemData name="Separator Symbol" defStyleNum="dsOperator" spellChecking="false"/>
             <itemData name="Value" defStyleNum="dsDecVal" spellChecking="false"/>
             <itemData name="Number" defStyleNum="dsDecVal" spellChecking="false"/>
             <itemData name="Value Keyword" defStyleNum="dsBuiltIn" spellChecking="false"/>
             <itemData name="Color" defStyleNum="dsConstant" spellChecking="false"/>
             <itemData name="Unit" defStyleNum="dsDataType" spellChecking="false"/>
             <itemData name="Variable" defStyleNum="dsVariable" spellChecking="false"/>
             <itemData name="Function" defStyleNum="dsFunction" spellChecking="false"/>
             <itemData name="Annotation" defStyleNum="dsAttribute" spellChecking="false"/>
             <itemData name="Selector Id" defStyleNum="dsPreprocessor" bold="1" spellChecking="false"/>
             <itemData name="Selector Class" defStyleNum="dsFunction" spellChecking="false"/>
             <itemData name="Selector Attribute" defStyleNum="dsExtension" spellChecking="false"/>
             <itemData name="Selector Pseudo" defStyleNum="dsInformation" italic="1" spellChecking="false"/>
             <itemData name="Selector Tag" defStyleNum="dsNormal" spellChecking="false"/>
             <itemData name="Comment" defStyleNum="dsComment" />
             <itemData name="Region Marker" defStyleNum="dsRegionMarker" spellChecking="false"/>
             <itemData name="Error" defStyleNum="dsError" spellChecking="false"/>
         </itemDatas>
     </highlighting>
 
     <general>
         <keywords casesensitive="0" weakDeliminator="-%@" />
         <comments>
             <comment name="multiLine" start="/*" end="*/" />
         </comments>
     </general>
 
 </language>
diff --git a/data/syntax/sass.xml b/data/syntax/sass.xml
new file mode 100644
index 0000000..bd99a71
--- /dev/null
+++ b/data/syntax/sass.xml
@@ -0,0 +1,467 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE language SYSTEM "language.dtd"
+[
+  <!-- https://www.w3.org/TR/CSS22/syndata.html#tokenization -->
+  <!ENTITY nmstart "[_a-zA-Z]|(\\[0-9a-fA-F]{1,6})|(\\[^\n\r\f0-9a-fA-F])">
+  <!ENTITY nmchar  "[_a-zA-Z0-9-]|(\\[0-9a-fA-F]{1,6})|(\\[^\n\r\f0-9a-fA-F])">
+]>
+
+<language name="SASS" version="1" kateversion="5.53" section="Markup" extensions="*.sass" indenter="cstyle" mimetype="text/css" author="Jonathan Poelen (jonathan.poelen@gmail.com)" license="MIT" priority="5">
+
+    <highlighting>
+        <list name="properties">
+            <include>properties##SCSS</include>
+            <include>sub-properties##SCSS</include>
+        </list>
+        <list name="special values"><include>special values##SCSS</include></list>
+        <list name="value keywords"><include>value keywords##SCSS</include></list>
+        <list name="values"><include>values##SCSS</include></list>
+        <list name="colors"><include>colors##SCSS</include></list>
+        <list name="functions"><include>functions##SCSS</include></list>
+        <list name="medias"><include>medias##SCSS</include></list>
+        <list name="pseudoelements"><include>pseudoelements##SCSS</include></list>
+        <list name="pseudoclasses"><include>pseudoclasses##SCSS</include></list>
+        <list name="pseudoclass-selector"><include>pseudoclass-selector##SCSS</include></list>
+        <list name="pseudoclasses-@page"><include>pseudoclasses-@page##SCSS</include></list>
+        <list name="at-rules"><include>at-rules##SCSS</include></list>
+        <list name="nested at-rules"><include>nested at-rules##SCSS</include></list>
+        <list name="inline and nested at-rules"><include>inline and nested at-rules##SCSS</include></list>
+        <list name="@extend"><include>@extend##SCSS</include></list>
+        <list name="@if"><include>@if##SCSS</include></list>
+        <list name="@else"><include>@else##SCSS</include></list>
+        <list name="@mixin"><include>@mixin##SCSS</include></list>
+        <list name="@viewport"><include>@viewport##SCSS</include></list>
+        <list name="@page"><include>@page##SCSS</include></list>
+        <list name="@keyframes-@font-face">
+            <include>@font-face##SCSS</include>
+            <include>@keyframes##SCSS</include>
+        </list>
+        <list name="media operators"><include>media operators##SCSS</include></list>
+        <list name="operators"><include>operators##SCSS</include></list>
+        <list name="annotations"><include>annotations##SCSS</include></list>
+
+        <contexts>
+            <context name="Base" attribute="Normal Text" lineEndContext="#stay">
+                <IncludeRules context="FindCommentsColumn0" />
+                <IncludeRules context="FindComments" />
+                <RegExpr attribute="Property" context="Rule" String="\s*[-_A-Za-z]+(/\*.*\*/)?\s*(?=:(\s|$))" lookAhead="true" column="0" />
+                <DetectSpaces />
+                <DetectChar attribute="At Rule" context="@mixin" char="=" firstNonSpace="true" />
+                <DetectChar attribute="At Rule" context="AtRule" char="+" firstNonSpace="true" />
+                <DetectChar attribute="At Rule" context="SelectAtRule" char="@" lookAhead="true" />
+                <!-- find selectors // .class #id :hover :nth-child(2n+1) [type="search"] -->
+                <DetectChar attribute="Selector Attribute" context="SelectorAttr" char="[" />
+                <DetectChar attribute="Separator Symbol" context="#stay" char="," />
+                <AnyChar attribute="Operator" context="#stay" String="&amp;*>+~|" />
+                <RegExpr attribute="Selector Pseudo" context="SelectorPseudo" String=":(?=[a-z:])" />
+                <RegExpr attribute="Selector Id" context="#stay" String="#[-]?(&nmstart;)(&nmchar;)*" />
+                <RegExpr attribute="Selector Class" context="#stay" String="\.([a-zA-Z0-9\-_]|[\x80-\xFF]|\\[0-9A-Fa-f]{1,6})*" />
+                <RegExpr attribute="Placeholder Selector" context="#stay" String="%[_a-zA-Z][_a-zA-Z\-]*" />
+                <RegExpr attribute="Selector Tag" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*(?=\s|:?[#.&amp;[*>+~|,]|:[a-z:])" />
+                <RegExpr attribute="Variable" context="VariableDefine" String="\$[a-zA-Z0-9\-_]+(?=\s*:)" />
+                <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
+                <DetectChar attribute="Normal Text" context="Rule" char=":" lookAhead="true" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="FindSelector" attribute="Normal Text" lineEndContext="#stay">
+                <AnyChar attribute="Error" context="#stay" String=",&amp;" />
+                <AnyChar attribute="Operator" context="#stay" String="*>+~|" />
+                <!-- find selectors // .class #id :hover :nth-child(2n+1) [type="search"] -->
+                <DetectChar attribute="Selector Pseudo" context="SelectorPseudo" char=":" />
+                <DetectChar attribute="Selector Attribute" context="SelectorAttr" char="[" />
+                <IncludeRules context="FindComments" />
+                <RegExpr attribute="Selector Id" context="#stay" String="#[-]?(&nmstart;)(&nmchar;)*" />
+                <RegExpr attribute="Selector Class" context="#stay" String="\.([a-zA-Z0-9\-_]|[\x80-\xFF]|\\[0-9A-Fa-f]{1,6})*" />
+                <RegExpr attribute="Placeholder Selector" context="#stay" String="%[_a-zA-Z][_a-zA-Z\-]*" />
+                <RegExpr attribute="Selector Tag" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
+                <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="VariableDefine" attribute="Normal Text" lineEndContext="#pop">
+                <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
+            </context>
+
+            <context name="Interpolation" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <DetectChar attribute="Interpolation" context="#pop" char="}" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <IncludeRules context="FindValues" />
+                <!-- auto-completion only -->
+                <keyword attribute="Normal Text" context="#stay" String="functions" />
+            </context>
+
+
+            <!-- find functions // rgba(255,255,255,0.75) -->
+            <!-- same as SCSS -->
+            <context name="FindFunctions" attribute="Normal Text" lineEndContext="#stay">
+                <RegExpr attribute="Function" context="Function" String="[a-z\-]{2,}\(" lookAhead="true" />
+            </context>
+
+            <!-- find values //  10px 12pt 2.5em 1rem 75% #ffcc99 red solid -->
+            <!-- same as SCSS -->
+            <context name="FindValues" attribute="Normal Text" lineEndContext="#stay">
+                <DetectChar attribute="Annotation" context="Annotation" char="!" />
+                <keyword attribute="Operator" context="#stay" String="operators" />
+                <keyword attribute="Value Keyword" context="#stay" String="value keywords" />
+                <keyword attribute="Value" context="#stay" String="values" />
+                <keyword attribute="Color" context="#stay" String="colors" />
+                <RegExpr attribute="Number" context="FindUnits" String="([0-9]+(\.[0-9]+)?|\.[0-9]+)([eE][+-]?[0-9]+)?" />
+                <RegExpr attribute="Color" context="#stay" String="#([0-9A-Fa-f]{3,4}){1,2}\b" />
+                <RegExpr attribute="Variable" context="#stay" String="\$[a-zA-Z0-9\-_]+" />
+                <keyword attribute="Value Keyword" context="#stay" String="special values" />
+                <RegExpr attribute="Normal Text" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
+                <AnyChar attribute="Operator" context="#stay" String="*/+%-" />
+                <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="Annotation" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
+                <keyword attribute="Annotation" context="#pop" String="annotations" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="FindUnits" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
+                <RegExpr attribute="Unit" context="#pop" String="(%|(em|ex|cap|ch|ic|rem|lh|rlh|vw|vh|vi|vb|vmin|vmax|cm|mm|Q|in|pc|pt|px|deg|rad|grad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|x)\b)" />
+            </context>
+
+            <!-- find strings // "some words" 'some words' -->
+            <!-- same as SCSS -->
+            <context name="FindStrings" attribute="Normal Text" lineEndContext="#stay">
+                <DetectChar attribute="String" context="StringDQ" char="&quot;" />
+                <DetectChar attribute="String" context="StringSQ" char="'" />
+            </context>
+
+            <!-- find comments // and /* at the beginning of line -->
+            <context name="FindCommentsColumn0" attribute="Comment" lineEndContext="#stay">
+                <!-- (\s*)(?=/[*/]) is not selected when the match is empty -->
+                <RegExpr attribute="Normal Text" context="Comment" String="(\s+)(?=/[*/])" dynamic="true" column="0" />
+                <RegExpr attribute="Comment" context="Comment" String="()/[*/]" dynamic="true" column="0" />
+            </context>
+
+            <!-- find comments // and /* -->
+            <context name="FindComments" attribute="Comment" lineEndContext="#stay">
+                <Detect2Chars attribute="Comment" context="IsInlineComment" char="/" char1="/" />
+                <Detect2Chars attribute="Comment" context="IsInlineComment2" char="/" char1="*" />
+            </context>
+
+            <context name="Comment" attribute="Comment" lineEndContext="#stay" dynamic="true" fallthrough="true" fallthroughContext="IsInlineComment">
+                <RegExpr attribute="Comment" context="IsInlineComment" String="%1\s|\s*$" dynamic="true" column="0" />
+                <DetectSpaces attribute="Normal Text" context="#pop" lookAhead="true" column="0" />
+                <RegExpr attribute="Comment" context="#pop" String="." lookAhead="true" column="0"/>
+            </context>
+
+            <context name="IsInlineComment" attribute="Comment" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="##Alerts" />
+                <DetectIdentifier />
+            </context>
+
+            <context name="IsInlineComment2" attribute="Comment" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="##Alerts" />
+                <DetectIdentifier />
+                <Detect2Chars attribute="Comment" context="#pop" char="*" char1="/" />
+            </context>
+
+            <context name="SelectAtRule" attribute="At Rule" lineEndContext="#pop">
+                <keyword attribute="At Rule" context="#pop!AtRule" String="nested at-rules" />
+                <keyword attribute="At Rule" context="#pop!AtRule" String="at-rules" />
+                <keyword attribute="At Rule" context="#pop!AtRule" String="inline and nested at-rules" />
+                <keyword attribute="At Rule" context="#pop!@extend" String="@extend" />
+                <keyword attribute="At Rule" context="#pop!@mixin" String="@mixin" />
+                <keyword attribute="At Rule" context="#pop!@keyframes-@font-face" String="@keyframes-@font-face" />
+                <keyword attribute="At Rule" context="#pop!@viewport" String="@viewport" />
+                <keyword attribute="At Rule" context="#pop!@if" String="@if" />
+                <keyword attribute="At Rule" context="#pop!@else" String="@else" />
+                <keyword attribute="At Rule" context="#pop!@page" String="@page" />
+                <RegExpr attribute="At Rule" context="#pop!AtRule" String="@[a-zA-Z0-9\-_]+\b" />
+            </context>
+
+            <context name="@if" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <IncludeRules context="FindValues" />
+                <AnyChar attribute="Operator" context="#stay" String="=!&lt;&gt;" />
+                <!-- auto-completion only -->
+                <keyword attribute="Normal Text" context="#stay" String="functions" />
+            </context>
+
+            <context name="@else" attribute="Error" lineEndContext="#pop">
+                <DetectSpaces attribute="Normal Text" />
+                <IncludeRules context="FindComments" />
+                <WordDetect attribute="At Rule" context="#pop!@if" String="if" />
+                <DetectIdentifier attribute="Error" />
+            </context>
+
+            <context name="@extend" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindSelector" />
+            </context>
+
+            <context name="@mixin" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <RegExpr attribute="Function" context="MixinParameter" String="[a-zA-Z0-9\-_]+" />
+            </context>
+
+            <context name="MixinParameter" attribute="Error" lineEndContext="#pop#pop">
+                <DetectSpaces attribute="Normal Text" />
+                <AnyChar attribute="Normal Text" context="#stay" String="()" />
+                <DetectChar attribute="Separator Symbol" context="#stay" char="," />
+                <IncludeRules context="FindComments" />
+                <RegExpr attribute="Variable" context="#stay" String="\$[a-zA-Z0-9\-_]+" />
+                <StringDetect attribute="Operator" context="#stay" String="..." />
+            </context>
+
+            <context name="@keyframes-@font-face" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+            </context>
+
+            <context name="@viewport" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <DetectChar attribute="Selector Pseudo" context="SelectorPseudo" char=":" />
+            </context>
+
+            <context name="@page" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <DetectChar attribute="Selector Pseudo" context="SelectorPseudo-@page" char=":" />
+            </context>
+
+            <context name="SelectorPseudo-@page" attribute="Selector Pseudo" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
+                <keyword attribute="Selector Pseudo" context="#pop" String="pseudoclasses-@page" />
+                <RegExpr attribute="Selector Pseudo" context="#pop" String="[-a-zA-Z][-a-zA-Z0-9]*" />
+            </context>
+
+            <context name="AtRule" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <DetectChar attribute="Operator" context="#stay" char="&amp;" />
+                <IncludeRules context="FindComments" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <keyword attribute="Keyword" context="#stay" String="media operators" />
+                <RegExpr attribute="Property" context="#stay" String="[A-Za-z_-]+(?=\s*:)" />
+                <keyword attribute="Value" context="#stay" String="medias" />
+                <IncludeRules context="FindValues" />
+                <!-- auto-completion only -->
+                <keyword attribute="Normal Text" context="#stay" String="functions" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorAttr" attribute="Selector Attribute" lineEndContext="#pop">
+                <DetectChar attribute="Selector Attribute" context="#pop" char="]" />
+                <IncludeRules context="FindStrings" />
+                <DetectChar   attribute="Operator" context="SelectorAttrValue" char="=" />
+                <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="~" char1="=" />
+                <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="^" char1="=" />
+                <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="$" char1="=" />
+                <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="*" char1="=" />
+                <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="|" char1="=" />
+                <DetectIdentifier />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorAttrValue" attribute="String" lineEndContext="#pop#pop">
+                <DetectChar attribute="Selector Attribute" context="#pop#pop" char="]" />
+                <DetectIdentifier />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorPseudo" attribute="Selector Pseudo" lineEndContext="#pop">
+                <DetectChar attribute="Selector Pseudo" context="SelectorPseudoElements" char=":" />
+                <keyword attribute="Selector Pseudo" context="SelectorPseudoValueSelector" String="pseudoclass-selector" />
+                <keyword attribute="Selector Pseudo" context="SelectorPseudoValue" String="pseudoclasses" />
+                <RegExpr attribute="Selector Pseudo" context="SelectorPseudoValue" String="[-a-zA-Z][-a-zA-Z0-9]*" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorPseudoElements" attribute="Selector Pseudo" lineEndContext="#pop#pop">
+                <keyword attribute="Selector Pseudo" context="#pop!SelectorPseudoValue" String="pseudoelements" />
+                <RegExpr attribute="Selector Pseudo" context="#pop!SelectorPseudoValue" String="[-a-zA-Z][-a-zA-Z0-9]*" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorPseudoValueSelector" attribute="Selector Pseudo" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop#pop">
+                <DetectChar attribute="Selector Pseudo" context="SelectorPseudoValueCloseSelector" char="(" />
+            </context>
+
+            <context name="SelectorPseudoValueCloseSelector" attribute="Normal Text" lineEndContext="#pop#pop#pop">
+                <DetectSpaces />
+                <DetectChar attribute="Selector Pseudo" context="#pop#pop#pop" char=")" />
+                <IncludeRules context="FindSelector" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorPseudoValue" attribute="Selector Pseudo" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop#pop">
+                <DetectChar attribute="Selector Pseudo" context="SelectorPseudoValueClose" char="(" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="SelectorPseudoValueClose" attribute="Selector Pseudo" lineEndContext="#pop#pop#pop">
+                <DetectChar attribute="Selector Pseudo" context="#pop#pop#pop" char=")" />
+                <DetectIdentifier />
+            </context>
+
+            <context name="Rule" attribute="Normal Text" lineEndContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
+                <Detect2Chars attribute="Variable" context="IsVariable" char="-" char1="-" />
+                <keyword attribute="Property" context="#stay" String="properties" />
+                <RegExpr attribute="Unknown Property" context="#stay" String="[^:]+" />
+            </context>
+
+            <context name="IsVariable" attribute="Normal Text" lineEndContext="#pop">
+                <DetectChar attribute="Normal Text" context="#pop!RuleParameters" char=":" />
+                <RegExpr attribute="Variable" context="#stay" String="[^:/]+" />
+                <IncludeRules context="FindComments" />
+            </context>
+
+            <context name="RuleParameters" attribute="Normal Text" lineEndContext="#pop#pop">
+                <DetectSpaces />
+                <!-- Jump out conditions -->
+                <DetectChar attribute="Separator Symbol" context="#stay" char="," />
+                <IncludeRules context="FindComments" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <IncludeRules context="FindValues" />
+                <!-- auto-completion only -->
+                <keyword attribute="Normal Text" context="#stay" String="functions" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="Function" attribute="Normal Text" lineEndContext="#pop">
+                <DetectChar attribute="Function" context="FunctionParameters" char="(" />
+                <StringDetect attribute="Function" context="FunctionVar" String="var(" />
+                <StringDetect attribute="Function" context="FunctionUrl" String="url(" />
+                <StringDetect attribute="Function" context="FunctionCalc" String="calc(" />
+                <keyword attribute="Function" context="#stay" String="functions" />
+                <RegExpr attribute="Function" context="#stay" String="[-a-zA-Z][-a-zA-Z0-9]*" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="FunctionVar" attribute="Variable" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop!FunctionParameters">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <RegExpr attribute="Variable" context="#pop!FunctionParameters" String="--[^ \t\),]+" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="FunctionCalc" attribute="Normal Text" lineEndContext="#pop#pop">
+                <DetectSpaces />
+                <DetectChar attribute="Function" context="#pop#pop" char=")" />
+                <IncludeRules context="Calc" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="NestedCalc" attribute="Normal Text" lineEndContext="#pop#pop">
+                <DetectSpaces />
+                <DetectChar attribute="Normal Text" context="#pop" char=")" />
+                <IncludeRules context="Calc" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="Calc" attribute="Normal Text" lineEndContext="#pop">
+                <DetectChar attribute="Separator Symbol" context="#stay" char="," />
+                <DetectChar attribute="Normal Text" context="NestedCalc" char="(" />
+                <IncludeRules context="FindComments" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <IncludeRules context="FindValues" />
+                <RegExpr attribute="Operator" context="#stay" String="[-](?=$|[ \t(,;])|[+](?=$|[^0-9)])|[/*]" />
+                <!-- auto-completion only -->
+                <keyword attribute="Normal Text" context="#stay" String="functions" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="FunctionUrl" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="UrlValue">
+                <DetectSpaces />
+                <IncludeRules context="FindStrings" />
+                <DetectChar attribute="Function" context="#pop#pop" char=")" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="UrlValue" attribute="String" lineEndContext="#pop#pop#pop">
+                <DetectChar attribute="Function" context="#pop#pop#pop" char=")" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="FunctionParameters" attribute="Normal Text" lineEndContext="#pop#pop">
+                <DetectSpaces />
+                <DetectChar attribute="Function" context="#pop#pop" char=")" />
+                <IncludeRules context="FindComments" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <IncludeRules context="FindValues" />
+                <DetectChar attribute="Separator Symbol" context="#stay" char="," />
+                <StringDetect attribute="Operator" String="..." />
+            </context>
+
+            <!-- string contexts -->
+            <!-- same as SCSS -->
+            <context name="StringDQ" attribute="String" lineEndContext="#pop">
+                <DetectChar attribute="String" context="#pop" char="&quot;" />
+                <IncludeRules context="InsideString" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="StringSQ" attribute="String" lineEndContext="#pop">
+                <DetectChar attribute="String" context="#pop" char="'" />
+                <IncludeRules context="InsideString" />
+            </context>
+
+            <!-- same as SCSS -->
+            <context name="InsideString" attribute="String" lineEndContext="#stay">
+                <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
+                <RegExpr attribute="SpecialChar" context="#stay" String="\\([0-9A-Fa-f]{1,6}|.?)" />
+                <RegExpr attribute="String" context="#stay" String="\\?[^#&quot;'\\]+" />
+            </context>
+
+        </contexts>
+
+        <itemDatas>
+            <itemData name="Normal Text" defStyleNum="dsNormal" spellChecking="false"/>
+            <itemData name="At Rule" defStyleNum="dsImport" spellChecking="false"/>
+            <itemData name="Keyword" defStyleNum="dsKeyword" spellChecking="false"/>
+            <itemData name="Property" defStyleNum="dsKeyword" spellChecking="false"/>
+            <itemData name="Unknown Property" defStyleNum="dsNormal" spellChecking="false"/>
+            <itemData name="String" defStyleNum="dsString"/>
+            <itemData name="SpecialChar" defStyleNum="dsSpecialChar" spellChecking="false"/>
+            <itemData name="Interpolation" defStyleNum="dsOperator" spellChecking="false"/>
+            <itemData name="Operator" defStyleNum="dsOperator" spellChecking="false"/>
+            <itemData name="Separator Symbol" defStyleNum="dsOperator" spellChecking="false"/>
+            <itemData name="Value" defStyleNum="dsDecVal" spellChecking="false"/>
+            <itemData name="Number" defStyleNum="dsDecVal" spellChecking="false"/>
+            <itemData name="Value Keyword" defStyleNum="dsBuiltIn" spellChecking="false"/>
+            <itemData name="Color" defStyleNum="dsConstant" spellChecking="false"/>
+            <itemData name="Unit" defStyleNum="dsDataType" spellChecking="false"/>
+            <itemData name="Variable" defStyleNum="dsVariable" spellChecking="false"/>
+            <itemData name="Function" defStyleNum="dsFunction" spellChecking="false"/>
+            <itemData name="Annotation" defStyleNum="dsAttribute" spellChecking="false"/>
+            <itemData name="Selector Id" defStyleNum="dsPreprocessor" bold="1" spellChecking="false"/>
+            <itemData name="Selector Class" defStyleNum="dsFunction" spellChecking="false"/>
+            <itemData name="Selector Attribute" defStyleNum="dsExtension" spellChecking="false"/>
+            <itemData name="Selector Pseudo" defStyleNum="dsInformation" italic="1" spellChecking="false"/>
+            <itemData name="Selector Tag" defStyleNum="dsNormal" spellChecking="false"/>
+            <itemData name="Placeholder Selector" defStyleNum="dsBuiltIn" spellChecking="false"/>
+            <itemData name="Comment" defStyleNum="dsComment" />
+            <itemData name="Error" defStyleNum="dsError" spellChecking="false"/>
+        </itemDatas>
+    </highlighting>
+
+    <general>
+        <keywords casesensitive="0" weakDeliminator="-%@" />
+        <folding indentationsensitive="1" />
+        <comments>
+            <comment name="singleLine" start="//" position="afterwhitespace"/>
+        </comments>
+    </general>
+
+</language>
diff --git a/data/syntax/scss.xml b/data/syntax/scss.xml
index 434b5e2..5fca275 100644
--- a/data/syntax/scss.xml
+++ b/data/syntax/scss.xml
@@ -1,1020 +1,1038 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE language SYSTEM "language.dtd"
 [
   <!-- https://www.w3.org/TR/CSS22/syndata.html#tokenization -->
   <!ENTITY nmstart "[_a-zA-Z]|(\\[0-9a-fA-F]{1,6})|(\\[^\n\r\f0-9a-fA-F])">
   <!ENTITY nmchar  "[_a-zA-Z0-9-]|(\\[0-9a-fA-F]{1,6})|(\\[^\n\r\f0-9a-fA-F])">
 ]>
 
 <!--
 
 Kate SCSS syntax highlighting definition
 
 Changelog:
 
 - Version 7, by Jonathan Poelen
 - fix tag followed by a pseudo-class in a nested rule (@media, ...)
 - fix constraint in a rule
 - fix Kate auto-completion for properties and rules
 - fix highlighting of pseudoclass/pseudoelement in a sub-rule
 - New highlighting categories: Keyword, Operator, Separator Symbol, SpecialChar, Value Keyword, Color, Number, Unit, Selector Tag, Placeholder Selector
 
 - Version 4, by Guo Yunhe guoyunhebrave@gmail.com
 - Remake for complex SCSS syntax, avoid errors
 
 - Version 2.06, by Guo Yunhe
 - Add all W3C Work Draft properties, inherit rules from css.xml
 
 - Version 1.2.03.6, by Mte90
 - Css3 Tag
 
 - Version 1.2.03.1, by Tijn Schuurmans
 - Added basic support for "@include mixin();"
 - Clean the indentation to use 4 spaces everywhere
 
 -->
 
-<language name="SCSS" version="10" kateversion="5.53" section="Markup" extensions="*.scss" indenter="cstyle" mimetype="text/css" author="Wilbert Berendsen (wilbert@kde.nl)" license="LGPL" priority="10">
+<language name="SCSS" version="11" kateversion="5.53" section="Markup" extensions="*.scss" indenter="cstyle" mimetype="text/css" author="Wilbert Berendsen (wilbert@kde.nl)" license="LGPL" priority="10">
 
     <highlighting>
         <list name="properties">
             <include>properties##CSS</include>
         </list>
 
         <list name="sub-properties">
             <item>adjust</item>
             <item>after</item>
             <item>align-all</item>
             <item>align</item>
             <item>align-last</item>
             <item>alternates</item>
             <item>anchor</item>
             <item>area</item>
             <item>areas</item>
             <item>attachment</item>
             <item>auto-columns</item>
             <item>auto-flow</item>
             <item>auto-rows</item>
             <item>baseline</item>
             <item>basis</item>
             <item>before</item>
             <item>bidi</item>
             <item>blend-mode</item>
             <item>block-color</item>
             <item>block-end-color</item>
             <item>block-end</item>
             <item>block-end-style</item>
             <item>block-end-width</item>
             <item>block</item>
             <item>block-start-color</item>
             <item>block-start</item>
             <item>block-start-style</item>
             <item>block-start-width</item>
             <item>block-style</item>
             <item>block-width</item>
             <item>border-mode</item>
             <item>border-outset</item>
             <item>border-repeat</item>
             <item>border-slice</item>
             <item>border-source</item>
             <item>bottom-color</item>
             <item>bottom-left-radius</item>
             <item>bottom-right-radius</item>
             <item>bottom-style</item>
             <item>bottom-width</item>
             <item>boundary</item>
             <item>box</item>
             <item>break</item>
             <item>caps</item>
             <item>cells</item>
             <item>change</item>
             <item>character</item>
             <item>chars</item>
             <item>collapse</item>
             <item>column-end</item>
             <item>column</item>
             <item>column-start</item>
             <item>combine-upright</item>
             <item>composite</item>
             <item>count</item>
             <item>decoration-break</item>
             <item>decoration-color</item>
             <item>decoration</item>
             <item>decoration-line</item>
             <item>decoration-skip-ink</item>
             <item>decoration-skip</item>
             <item>decoration-style</item>
             <item>decoration-width</item>
             <item>defer</item>
             <item>delay</item>
             <item>distance</item>
             <item>down</item>
             <item>duration</item>
             <item>during</item>
             <item>east-asian</item>
             <item>emoji</item>
             <item>emphasis-color</item>
             <item>emphasis</item>
             <item>emphasis-position</item>
             <item>emphasis-skip</item>
             <item>emphasis-style</item>
             <item>end-color</item>
             <item>end</item>
             <item>end-style</item>
             <item>end-width</item>
             <item>events</item>
             <item>family</item>
             <item>feature-settings</item>
             <item>fill-mode</item>
             <item>filters</item>
             <item>fit</item>
             <item>flow</item>
             <item>fragment</item>
             <item>from</item>
             <item>function</item>
             <item>grow</item>
             <item>gutter</item>
             <item>header</item>
             <item>height-step</item>
             <item>image</item>
             <item>image-outset</item>
             <item>image-repeat</item>
             <item>image-slice</item>
             <item>image-source</item>
             <item>image-threshold</item>
             <item>image-transform</item>
             <item>image-width</item>
             <item>increment</item>
             <item>indent</item>
             <item>inline-color</item>
             <item>inline-end-color</item>
             <item>inline-end</item>
             <item>inline-end-style</item>
             <item>inline-end-width</item>
             <item>inline</item>
             <item>inline-start-color</item>
             <item>inline-start</item>
             <item>inline-start-style</item>
             <item>inline-start-width</item>
             <item>inline-style</item>
             <item>inline-width</item>
             <item>insert</item>
             <item>inside</item>
             <item>interpolation-filters</item>
             <item>into</item>
             <item>items</item>
             <item>iteration-count</item>
             <item>justify</item>
             <item>kerning</item>
             <item>knockout-left</item>
             <item>knockout-right</item>
             <item>label</item>
             <item>language-override</item>
             <item>last</item>
             <item>layout</item>
             <item>left-color</item>
             <item>left-radius</item>
             <item>left-style</item>
             <item>left-width</item>
             <item>letter-align</item>
             <item>letter</item>
             <item>letter-wrap</item>
             <item>level</item>
             <item>ligatures</item>
             <item>limit-chars</item>
             <item>limit-last</item>
             <item>limit-lines</item>
             <item>limit-zone</item>
             <item>line</item>
             <item>lines</item>
             <item>loop</item>
             <item>max-size</item>
             <item>merge</item>
             <item>mid</item>
             <item>min-size</item>
             <item>mode</item>
             <item>name</item>
             <item>numeral</item>
             <item>numeric</item>
             <item>optical-sizing</item>
             <item>orientation</item>
             <item>orientation-vertical</item>
             <item>origin</item>
             <item>outset</item>
             <item>outside</item>
             <item>override</item>
             <item>palette</item>
             <item>path</item>
             <item>pattern</item>
             <item>play-state</item>
             <item>point</item>
             <item>policy</item>
             <item>property</item>
             <item>punctuation</item>
             <item>radius</item>
             <item>range</item>
             <item>rate</item>
             <item>reference</item>
             <item>rendering</item>
             <item>repeat</item>
             <item>reset</item>
             <item>resolution</item>
             <item>right-color</item>
             <item>right-radius</item>
             <item>right-style</item>
             <item>right-width</item>
             <item>rotate</item>
             <item>round</item>
             <item>row-end</item>
             <item>row</item>
             <item>rows</item>
             <item>row-start</item>
             <item>rule-color</item>
             <item>rule</item>
             <item>rule-style</item>
             <item>rule-width</item>
             <item>segment</item>
             <item>select</item>
             <item>self</item>
             <item>set</item>
             <item>settings</item>
             <item>shadow</item>
             <item>shape</item>
             <item>shift</item>
             <item>shrink</item>
             <item>side</item>
             <item>size-adjust</item>
             <item>sizing</item>
             <item>skip-ink</item>
             <item>skip</item>
             <item>slice</item>
             <item>snap</item>
             <item>source</item>
             <item>space-collapse</item>
             <item>space</item>
             <item>space-trim</item>
             <item>spacing</item>
             <item>span</item>
             <item>speed</item>
             <item>start-color</item>
             <item>start</item>
             <item>start-style</item>
             <item>start-width</item>
             <item>state</item>
             <item>step-align</item>
             <item>step-insert</item>
             <item>step</item>
             <item>step-round</item>
             <item>step-size</item>
             <item>stretch</item>
             <item>style-image</item>
             <item>style</item>
             <item>style-position</item>
             <item>style-type</item>
             <item>synthesis</item>
             <item>template-areas</item>
             <item>template-columns</item>
             <item>template</item>
             <item>template-rows</item>
             <item>threshold</item>
             <item>through</item>
             <item>timing-function</item>
             <item>top-color</item>
             <item>top-left-radius</item>
             <item>top-right-radius</item>
             <item>top-style</item>
             <item>top-width</item>
             <item>trim</item>
             <item>type</item>
             <item>underline-offset</item>
             <item>underline-position</item>
             <item>up</item>
             <item>upright</item>
             <item>variant-alternates</item>
             <item>variant-caps</item>
             <item>variant-east-asian</item>
             <item>variant-emoji</item>
             <item>variant</item>
             <item>variant-ligatures</item>
             <item>variant-numeric</item>
             <item>variant-position</item>
             <item>variation-settings</item>
             <item>vertical</item>
             <item>weight</item>
             <item>wrap</item>
             <item>x</item>
             <item>y</item>
             <item>zone</item>
         </list>
 
         <list name="special values">
             <item>true</item>
             <item>false</item>
             <item>null</item>
         </list>
 
         <list name="value keywords">
             <include>value keywords##CSS</include>
         </list>
 
         <list name="values">
             <include>values##CSS</include>
         </list>
 
         <list name="colors">
             <include>colors##CSS</include>
         </list>
 
         <list name="functions">
             <include>functions##CSS</include>
 
             <!-- sass -->
             <item>red</item>
             <item>green</item>
             <item>blue</item>
             <item>mix</item>
             <item>hue</item>
             <item>saturation</item>
             <item>lightness</item>
             <item>adjust-hue</item>
             <item>lighten</item>
             <item>darken</item>
             <item>saturate</item>
             <item>desaturate</item>
             <item>grayscale</item>
             <item>complement</item>
             <item>invert</item>
             <item>alpha</item>
             <item>opacify</item>
             <item>transparentize</item>
             <item>adjust-color</item>
             <item>scale-color</item>
             <item>change-color</item>
             <item>ie-hex-str</item>
             <item>unquote</item>
             <item>quote</item>
             <item>str-length</item>
             <item>str-insert</item>
             <item>str-index</item>
             <item>str-slice</item>
             <item>to-upper-case</item>
             <item>to-lower-case</item>
             <item>percentage</item>
             <item>round</item>
             <item>ceil</item>
             <item>floor</item>
             <item>abs</item>
             <item>min</item>
             <item>max</item>
             <item>random</item>
             <item>length</item>
             <item>nth</item>
             <item>set-nth</item>
             <item>join</item>
             <item>append</item>
             <item>zip</item>
             <item>index</item>
             <item>list-separator</item>
             <item>is-bracketed</item>
             <item>map-get</item>
             <item>map-merge</item>
             <item>map-remove</item>
             <item>map-keys</item>
             <item>map-values</item>
             <item>map-has-key</item>
             <item>keywords</item>
             <item>selector-nest</item>
             <item>selector-append</item>
             <item>selector-extend</item>
             <item>selector-replace</item>
             <item>selector-unify</item>
             <item>is-superselector</item>
             <item>simple-selectors</item>
             <item>selector-parse</item>
             <item>feature-exists</item>
             <item>variable-exists</item>
             <item>global-variable-exists</item>
             <item>function-exists</item>
             <item>mixin-exists</item>
             <item>content-exists</item>
             <item>inspect</item>
             <item>type-of</item>
             <item>unit</item>
             <item>unitless</item>
             <item>comparable</item>
             <item>call</item>
             <item>get-function</item>
             <item>if</item>
             <item>unique-id</item>
         </list>
 
         <list name="medias">
             <include>medias##CSS</include>
         </list>
 
         <!-- prefixed by :: -->
         <list name="pseudoelements">
             <include>pseudoelements##CSS</include>
         </list>
 
         <!-- prefixed by : -->
         <list name="pseudoclasses">
             <include>pseudoclasses##CSS</include>
         </list>
 
-        <list name="pseudoclass-not">
-            <include>pseudoclass-not##CSS</include>
+        <list name="pseudoclass-selector">
+            <include>pseudoclass-selector##CSS</include>
         </list>
 
         <list name="pseudoclasses-@page">
             <include>pseudoclasses-@page##CSS</include>
         </list>
 
         <list name="at-rules">
             <include>at-rules##CSS</include>
 
             <!-- scss -->
             <item>@debug</item>
             <item>@warn</item>
             <item>@error</item>
             <item>@content</item>
             <item>@return</item>
         </list>
 
         <list name="nested at-rules">
             <include>nested at-rules##CSS</include>
 
             <!-- scss -->
             <item>@at-rule</item>
             <item>@for</item>
             <item>@each</item>
             <item>@while</item>
         </list>
 
         <list name="inline and nested at-rules">
             <!-- CSS: inline -->
             <!-- SCSS: inline or block -->
             <item>@include</item>
         </list>
 
         <list name="@extend">
             <item>@extend</item>
         </list>
 
         <list name="@if">
             <item>@if</item>
         </list>
 
         <list name="@else">
             <item>@else</item>
         </list>
 
         <list name="@mixin">
             <item>@mixin</item>
             <item>@function</item>
         </list>
 
         <list name="@viewport">
             <item>@viewport</item>
         </list>
 
         <list name="within-@viewport">
             <include>within-@viewport##CSS</include>
         </list>
 
         <list name="@page">
             <item>@page</item>
         </list>
 
         <list name="within-@page">
             <include>within-@page##CSS</include>
         </list>
 
         <list name="@font-face">
             <item>@font-face</item>
         </list>
 
         <list name="within-@font-face">
             <include>within-@font-face##CSS</include>
         </list>
 
         <list name="@keyframes">
             <item>@keyframes</item>
         </list>
 
         <list name="within-@keyframes">
             <include>within-@keyframes##CSS</include>
         </list>
 
         <list name="media operators">
             <include>media operators##CSS</include>
         </list>
 
         <list name="operators">
             <item>and</item>
             <item>or</item>
             <item>not</item>
         </list>
 
         <list name="annotations">
             <item>important</item>
             <item>default</item>
             <item>global</item>
         </list>
 
         <contexts>
             <context name="Base" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="RuleSet" char="{" beginRegion="ruleset" />
                 <DetectChar attribute="At Rule" context="SelectAtRule" char="@" lookAhead="true" />
                 <!-- find selectors // .class #id :hover :nth-child(2n+1) [type="search"] -->
                 <DetectChar attribute="Selector Attribute" context="SelectorAttr" char="[" />
                 <DetectChar attribute="Separator Symbol" context="IsSelectors" char="," />
-                <DetectChar attribute="Operator" context="IsSelectors" char="&amp;" />
-                <AnyChar attribute="Operator" context="IsSelectors" String="*>+~|" />
+                <AnyChar attribute="Operator" context="IsSelectors" String="*>+~|&amp;" />
                 <RegExpr attribute="Selector Pseudo" context="SelectorPseudo" String=":(?=[a-z:])" />
                 <RegExpr attribute="Selector Id" context="IsSelectors" String="#[-]?(&nmstart;)(&nmchar;)*" />
                 <RegExpr attribute="Selector Class" context="IsSelectors" String="\.([a-zA-Z0-9\-_]|[\x80-\xFF]|\\[0-9A-Fa-f]{1,6})*" />
                 <RegExpr attribute="Placeholder Selector" context="IsSelectors" String="%[_a-zA-Z][_a-zA-Z\-]*" />
-                <RegExpr attribute="Selector Tag" context="IsSelectors" String="[-]?(&nmstart;)(&nmchar;)*(?=\s|:?[\s#.&amp;{[*>+~|,]|:[a-z:])" />
+                <RegExpr attribute="Selector Tag" context="IsSelectors" String="[-]?(&nmstart;)(&nmchar;)*(?=\s|:?[#.&amp;{[*>+~|,]|:[a-z:])" />
                 <RegExpr attribute="Variable" context="VariableDefine" String="\$[a-zA-Z0-9\-_]+(?=\s*:)" />
-                <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
+                <Detect2Chars attribute="Interpolation" context="InterpolationMaybeProperty" char="#" char1="{" />
             </context>
 
             <context name="IsSelectors" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <DetectChar attribute="At Rule" context="#pop!SelectAtRule" char="@" lookAhead="true" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <DetectChar attribute="Error" context="#pop" char=";" />
                 <AnyChar attribute="Operator" context="#stay" String="*>+~|&amp;" />
                 <IncludeRules context="SelectorTypes" />
             </context>
 
             <context name="FindSelector" attribute="Normal Text" lineEndContext="#stay">
                 <AnyChar attribute="Error" context="#stay" String=",&amp;" />
                 <AnyChar attribute="Operator" context="#stay" String="*>+~|" />
                 <IncludeRules context="SelectorTypes" />
             </context>
 
             <context name="SelectorTypes" attribute="Normal Text" lineEndContext="#stay">
                 <!-- find selectors // .class #id :hover :nth-child(2n+1) [type="search"] -->
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudo" char=":" />
                 <DetectChar attribute="Selector Attribute" context="SelectorAttr" char="[" />
                 <IncludeRules context="FindComments" />
                 <RegExpr attribute="Selector Id" context="#stay" String="#[-]?(&nmstart;)(&nmchar;)*" />
                 <RegExpr attribute="Selector Class" context="#stay" String="\.([a-zA-Z0-9\-_]|[\x80-\xFF]|\\[0-9A-Fa-f]{1,6})*" />
                 <RegExpr attribute="Placeholder Selector" context="#stay" String="%[_a-zA-Z][_a-zA-Z\-]*" />
                 <RegExpr attribute="Selector Tag" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
                 <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
             </context>
 
             <context name="VariableDefine" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
             </context>
 
             <context name="Interpolation" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Interpolation" context="#pop" char="}" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <IncludeRules context="FindValues" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
+            <context name="InterpolationMaybeProperty" attribute="Normal Text" lineEndContext="#stay">
+                <DetectSpaces />
+                <DetectChar attribute="Interpolation" context="#pop!MaybeProperty" char="}" />
+                <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
+                <IncludeRules context="FindValues" />
+                <!-- auto-completion only -->
+                <keyword attribute="Normal Text" context="#stay" String="functions" />
+            </context>
+
+            <context name="MaybeProperty" attribute="Normal Text" lineEndContext="#stay" fallthrough="true" fallthroughContext="#pop">
+                <DetectSpaces />
+                <IncludeRules context="FindComments" />
+                <RegExpr attribute="Normal Text" context="Rule" String=":($|[/{\s0-9$&quot;'])" lookAhead="true"/>
+            </context>
+
 
             <!-- find functions // rgba(255,255,255,0.75) -->
             <context name="FindFunctions" attribute="Normal Text" lineEndContext="#stay">
                 <RegExpr attribute="Function" context="Function" String="[a-z\-]{2,}\(" lookAhead="true" />
             </context>
 
             <!-- find values //  10px 12pt 2.5em 1rem 75% #ffcc99 red solid -->
             <context name="FindValues" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Annotation" context="Annotation" char="!" />
                 <keyword attribute="Operator" context="#stay" String="operators" />
                 <keyword attribute="Value Keyword" context="#stay" String="value keywords" />
                 <keyword attribute="Value" context="#stay" String="values" />
                 <keyword attribute="Color" context="#stay" String="colors" />
-                <RegExpr attribute="Number" context="FindUnits" String="[0-9.]+" />
-                <RegExpr attribute="Color" context="#stay" String="#([0-9A-Fa-f]{3}){1,2}\b" />
+                <RegExpr attribute="Number" context="FindUnits" String="([0-9]+(\.[0-9]+)?|\.[0-9]+)([eE][+-]?[0-9]+)?" />
+                <RegExpr attribute="Color" context="#stay" String="#([0-9A-Fa-f]{3,4}){1,2}\b" />
                 <RegExpr attribute="Variable" context="#stay" String="\$[a-zA-Z0-9\-_]+" />
+                <keyword attribute="Value Keyword" context="#stay" String="special values" />
                 <RegExpr attribute="Normal Text" context="#stay" String="[-]?(&nmstart;)(&nmchar;)*" />
                 <AnyChar attribute="Operator" context="#stay" String="*/+%-" />
                 <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
             </context>
 
             <context name="Annotation" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
                 <keyword attribute="Annotation" context="#pop" String="annotations" />
             </context>
 
             <context name="FindUnits" attribute="Normal Text" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
-                <RegExpr attribute="Unit" context="#stay" String="(%|(em|ex|ch|rem|vw|vh|vm|px|in|cm|mm|pt|pc|deg|rad|grad|turn|ms|s|Hz|kHz)\b)" />
+                <RegExpr attribute="Unit" context="#pop" String="(%|(em|ex|cap|ch|ic|rem|lh|rlh|vw|vh|vi|vb|vmin|vmax|cm|mm|Q|in|pc|pt|px|deg|rad|grad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx|x)\b)" />
             </context>
 
             <!-- find strings // "some words" 'some words' -->
             <context name="FindStrings" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="String" context="StringDQ" char="&quot;" />
                 <DetectChar attribute="String" context="StringSQ" char="'" />
             </context>
 
             <!-- find comments // /* comment */ -->
             <context name="FindComments" attribute="Normal Text" lineEndContext="#stay">
                 <Detect2Chars attribute="Comment" context="IsComments" char="/" char1="/" lookAhead="true"/>
                 <Detect2Chars attribute="Comment" context="IsComments" char="/" char1="*" lookAhead="true"/>
             </context>
 
             <context name="IsComments" attribute="Normal Text" lineEndContext="#stay">
                 <RegExpr attribute="Region Marker" context="#stay" String="/\*\s*BEGIN\b.*\*/|//\s*BEGIN\b.*" beginRegion="UserDefined" />
                 <RegExpr attribute="Region Marker" context="#stay" String="/\*\s*END\b.*\*/|//\s*END\b.*" endRegion="UserDefined" />
                 <Detect2Chars attribute="Comment" context="Comment" char="/" char1="*" beginRegion="comment" />
                 <Detect2Chars attribute="Comment" context="SassComment" char="/" char1="/" />
             </context>
 
             <context name="SassComment" attribute="Comment" lineEndContext="#pop#pop">
                 <DetectSpaces />
                 <IncludeRules context="##Alerts" />
                 <DetectIdentifier />
             </context>
 
             <context name="SelectAtRule" attribute="At Rule" lineEndContext="#pop">
                 <keyword attribute="At Rule" context="#pop!NestedAtRule" String="nested at-rules" />
                 <keyword attribute="At Rule" context="#pop!AtRule" String="at-rules" />
                 <keyword attribute="At Rule" context="#pop!UnknownAtRule" String="inline and nested at-rules" />
                 <keyword attribute="At Rule" context="#pop!@extend" String="@extend" />
                 <keyword attribute="At Rule" context="#pop!@mixin" String="@mixin" />
                 <keyword attribute="At Rule" context="#pop!@keyframes" String="@keyframes" />
                 <keyword attribute="At Rule" context="#pop!@viewport" String="@viewport" />
                 <keyword attribute="At Rule" context="#pop!@font-face" String="@font-face" />
                 <keyword attribute="At Rule" context="#pop!@if" String="@if" />
                 <keyword attribute="At Rule" context="#pop!@else" String="@else" />
                 <keyword attribute="At Rule" context="#pop!@page" String="@page" />
                 <RegExpr attribute="At Rule" context="#pop!UnknownAtRule" String="@[a-zA-Z0-9\-_]+\b" />
             </context>
 
             <context name="@if" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
-                <keyword attribute="Value Keyword" context="#stay" String="special values" />
                 <IncludeRules context="FindValues" />
                 <AnyChar attribute="Operator" context="#stay" String="=!&lt;&gt;" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
             <context name="@else" attribute="Error" lineEndContext="#stay">
                 <DetectSpaces attribute="Normal Text" />
                 <DetectChar attribute="Normal Text" context="#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <IncludeRules context="FindComments" />
                 <WordDetect attribute="At Rule" context="#pop!@if" String="if" />
                 <DetectIdentifier attribute="Error" />
             </context>
 
             <context name="@extend" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Separator Symbol" context="#pop" char=";" />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
                 <IncludeRules context="FindSelector" />
             </context>
 
             <context name="@mixin" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <RegExpr attribute="Function" context="MixinParameter" String="[a-zA-Z0-9\-_]+" />
             </context>
 
             <context name="MixinParameter" attribute="Error" lineEndContext="#stay">
                 <DetectSpaces attribute="Normal Text" />
                 <AnyChar attribute="Normal Text" context="#stay" String="()" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <DetectChar attribute="Normal Text" context="#pop#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <IncludeRules context="FindComments" />
                 <RegExpr attribute="Variable" context="#stay" String="\$[a-zA-Z0-9\-_]+" />
+                <StringDetect attribute="Operator" context="#stay" String="..." />
             </context>
 
             <context name="@keyframes" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="Within-@keyframes" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="Within-@keyframes" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="#pop#pop" char="}" endRegion="ruleset" />
                 <DetectChar attribute="Normal Text" context="RuleSet" char="{" beginRegion="ruleset" />
                 <keyword attribute="Value" context="#stay" String="within-@keyframes" />
                 <RegExpr attribute="Value" context="#stay" String="[-+]?[0-9.]+%" />
             </context>
 
             <context name="@viewport" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudo" char=":" />
                 <DetectChar attribute="Normal Text" context="#pop!Within-@viewport" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="Within-@viewport" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <keyword attribute="Property" context="IsProperty" String="within-@viewport" />
                 <IncludeRules context="RuleSet" />
             </context>
 
             <context name="@font-face" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="#pop!Within-@font-face" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="Within-@font-face" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <keyword attribute="Property" context="IsProperty" String="within-@font-face" />
                 <RegExpr attribute="Unknown Property" context="IsProperty" String="[A-Za-z_-]+\b" />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
             </context>
 
             <context name="@page" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudo-@page" char=":" />
                 <DetectChar attribute="Normal Text" context="#pop!Within-@page" char="{" beginRegion="ruleset" />
             </context>
 
             <context name="SelectorPseudo-@page" attribute="Selector Pseudo" lineEndContext="#pop" fallthrough="true" fallthroughContext="#pop">
                 <keyword attribute="Selector Pseudo" context="#pop" String="pseudoclasses-@page" />
                 <RegExpr attribute="Selector Pseudo" context="#pop" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="Within-@page" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <keyword attribute="Property" context="IsProperty" String="within-@page" />
                 <IncludeRules context="RuleSet" />
             </context>
 
             <context name="IsProperty" attribute="Error" lineEndContext="#stay">
                 <DetectSpaces attribute="Normal Text" />
                 <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
                 <IncludeRules context="FindComments" />
             </context>
 
             <context name="NestedAtRule" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <IncludeRules context="AtRuleValue" />
             </context>
 
             <context name="AtRule" attribute="Normal Text" lineEndContext="#pop">
                 <DetectSpaces />
                 <DetectChar attribute="Separator Symbol" context="#pop" char=";" />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
                 <IncludeRules context="AtRuleValue" />
             </context>
 
             <context name="UnknownAtRule" attribute="Normal Text" lineEndContext="#pop">
                 <DetectSpaces />
                 <DetectChar attribute="Separator Symbol" context="#pop" char=";" />
                 <DetectChar attribute="Normal Text" context="#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
                 <IncludeRules context="AtRuleValue" />
             </context>
 
             <context name="AtRuleValue" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Operator" context="#stay" char="&amp;" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <keyword attribute="Keyword" context="#stay" String="media operators" />
                 <RegExpr attribute="Property" context="#stay" String="[A-Za-z_-]+(?=\s*:)" />
                 <keyword attribute="Value" context="#stay" String="medias" />
                 <IncludeRules context="FindValues" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
             <context name="SelectorAttr" attribute="Selector Attribute" lineEndContext="#stay">
                 <DetectChar attribute="Selector Attribute" context="#pop" char="]" />
                 <IncludeRules context="FindStrings" />
                 <DetectChar   attribute="Operator" context="SelectorAttrValue" char="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="~" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="^" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="$" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="*" char1="=" />
                 <Detect2Chars attribute="Operator" context="SelectorAttrValue" char="|" char1="=" />
                 <DetectIdentifier />
             </context>
 
             <context name="SelectorAttrValue" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="Selector Attribute" context="#pop#pop" char="]" />
                 <DetectIdentifier />
             </context>
 
             <context name="SelectorPseudo" attribute="Selector Pseudo" lineEndContext="#pop">
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudoElements" char=":" />
-                <keyword attribute="Selector Pseudo" context="SelectorPseudoValueSelector" String="pseudoclass-not" />
+                <keyword attribute="Selector Pseudo" context="SelectorPseudoValueSelector" String="pseudoclass-selector" />
                 <keyword attribute="Selector Pseudo" context="SelectorPseudoValue" String="pseudoclasses" />
                 <RegExpr attribute="Selector Pseudo" context="SelectorPseudoValue" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="SelectorPseudoElements" attribute="Selector Pseudo" lineEndContext="#pop#pop">
                 <keyword attribute="Selector Pseudo" context="#pop!SelectorPseudoValue" String="pseudoelements" />
                 <RegExpr attribute="Selector Pseudo" context="#pop!SelectorPseudoValue" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="SelectorPseudoValueSelector" attribute="Selector Pseudo" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop#pop">
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudoValueCloseSelector" char="(" />
             </context>
 
             <context name="SelectorPseudoValueCloseSelector" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Selector Pseudo" context="#pop#pop#pop" char=")" />
                 <DetectChar attribute="Error" context="#pop#pop#pop!RuleSet" char="{" beginRegion="ruleset" />
                 <IncludeRules context="FindSelector" />
             </context>
 
             <context name="SelectorPseudoValue" attribute="Selector Pseudo" lineEndContext="#pop#pop" fallthrough="true" fallthroughContext="#pop#pop">
                 <DetectChar attribute="Selector Pseudo" context="SelectorPseudoValueClose" char="(" />
             </context>
 
             <context name="SelectorPseudoValueClose" attribute="Selector Pseudo" lineEndContext="#pop#pop#pop">
                 <DetectChar attribute="Selector Pseudo" context="#pop#pop#pop" char=")" />
                 <DetectIdentifier />
             </context>
 
             <context name="Comment" attribute="Comment" lineEndContext="#stay">
                 <DetectSpaces />
                 <Detect2Chars attribute="Comment" context="#pop#pop" char="*" char1="/" endRegion="comment" />
                 <IncludeRules context="##Alerts" />
                 <DetectIdentifier />
             </context>
 
             <context name="RuleSet" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop" char="}" endRegion="ruleset" />
                 <RegExpr attribute="Property" context="Rule" String="[A-Za-z_-]+\s*:($|[/{\s0-9$&quot;'])" lookAhead="true" />
                 <IncludeRules context="Base" />
                 <!-- auto-completion only, includes by a previous rule -->
                 <keyword attribute="Normal Text" context="#stay" String="properties" />
             </context>
 
             <context name="Rule" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Normal Text" context="RuleParameters" char=":" />
                 <Detect2Chars attribute="Variable" context="IsVariable" char="-" char1="-" />
                 <keyword attribute="Property" context="#stay" String="properties" />
                 <RegExpr attribute="Unknown Property" context="#stay" String="[^:]+" />
             </context>
 
             <context name="IsVariable" attribute="Normal Text" lineEndContext="#pop">
                 <DetectChar attribute="Normal Text" context="#pop!RuleParameters" char=":" />
                 <RegExpr attribute="Variable" context="#stay" String="[^:]+" />
             </context>
 
             <context name="RuleParameters" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <!-- Jump out conditions -->
                 <DetectChar attribute="Separator Symbol" context="#pop#pop" char=";" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <DetectChar attribute="Normal Text" context="#pop#pop#pop" char="}" endRegion="ruleset" />
                 <DetectChar attribute="Normal Text" context="SubRule" char="{" beginRegion="ruleset" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <IncludeRules context="FindValues" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
             <context name="SubRule" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <DetectChar attribute="Normal Text" context="#pop#pop#pop" char="}" endRegion="ruleset" />
                 <RegExpr attribute="Property" context="IsProperty" String="[A-Za-z_-]+(?=\s*:)" />
                 <RegExpr attribute="Variable" context="VariableDefine" String="\$[a-zA-Z0-9\-_]+(?=\s*:)" />
-                <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
+                <Detect2Chars attribute="Interpolation" context="InterpolationMaybeProperty" char="#" char1="{" />
                 <DetectIdentifier />
                 <AnyChar attribute="Error" context="#stay" String="*>+~|.#" />
                 <!-- auto-completion only, includes by previous rule -->
                 <keyword attribute="Normal Text" context="#stay" String="properties" />
                 <keyword attribute="Normal Text" context="#stay" String="sub-properties" />
             </context>
 
             <context name="Function" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Function" context="FunctionParameters" char="(" />
                 <StringDetect attribute="Function" context="FunctionVar" String="var(" />
                 <StringDetect attribute="Function" context="FunctionUrl" String="url(" />
                 <StringDetect attribute="Function" context="FunctionCalc" String="calc(" />
                 <keyword attribute="Function" context="#stay" String="functions" />
                 <RegExpr attribute="Function" context="#stay" String="[-a-zA-Z][-a-zA-Z0-9]*" />
             </context>
 
             <context name="FunctionVar" attribute="Variable" lineEndContext="#stay" fallthrough="true" fallthroughContext="#pop!FunctionParameters">
                 <DetectSpaces />
                 <IncludeRules context="FindComments" />
                 <RegExpr attribute="Variable" context="#pop!FunctionParameters" String="--[^ \t\),]+" />
             </context>
 
             <context name="FunctionCalc" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Function" context="#pop#pop" char=")" />
                 <IncludeRules context="Calc" />
             </context>
 
             <context name="NestedCalc" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Normal Text" context="#pop" char=")" />
                 <IncludeRules context="Calc" />
             </context>
 
             <context name="Calc" attribute="Normal Text" lineEndContext="#stay">
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
                 <DetectChar attribute="Normal Text" context="NestedCalc" char="(" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
                 <IncludeRules context="FindFunctions" />
                 <IncludeRules context="FindValues" />
                 <RegExpr attribute="Operator" context="#stay" String="[-](?=$|[ \t(,;])|[+](?=$|[^0-9)])|[/*]" />
                 <!-- auto-completion only -->
                 <keyword attribute="Normal Text" context="#stay" String="functions" />
             </context>
 
             <context name="FunctionUrl" attribute="Normal Text" lineEndContext="#stay" fallthrough="true" fallthroughContext="UrlValue">
                 <DetectSpaces />
                 <IncludeRules context="FindStrings" />
                 <DetectChar attribute="Function" context="#pop#pop" char=")" />
             </context>
 
             <context name="UrlValue" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="Function" context="#pop#pop#pop" char=")" />
             </context>
 
             <context name="FunctionParameters" attribute="Normal Text" lineEndContext="#stay">
                 <DetectSpaces />
                 <DetectChar attribute="Function" context="#pop#pop" char=")" />
                 <IncludeRules context="FindComments" />
                 <IncludeRules context="FindStrings" />
+                <IncludeRules context="FindFunctions" />
                 <IncludeRules context="FindValues" />
                 <DetectChar attribute="Separator Symbol" context="#stay" char="," />
+                <StringDetect attribute="Operator" String="..." />
             </context>
 
             <!-- string contexts -->
             <context name="StringDQ" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="String" context="#pop" char="&quot;" />
                 <IncludeRules context="InsideString" />
             </context>
 
             <context name="StringSQ" attribute="String" lineEndContext="#stay">
                 <DetectChar attribute="String" context="#pop" char="'" />
                 <IncludeRules context="InsideString" />
             </context>
 
             <context name="InsideString" attribute="String" lineEndContext="#stay">
                 <Detect2Chars attribute="Interpolation" context="Interpolation" char="#" char1="{" />
                 <RegExpr attribute="SpecialChar" context="#stay" String="\\([0-9A-Fa-f]{1,6}|.?)" />
                 <RegExpr attribute="String" context="#stay" String="\\?[^#&quot;'\\]+" />
             </context>
 
         </contexts>
 
         <itemDatas>
             <itemData name="Normal Text" defStyleNum="dsNormal" spellChecking="false"/>
             <itemData name="At Rule" defStyleNum="dsImport" spellChecking="false"/>
             <itemData name="Keyword" defStyleNum="dsKeyword" spellChecking="false"/>
             <itemData name="Property" defStyleNum="dsKeyword" spellChecking="false"/>
             <itemData name="Unknown Property" defStyleNum="dsNormal" spellChecking="false"/>
             <itemData name="String" defStyleNum="dsString"/>
             <itemData name="SpecialChar" defStyleNum="dsSpecialChar" spellChecking="false"/>
             <itemData name="Interpolation" defStyleNum="dsOperator" spellChecking="false"/>
             <itemData name="Operator" defStyleNum="dsOperator" spellChecking="false"/>
             <itemData name="Separator Symbol" defStyleNum="dsOperator" spellChecking="false"/>
             <itemData name="Value" defStyleNum="dsDecVal" spellChecking="false"/>
             <itemData name="Number" defStyleNum="dsDecVal" spellChecking="false"/>
             <itemData name="Value Keyword" defStyleNum="dsBuiltIn" spellChecking="false"/>
             <itemData name="Color" defStyleNum="dsConstant" spellChecking="false"/>
             <itemData name="Unit" defStyleNum="dsDataType" spellChecking="false"/>
             <itemData name="Variable" defStyleNum="dsVariable" spellChecking="false"/>
             <itemData name="Function" defStyleNum="dsFunction" spellChecking="false"/>
             <itemData name="Annotation" defStyleNum="dsAttribute" spellChecking="false"/>
             <itemData name="Selector Id" defStyleNum="dsPreprocessor" bold="1" spellChecking="false"/>
             <itemData name="Selector Class" defStyleNum="dsFunction" spellChecking="false"/>
             <itemData name="Selector Attribute" defStyleNum="dsExtension" spellChecking="false"/>
             <itemData name="Selector Pseudo" defStyleNum="dsInformation" italic="1" spellChecking="false"/>
             <itemData name="Selector Tag" defStyleNum="dsNormal" spellChecking="false"/>
             <itemData name="Placeholder Selector" defStyleNum="dsBuiltIn" spellChecking="false"/>
             <itemData name="Comment" defStyleNum="dsComment" />
             <itemData name="Region Marker" defStyleNum="dsRegionMarker" spellChecking="false"/>
             <itemData name="Error" defStyleNum="dsError" spellChecking="false"/>
         </itemDatas>
     </highlighting>
 
     <general>
         <keywords casesensitive="0" weakDeliminator="-%@" />
         <comments>
             <comment name="multiLine" start="/*" end="*/" />
         </comments>
     </general>
 
 </language>