Skip to content

Instantly share code, notes, and snippets.

@krivaten
Created October 18, 2021 23:04
Show Gist options
  • Save krivaten/ee024bc86996c38f7bd2d0c00a370442 to your computer and use it in GitHub Desktop.
Save krivaten/ee024bc86996c38f7bd2d0c00a370442 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@use "sass:list";
@function is-variable-ref($string) {
@return str-slice(#{$string}, 0, 2) == '--';
}
@function is-variable($string) {
@return str-slice(#{$string}, 0, 3) == 'var';
}
@function str-replace($string, $search, $replace: '') {
$index: str-index($string, $search);
@if $index {
@return str-slice($string, 1, $index - 1) + $replace +
str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
}
@return $string;
}
@function var-list($values...) {
$result: '';
@each $value in $values {
$is-first: $value == list.nth($values, 1);
$is-last: $value == list.nth($values, -1);
$is-variable-ref: is-variable-ref($value);
$is-variable: is-variable($value);
$append-value: $value;
@if not $is-variable-ref and not $is-last {
@error ("\"#{$value}\" is not valid. All but the last argument must be a reference to a CSS Variable");
}
@if $is-variable {
$clean-value: str-replace("#{str-replace($value, "var(")}", ")");
@error ("\"#{$value}\" is not valid. Please provide just the reference to the CSS Variable name (i.e., #{$clean-value}).");
}
@if $is-variable-ref and not $is-last {
$append-value: unquote('var(#{$value}, FALLBACK)');
} @else if $is-variable-ref {
$append-value: unquote('var(#{$value})');
} @else {
$append-value: $value;
}
@if $is-first {
$result: $append-value;
} @else {
$result: str-replace($result, 'FALLBACK', $append-value);
}
}
@return $result;
}
body {
background: var-list(--color-yellow, --color-red, #990000);
color: var-list(--color-yellow, --color-red, --color-brown);
margin: var-list(--scale-margin, 15px);
background: var-list(red);
}
body {
background: var(--color-yellow, var(--color-red, #990000));
color: var(--color-yellow, var(--color-red, var(--color-brown)));
margin: var(--scale-margin, 15px);
background: red;
}
{
"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