Tengo una lista como:
$fonts: (
primary: (
extra-light: (
family:'Literata',
weight: 200,
style: normal,
display: swap,
src: url('/assets/fonts/Literata-Regular.woff2'),
),
light: (
family: 'Literata',
weight: 300,
style: normal,
display: swap,
src: url('/assets/fonts/Literata-Regular.woff2'),
),
regular: (
family: 'Literata',
weight: 400,
style: normal,
display: swap,
src: url('/assets/fonts/Literata-Regular.woff2'),
),
bold: (
family: 'Literata',
weight: 700,
style: normal,
display: swap,
src: url('/assets/fonts/Literata-Regular.woff2'),
),
),
secondary: (
light: (
family: 'Zilla Slab',
weight: 300,
style: normal,
display: swap,
src: url('/assets/fonts/Zilla-Slab-Regular.woff2'),
),
regular: (
family: 'Zilla Slab',
weight: 400,
style: normal,
display: swap,
src: url('/assets/fonts/Zilla-Slab-Regular.woff2'),
),
bold: (
family: 'Zilla Slab',
weight: 700,
style: normal,
display: swap,
src: url('/assets/fonts/Zilla-Slab-Bold.woff2'),
),
),
tertiary: (
regular: (
family: 'Montserrat',
weight: 400,
style: normal,
display: swap,
src: url('/assets/fonts/Montserrat-Regular.woff2'),
),
),
);
Mi objetivo es recorrer cada tipo de fuente ( primary
, secondary
y tertiary
) y luego cada variante ( extra-light
, light
, regular
, bold
) de cada tipo.
Quiero construir una @font-face
propiedad dinámica basada en cada dato de fuente.
He intentado algo como esto sin éxito:
@each $font-types in $fonts {
$properties: family weight style src;
@each $property, $values in $font-types {
@if contains($properties, $property) {
@font-face {
@if $property!= 'src' {
font-#{$property}: map-get($font-properties, $property);
} @else{
src: map-get($font-properties, $property) format('woff2');
}
}
}
}
}
Para el registro: contains
es una función auxiliar:
@function contains($list, $values...) {
@each $value in $values {
@if type-of(index($list, $value))!= 'number' {
@return false;
}
}
@return true;
}
Solución del problema
Para aquellos que puedan ayudar: terminé usando el siguiente enfoque:
@each $font-type, $font-variants in $fonts {
@each $properties, $font-variant in $font-variants {
@font-face {
@each $property, $value in $font-variant {
@if $property!= 'src' {
font-#{$property}: $value;
} @else {
#{$property}: $value format('woff2');
}
}
}
}
}
Produce lo siguiente:
No hay comentarios:
Publicar un comentario