GOOGLE ADS

domingo, 17 de abril de 2022

Haga un bucle de listas anidadas de dos niveles en SCSS para crear un @font-face dinámico

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, secondaryy tertiary) y luego cada variante ( extra-light, light, regular, bold) de cada tipo.

Quiero construir una @font-facepropiedad 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: containses 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:

ingrese la descripción de la imagen aquí

No hay comentarios:

Publicar un comentario

Regla de Firestore para acceder a la generación de subcolección Permisos faltantes o insuficientes

Tengo problemas con las reglas de Firestore para permitir el acceso a algunos recursos en una subcolección. Tengo algunos requests document...