@use y @import reglas en SCSS

@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.

 

@use y @import reglas en SCSS

POSICIONA TU FICHA GOOGLE MY BUSINESS PARA SEO LOCAL

POSICIONA TU FICHA GOOGLE MY BUSINESS PARA SEO LOCAL

POSICIONA TU FICHA GOOGLE MY BUSINESS PARA SEO LOCAL Posiciona tu ficha Google my business para SEO local con Álvaro ...
Leer Más
Cómo encontrar Dominios caducados y de alto Page Rank

Cómo encontrar Dominios caducados y de alto Page Rank

Cómo encontrar Dominios caducados y de alto Page Rank Como tener una buena estrategia de SEO que nos ayude a ...
Leer Más
herramientas Posicionamiento SEO

Herramientas Posicionamiento SEO más importantes

Herramientas Posicionamiento SEO más importantes Depende del enfoque SEO que quieras dar. Si estas buscando herramientas gratuitas te recomiendo Ubersuggest de Neil Patel (es ...
Leer Más
SEO Posicionamiento vínculos de calidad

SEO Posicionamiento vínculos de calidad

SEO Posicionamiento vínculos de calidad Conseguir enlaces SEO requiere mucho tiempo y esfuerzo. Quienquiera que te diga que la construcción ...
Leer Más
Posicionamiento SEO herramientas gratuitas

Posicionamiento SEO herramientas gratuitas

Posicionamiento SEO herramientas gratuitas ¿Quieres herramientas gratuitas para hacer SEO? La idea principal de este post es un recopilatorio de ...
Leer Más
Herramientas de auditoria paginas web SEO

Herramientas de auditoria paginas web SEO

Herramientas de auditoria paginas web SEO Recientemente he notado que todos mis lunes parecen difuminarse en un día gigantesco, donde ...
Leer Más
popup

Cómo mostrar ventana emergente de forma automática usando modal bootstrap

Cómo mostrar ventana emergente de forma automática usando modal bootstrap En este post os voy a dejar el código necesario ...
Leer Más
diseño web valencia

Algoritmos de Planificacion FCFS, SJF, SRTF, ROUND ROBIND

Algoritmos de Planificacion FCFS, SJF, SRTF, ROUND ROBIND Programación de Servicios y Procesos Introducción Aquí vamos a centrarnos en analizar ...
Leer Más
seo-serp

Herramientas necesarias Posicionamiento SEO

Herramientas necesarias Posicionamiento SEO Hola en este post os traigo una colección de enlaces importantes cara al Posicionamiento web. Son ...
Leer Más

#import #reglas #SCSS

@use y @import reglas en SCSS

Tags:
, ,
No Comments

Sorry, the comment form is closed at this time.