diff --git a/autotests/folding/highlight.sass.fold b/autotests/folding/highlight.sass.fold
new file mode 100644
--- /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
--- a/autotests/folding/highlight.scss.fold
+++ b/autotests/folding/highlight.scss.fold
@@ -706,4 +706,14 @@
 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
--- a/autotests/html/highlight.css.html
+++ b/autotests/html/highlight.css.html
@@ -135,7 +135,7 @@
 }
 
 <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>,
diff --git a/autotests/html/highlight.sass.html b/autotests/html/highlight.sass.html
new file mode 100644
--- /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
--- a/autotests/html/highlight.scss.html
+++ b/autotests/html/highlight.scss.html
@@ -134,7 +134,7 @@
 }
 
 <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>,
@@ -407,7 +407,7 @@
 <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;
@@ -419,7 +419,7 @@
 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>;
 }
@@ -670,12 +670,12 @@
 
 <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> {
@@ -712,5 +712,15 @@
 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
--- a/autotests/html/review128925-1.scss.html
+++ b/autotests/html/review128925-1.scss.html
@@ -131,7 +131,7 @@
 <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>;
 
 
diff --git a/autotests/input/highlight.sass b/autotests/input/highlight.sass
new file mode 100644
--- /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
--- a/autotests/input/highlight.scss
+++ b/autotests/input/highlight.scss
@@ -706,4 +706,14 @@
 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
--- a/autotests/reference/highlight.css.ref
+++ b/autotests/reference/highlight.css.ref
@@ -129,7 +129,7 @@
 <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/>
diff --git a/autotests/reference/highlight.sass.ref b/autotests/reference/highlight.sass.ref
new file mode 100644
--- /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
--- a/autotests/reference/highlight.scss.ref
+++ b/autotests/reference/highlight.scss.ref
@@ -128,7 +128,7 @@
 <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/>
@@ -401,7 +401,7 @@
 <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/>
@@ -413,7 +413,7 @@
 <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/>
@@ -664,12 +664,12 @@
 <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/>
@@ -706,4 +706,14 @@
 <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
--- a/autotests/reference/review128925-1.scss.ref
+++ b/autotests/reference/review128925-1.scss.ref
@@ -125,7 +125,7 @@
 <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/>
diff --git a/data/syntax/css.xml b/data/syntax/css.xml
--- a/data/syntax/css.xml
+++ b/data/syntax/css.xml
@@ -38,7 +38,8 @@
 
 -->
 
-<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">
@@ -1258,8 +1259,9 @@
             <item>selection</item>
         </list>
 
-        <list name="pseudoclass-not">
+        <list name="pseudoclass-selector">
             <item>not</item>
+            <item>matches</item>
         </list>
 
         <list name="pseudoclasses-@page">
@@ -1383,17 +1385,18 @@
                 <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' -->
@@ -1548,7 +1551,7 @@
 
             <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>
diff --git a/data/syntax/sass.xml b/data/syntax/sass.xml
new file mode 100644
--- /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
--- a/data/syntax/scss.xml
+++ b/data/syntax/scss.xml
@@ -34,7 +34,7 @@
 
 -->
 
-<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">
@@ -422,8 +422,8 @@
             <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">
@@ -531,15 +531,14 @@
                 <!-- 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">
@@ -584,6 +583,22 @@
                 <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">
@@ -597,9 +612,10 @@
                 <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="{" />
@@ -610,7 +626,7 @@
             </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' -->
@@ -659,7 +675,6 @@
                 <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 -->
@@ -694,6 +709,7 @@
                 <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">
@@ -815,7 +831,7 @@
 
             <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>
@@ -894,7 +910,7 @@
                 <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 -->
@@ -956,8 +972,10 @@
                 <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 -->