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

83 lines
1.6 KiB
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');
}