es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

SASS: @use no permite acceder a las variables del espacio de nombres.

Estoy tratando de acceder a variables de un módulo diferente a través de @use. Aunque uso un prefijo de espacio de nombres, aún recibo el siguiente error:

Error de compilación
Error: CSS no válido después de “…round: branding”: se esperaba una expresión (por ejemplo, 1px, negrita), pero se encontró “.$ primary;”
en la línea 18 de sass/Users/bjorngrundtal/Desktop/sass/css/style.sass
& gt;& gt; fondo: branding.$ primary;

Aquí está style.sass

@use ‘abstracts/branding’ as branding

@mixin center($text-align: center)
margen: 0 auto
text-align: $text-align

%nospace
padding: 0
margen: 0

cuerpo
@extend %nospace

encabezado
@extend %nospace
ancho: 100vw
altura: 32vh
background: branding.$ primary
h1
color: branding.$ bright
p
color: branding.$ secondary

pie de página
@extend encabezado

Y las variables en abstracts/_branding.sass

$ primary: # ff00ff
$ secondary: # 00fff0
$ brillante: #fff

Cualquier consejo sobre lo que estoy haciendo mal será muy apreciado! 😊 Estoy usando VSC con la extensión Live SASS.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Parece que el error está relacionado con cómo intentas acceder a las variables del espacio de nombres branding. En Sass v1, solo puedes acceder a las variables y mixins del espacio de nombres directamente (es decir, sin usar $) cuando se definen en el mismo módulo donde se coloca la directiva @use.

    En tu caso, necesitas agregar el prefijo del espacio de nombres a los nombres de tus variables usando $ cuando intentes acceder a ellas en el archivo style.sass. Entonces, tu propiedad background debería ser:

    background: branding.$primary;
    

    Además, asegúrate de que ambos archivos tengan la extensión .sass, ya que es lo que especificas en la directiva @use. Del mismo modo, asegúrate de que estás importando correctamente el archivo style.sass en tu HTML. Si el error persiste, intenta reiniciar tu extensión Live SASS o verifica si hay algún problema con tu compilador Sass.

    ¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.