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

83 lines
13 KiB
SCSS
Raw Normal View History

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