01 Jun @use y @import reglas en SCSS

Posted at 23:46h in Diseño paginas web by PanelEmilio2019

Tabla de Contenidos

@use y @import reglas en SCSS

Introducción: ¿qué es SCSS?

SCSS es un preprocesador de CSS que se utiliza para mantener su CSS más organizado y conciso. Proporciona herramientas como mixins, variables y funciones (en SCSS estos se llaman miembros) y te permite anidar tus estilos. Los navegadores no pueden leer SCSS, por lo que su código debe pasar por un proceso de empaquetado antes de enviarse al navegador como CSS simple.

Los estilos de proyectos más grandes generalmente se dividen en parciales para que sea más fácil encontrar el código al que debe dirigirse. Tener una estructura de archivos clara hace que su proyecto sea más fácil de administrar y realizar cambios, y dividir sus estilos en secciones más pequeñas lo ayuda a realizar un seguimiento.

Los parciales se pueden cargar dentro de otras hojas de estilo para crear estilos globales para componentes y secciones en su sitio, lo que a su vez ayuda a mantener su código SECO y legible. Aquí es donde veremos la regla @use y en qué se diferencia de su predecesora @import.

Visite la guía oficial de Sass para obtener más información sobre SCSS.

@importación frente a @use

Básicamente, ambas reglas hacen lo mismo: cargar miembros dentro de otro módulo. Las principales diferencias es cómo manejan a los miembros. @import hace que todo sea accesible globalmente en el archivo de destino. Esto permite una cadena interminable de archivos importados donde es difícil rastrear de dónde provienen sus variables y mixins. También permite la superposición y hace que sea difícil rastrear por qué se rompe su CSS perfecto. Este es un problema especialmente con estructuras de archivos complejas y proyectos con múltiples contribuyentes y bibliotecas globales, por lo que Sass ya no recomienda @import.

Cómo funciona la regla @use

Al igual que @import, la regla @use nos permite dividir nuestra hoja de estilo en secciones más pequeñas y prácticas y cargarlas dentro de otras hojas de estilo. La diferencia clave es cómo accede a los miembros de los archivos originales. Para hacer esto, deberá consultar el espacio de nombres del archivo original. Aquí hay un ejemplo de parciales SCSS simples.

Defina variables de botón básicas y mixins en el parcial _button.scss:

// _button.scss $ radio: 0.5rem; @mixin buttonSmall radio del borde: $ radio; acolchado: 1rem;

Para usar sus miembros _button.scss en otro elemento, agregue su regla @use en la parte superior de su archivo. Deberá consultar el archivo original cuando utilice sus miembros. Para ello, agregue su espacio de nombres delante del miembro. De forma predeterminada, el espacio de nombres es el nombre del archivo original.

// _box.scss @use ‘button’; .boxButton @include button.buttonSmall; margen: 1rem + botón. $ radio;

En CSS simple, _box.scss se ve así:

//_box.scss .boxButton border-radius: 0.5rem; acolchado: 1rem; margen: 1.5rem;

En este ejemplo, podemos ver rápidamente dónde se definieron los miembros utilizados en el archivo _box.scss. Si hubiéramos usado @import en lugar de @use, no tendríamos forma directa de conocer el origen y el valor de nuestros miembros. Esto también permite el uso de nombres muy simples como radio y borde, lo que ayuda a mantener su código ordenado.

Con @import dar a sus miembros nombres tan simples anularía cualquier variable $ radius previamente establecida y mezcla de botones. Esto significaría tener más cuidado con lo que está anulando. Resulta útil cuando se usa una biblioteca global: puede usar nombres «genéricos» para cosas sin temor a sobrescribir cosas en proyectos específicos.

@hacia adelante

Puede hacer más cargando sus hojas de estilo en SCSS, pero una de las más útiles en relación con @use es la regla @forward. Le permite acceder a los miembros a través de otro archivo. He aquí un ejemplo rápido.

// _button.scss $ padding: 1rem; //_box.scss @use ‘button’; .boxButton padding: button. $ padding; // 1rem; //_newBox.scss @use ‘box’; .newBoxButton padding: button. $ padding; // ???

_NewBox.scss no puede acceder a la variable desde _button.scss. Necesitaremos pasar los estilos explícitamente hacia adelante. La regla @forward carga los estilos como si estuvieran definidos dentro del archivo de destino.

//_box.scss @use ‘button’; @forward ‘botón’; // recrea la variable de _button.scss dentro del archivo actual .boxButton padding: button. $ padding; // 1rem; //_newBox.scss @use ‘box’; .newBoxButton padding: box. $ padding // 1rem;

Familiarícese con la regla @use para mantener sus proyectos organizados y ordenados y evitar conflictos y errores de CSS. Utilice @forward para controlar qué archivos pueden acceder a qué miembros. Para obtener más consejos y trucos, consulte la documentación de Sass y para actualizar sus proyectos, consulte la herramienta de migración.