Skip to content

Instantly share code, notes, and snippets.

@lunelson
Created July 3, 2021 16:16
Show Gist options
  • Save lunelson/324afc0787141d0ce0920a4873117f70 to your computer and use it in GitHub Desktop.
Save lunelson/324afc0787141d0ce0920a4873117f70 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use 'sass:string';
@use 'sass:meta';
@function var-if($cond-var, $true-val, $false-val) {
$id: string.unique-id();
@return string.unquote('var(--#{$id}, #{$false-val}); --#{$id}: var(#{$cond-var}) #{$true-val}');
}
@function var-toggle($bool) {
@return if($bool, string.unquote('/*!*/ /*!*/'), initial);
}
@mixin var-toggle($var, $bool) {
#{$var}: if($bool, string.unquote('/*!*/ /*!*/'), initial);
}
:root {
--is-bg-dark: #{var-toggle(false)};
}
.bg-pink {
--bg-rgb: pink;
--is-bg-dark: #{var-toggle(false)};
}
.bg-blue {
--bg-rgb: blue;
--is-bg-dark: #{var-toggle(true)};
--bg-tone-max: rgb(230,230,255);
--bg-tone-min: rgb(0,0,15);
}
[class*=bg-] {
--bg-con-if-dark: var(--is-bg-dark) white;
--bg-con: var(--bg-con-if-dark, black);
}
.test {
--is-big: #{var-toggle(true)};
test: var-if(--is-big, 200px, 400px);
background-color: var(--bg-rgb);
width: 200px;
width: var-if(--is-bg-dark, 200px, 400px);
height: 200px;
color: var(--bg-con);
}
.test.bg-pink
p hello world
p.fg-tone-2 hello world
.test.bg-blue
p hello world
p.fg-tone-2 hello world
:root {
--is-bg-dark: initial;
}
.bg-pink {
--bg-rgb: pink;
--is-bg-dark: initial;
}
.bg-blue {
--bg-rgb: blue;
--is-bg-dark: /*!*/ /*!*/;
--bg-tone-max: rgb(230,230,255);
--bg-tone-min: rgb(0,0,15);
}
[class*=bg-] {
--bg-con-if-dark: var(--is-bg-dark) white;
--bg-con: var(--bg-con-if-dark, black);
}
.test {
--is-big: /*!*/ /*!*/;
test: var(--ukn6a3y, 400px); --ukn6a3y: var(--is-big) 200px;
background-color: var(--bg-rgb);
width: 200px;
width: var(--ukn6a3z, 400px); --ukn6a3z: var(--is-bg-dark) 200px;
height: 200px;
color: var(--bg-con);
}
<div class="test bg-pink">
<p>hello world</p>
<p class="fg-tone-2">hello world</p>
</div>
<div class="test bg-blue">
<p>hello world</p>
<p class="fg-tone-2">hello world</p>
</div>
{
"sass": {
"compiler": "dart-sass/1.32.12",
"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