72 lines
1.4 KiB
SCSS
72 lines
1.4 KiB
SCSS
@use 'sass:math';
|
|
@use 'sass:map';
|
|
|
|
@mixin set-css-var-value($name, $value) {
|
|
#{joinVarName($name)}: #{$value};
|
|
}
|
|
|
|
@function joinVarName($list) {
|
|
$name: '--ba';
|
|
|
|
@each $item in $list {
|
|
@if $item !='' {
|
|
$name: '#{$name}-#{$item}';
|
|
}
|
|
}
|
|
|
|
@return $name;
|
|
}
|
|
|
|
@mixin set-css-var-value2($name, $value) {
|
|
@if $value=='' {}
|
|
|
|
@else {
|
|
#{joinVarName2($name)}: #{$value};
|
|
}
|
|
|
|
}
|
|
|
|
@function joinVarName2($list) {
|
|
$name: '--el';
|
|
|
|
@each $item in $list {
|
|
@if $item !='' {
|
|
$name: #{$name}+'-'+#{$item};
|
|
}
|
|
}
|
|
|
|
@return $name;
|
|
}
|
|
|
|
@function getCssVarName($args...) {
|
|
@return joinVarName($args);
|
|
}
|
|
|
|
/*
|
|
* 通过映射设置所有的CSS变量
|
|
*/
|
|
@mixin set-component-css-var($name, $variables) {
|
|
|
|
@each $attribute,
|
|
$value in $variables {
|
|
@if $attribute =='default' {
|
|
#{getCssVarName($name)}: #{$value};
|
|
}
|
|
|
|
@else {
|
|
#{getCssVarName($name, $attribute)}: #{$value};
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin set-css-color-type($colors, $type) {
|
|
@include set-css-var-value2(('color', $type), map.get($colors, $type, 'base'));
|
|
|
|
@each $i in (3, 5, 7, 8, 9) {
|
|
@include set-css-var-value2(('color', $type, 'light', $i),
|
|
map.get($colors, $type, 'light-#{$i}'));
|
|
}
|
|
|
|
@include set-css-var-value2(('color', $type, 'dark-2'),
|
|
map.get($colors, $type, 'dark-2'));
|
|
} |