2025-07-16 13:34:49 +02:00
|
|
|
// Mixin to generate css variables
|
2025-07-15 12:41:52 +02:00
|
|
|
// If the variable has no prefix, don't assign anything to the $prefix attribute, leave its default value: “”
|
|
|
|
@mixin generate-css-variables($map, $prefix: "") {
|
|
|
|
@if $prefix == "" {
|
|
|
|
@each $name, $value in $map {
|
|
|
|
--#{$name}: #{$value};
|
|
|
|
}
|
|
|
|
} @else {
|
|
|
|
@each $name, $value in $map {
|
|
|
|
--#{$prefix}-#{$name}: #{$value};
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2025-07-16 13:34:49 +02:00
|
|
|
|
|
|
|
// Mixin to generate typography css classes
|
2025-07-16 14:26:46 +02:00
|
|
|
@mixin generate-typo-class($map, $name) {
|
2025-07-16 14:25:00 +02:00
|
|
|
.#{$name} {
|
2025-07-16 14:04:26 +02:00
|
|
|
@each $key, $value in $map {
|
|
|
|
@if $key == "family" {
|
|
|
|
font-family: $value;
|
|
|
|
} @else if $key == "size" {
|
|
|
|
font-size: $value;
|
|
|
|
} @else if $key == "weight" {
|
|
|
|
font-weight: $value;
|
|
|
|
} @else if $key == "line-height" {
|
|
|
|
line-height: $value;
|
|
|
|
} @else if $key == "style" {
|
|
|
|
font-style: $value;
|
|
|
|
} @else if $key == "text-transform" {
|
|
|
|
text-transform: $value;
|
|
|
|
} @else if $key == "text-decoration" {
|
|
|
|
text-decoration: $value;
|
|
|
|
}
|
2025-07-16 13:34:49 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|