Created
October 18, 2021 23:04
-
-
Save krivaten/ee024bc86996c38f7bd2d0c00a370442 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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); | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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