mirror of https://github.com/vizality/vizality
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
936 B
49 lines
936 B
// Generates CSS custom properties (vars) from a map
|
|
|
|
@mixin generate-css-vars($map, $path: null) {
|
|
@each $key, $value in $map {
|
|
$p: if($path, #{$path}-#{$key}, $key);
|
|
@if type-of($value) == map {
|
|
@include generate-css-vars($value, $p);
|
|
}
|
|
@else {
|
|
@if ($value != null) {
|
|
--#{$p}: #{$value};
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
// Example
|
|
// ********************
|
|
//
|
|
// $module: (
|
|
// 'button': (
|
|
// 'background': '#0366d6',
|
|
// 'primary': (
|
|
// 'background': '#ff0000',
|
|
// 'box-shadow': '0 0 10px #000',
|
|
// 'color': '#fff',
|
|
// )
|
|
// )
|
|
// );
|
|
|
|
// :root {
|
|
// @include generate-css-vars-from-map($module);
|
|
// }
|
|
|
|
// *********************
|
|
|
|
// Compiled Output
|
|
// ********************
|
|
|
|
// :root {
|
|
// --button-background: #0366d6;
|
|
// --button-primary-background: #ff0000;
|
|
// --button-primary-box-shadow: 0 0 10px #000;
|
|
// --button-primary-color: #fff;
|
|
// }
|
|
|
|
// *********************
|