diff --git a/tests/syntax-tests/highlighted/SCSS/example.scss b/tests/syntax-tests/highlighted/SCSS/example.scss
index ed78c867..7ba949d8 100644
--- a/tests/syntax-tests/highlighted/SCSS/example.scss
+++ b/tests/syntax-tests/highlighted/SCSS/example.scss
@@ -1,19 +1,82 @@
-@mixin button-base() {
-  @include typography(button);
-  @include ripple-surface;
-  @include ripple-radius-bounded;
+@import 'fonts';
 
-  display: inline-flex;
-  position: relative;
-  height: $button-height;
-  border: none;
-  vertical-align: middle;
+$theme_dark: (
+  "background-color": null,
+);
+$theme_main: (
+  "text-size": 3em,
+  "text-color": black,
+  "text-shadow": #36ad 0px 0px 3px,
+  "card-background": #d6f,
+  "card-shadow": #11121212 0px 0px 2px 1px,
+  "card-padding": 1rem,
+  "card-margin": 0.5in,
+  "image-width": 600px,
+  "image-height": 100vh,
+  "background-color": #dedbef,
+  "i-ran-out-of-placeholders-for-units": (1vw 100% 60pt),
+);
 
-  &:hover { cursor: pointer; }
+$current_theme: $theme_main;
 
-  &:disabled {
-    color: $mdc-button-disabled-ink-color;
-    cursor: default;
-    pointer-events: none;
-  }
-}
+@mixin themed() {
+  $current_theme: $theme_main !global;
+  @content;
+
+  @media (prefers-color-scheme: dark) {
+  	$current_theme: $theme_dark !global;
+  	@content;
+  }
+  
+  .#{"dark"} & {
+    $current_theme: $theme_dark !global;
+    @content;
+  }
+}
+
+@function theme($variable) {
+  @if map-has_key($current_theme, $variable) {
+    @return map-get($current_theme, $variable);
+  } @else {
+    @error "Unknown theme variable: #{$variable}";
+  }
+}
+
+body {
+  @include themed {
+    background-color: theme('background-color');
+    background-image: url("https://github.com/sharkdp/bat/raw/master/doc/logo-header.svg");
+  }
+  
+  header[data-selectable="false"] {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: /* CSS comment */ none;
+    cursor: default !important; // SCSS comment
+  }
+  
+  > div {
+    border: #04f 1px solid;
+    
+    &::after {
+      content: 'Pseudo';
+      color: #2F5F7F;
+      box-sizing: border-box;
+    }
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg)}
+  100% {transform: rotate(0rad);}
+}
+
+@font-face {
+  font-family: 'Example Font';
+  src: url(example.ttf) format('ttf');
+  src: local('Comic Sans MS');
+}
diff --git a/tests/syntax-tests/source/SCSS/LICENSE.md b/tests/syntax-tests/source/SCSS/LICENSE.md
deleted file mode 100644
index ee554ef1..00000000
--- a/tests/syntax-tests/source/SCSS/LICENSE.md
+++ /dev/null
@@ -1,25 +0,0 @@
-This file has been copied from https://sass-lang.com/documentation/syntax
-
-
-LICENSE:
-
-
-Copyright (c) 2006-2018 Hampton Catlin, Natalie Weizenbaum, Chris Eppstein, and
-Jina Anne
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/tests/syntax-tests/source/SCSS/example.scss b/tests/syntax-tests/source/SCSS/example.scss
index 9f948578..14b622e0 100644
--- a/tests/syntax-tests/source/SCSS/example.scss
+++ b/tests/syntax-tests/source/SCSS/example.scss
@@ -1,19 +1,82 @@
-@mixin button-base() {
-  @include typography(button);
-  @include ripple-surface;
-  @include ripple-radius-bounded;
+@import 'fonts';
 
-  display: inline-flex;
-  position: relative;
-  height: $button-height;
-  border: none;
-  vertical-align: middle;
+$theme_dark: (
+  "background-color": null,
+);
+$theme_main: (
+  "text-size": 3em,
+  "text-color": black,
+  "text-shadow": #36ad 0px 0px 3px,
+  "card-background": #d6f,
+  "card-shadow": #11121212 0px 0px 2px 1px,
+  "card-padding": 1rem,
+  "card-margin": 0.5in,
+  "image-width": 600px,
+  "image-height": 100vh,
+  "background-color": #dedbef,
+  "i-ran-out-of-placeholders-for-units": (1vw 100% 60pt),
+);
 
-  &:hover { cursor: pointer; }
+$current_theme: $theme_main;
 
-  &:disabled {
-    color: $mdc-button-disabled-ink-color;
-    cursor: default;
-    pointer-events: none;
+@mixin themed() {
+  $current_theme: $theme_main !global;
+  @content;
+
+  @media (prefers-color-scheme: dark) {
+  	$current_theme: $theme_dark !global;
+  	@content;
+  }
+  
+  .#{"dark"} & {
+    $current_theme: $theme_dark !global;
+    @content;
   }
 }
+
+@function theme($variable) {
+  @if map-has_key($current_theme, $variable) {
+    @return map-get($current_theme, $variable);
+  } @else {
+    @error "Unknown theme variable: #{$variable}";
+  }
+}
+
+body {
+  @include themed {
+    background-color: theme('background-color');
+    background-image: url("https://github.com/sharkdp/bat/raw/master/doc/logo-header.svg");
+  }
+  
+  header[data-selectable="false"] {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: /* CSS comment */ none;
+    cursor: default !important; // SCSS comment
+  }
+  
+  > div {
+    border: #04f 1px solid;
+    
+    &::after {
+      content: 'Pseudo';
+      color: #2F5F7F;
+      box-sizing: border-box;
+    }
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg)}
+  100% {transform: rotate(0rad);}
+}
+
+@font-face {
+  font-family: 'Example Font';
+  src: url(example.ttf) format('ttf');
+  src: local('Comic Sans MS');
+}