bat/tests/syntax-tests/source/SCSS/example.scss

@import 'fonts';

$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),
);

$current_theme: $theme_main;

@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');
}