Skip to content

Instantly share code, notes, and snippets.

@nex3
Created Apr 9, 2021
Embed
What would you like to do?
Generated by SassMeister.com.
@use 'sass:string';
@mixin declare-toggle-var($variable, $toggle) {
@if string.slice($variable, 1, 2) != "--" {
@error "$variable: Must start with --, was \"#{$variable}\"."
}
$name: string.slice($variable, 3);
--#{$name}: initial;
--#{$name}--inverse: ;
@stv-toggled (#{$toggle}) {
--#{$name}: ;
--#{$name}-inverse: initial;
}
}
@function if-toggle-var($variable, $if-true, $if-false: null) {
@return var(#{$variable}, $if-true) $if-false and var(#{$variable}-inverse, $if-false);
}
:root {
@include declare-toggle-var(--toggle, toggle);
}
body {
min-height: 100%;
color: if-toggle-var(--dark, white);
background: if-toggle-var(--dark, papayawhip, black);
}
:root {
--toggle: initial;
--toggle--inverse: ;
}
@stv-toggled (toggle) {
:root {
--toggle: ;
--toggle-inverse: initial;
}
}
body {
min-height: 100%;
color: var(--dark, white);
background: var(--dark, papayawhip) var(--dark-inverse, black);
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment