@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

Posicionar una Web

Posicionar una Web en los primeros puestos de Google

Posicionar una Web en los primeros puestos de Google Posicionar una Web en los primeros puestos de Google. Te digo ...
Qué quiere Google para posicionarte en los primeros lugares

Qué quiere Google para posicionarte en los primeros lugares

Qué quiere Google para posicionarte en los primeros lugares Qué quiere Google para posicionarte en los primeros lugares. Vamos a ...
SEO

Qué es el SEO y cómo funciona el SEO Guía de inicio 2022

¿Qué es el SEO y cómo funciona el SEO? Aprende SEO en esta guía 2022 ¿Qué es el SEO y cómo ...
18 MEJORES HERRAMIENTAS SEO PARA EXPERTOS EN 2022

18 MEJORES HERRAMIENTAS SEO PARA EXPERTOS EN 2022

18 MEJORES HERRAMIENTAS SEO PARA EXPERTOS EN 2022 18 Mejores herramientas SEO para Expertos en 2022. Dominar la optimización SEO ...
Herramientas para SEO gratuitas

Las Mejores Herramientas SEO Gratuitas – Potencia tu Estrategia

Herramientas para SEO gratuitas Todas las herranientas para SEO gratuitas las vas a encontrar aqui, no dudes mas y mira ...
Qué es el posicionamiento SEO y por qué es tan importante

Qué es el posicionamiento SEO y por qué es tan importante

Qué es el posicionamiento SEO y por qué es tan importante Qué es el posicionamiento SEO y por qué es ...
Curso online de SEO para Google My Business por Llorenc Real. Os comento mi opinión sobre el curso que he echo Online de SEO.

Curso online de SEO para Google My Business por Llorenc Real

Curso online de SEO para Google My Business por Llorenc Real Curso online de SEO para Google My Business por ...
tienda online

Tienda Online elige bien tu dominio

Tienda Online elige bien tu dominio Tienda Online elige bien tu dominio ? Mejora el Posicionamiento SEO de tu Tienda ...
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 ...
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 ...
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 ...
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 ...
Posicionamiento SEO herramientas gratuitas

Mejores Herramientas Gratuitas para Posicionamiento SEO

Posicionamiento SEO herramientas gratuitas ¿Quieres herramientas gratuitas para hacer SEO? La idea principal de este post es un recopilatorio de ...
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 ...
popup

Guía para Mostrar Ventanas Emergentes Automáticas con Bootstrap

Cómo mostrar ventana emergente de forma automática usando modal bootstrap En este post os voy a dejar el código necesario ...
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 ...
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 ...

#import #reglas #SCSS

@use y @import reglas en SCSS

Tags:
, ,