@import y parciales en sass | Explicado

El acrónimo de Sass para la hoja de estilo sintácticamente impresionante es un preprocesador y extensión de CSS que es reconocido por sus archivos de código limpio y legible que, como resultado, mejoran la capacidad del lenguaje básico de CSS. Sass le permite escribir código CSS seco (no se repita) a través del uso de la regla @Import. Lo que esta regla es y hace en Sass junto con parciales en Sass son los sujetos en discusión en este artículo.

¿Cuál es la regla @import en sass?

Al igual que CSS, Sass también es compatible con la Directiva @import, que permite la inclusión de una hoja de estilo en otra. Como una extensión de la regla CSS @import, la regla sass @import permite importar .sass y .archivos SCSS. Además, si está importando una hoja de estilo en otra hoja de estilo, entonces esta regla dará acceso a variables, mezclas y funciones del archivo importado al otro archivo.

Otra ventaja que esta regla SASS tiene sobre la regla CSS es que no se realiza una solicitud HTTP adicional en el tiempo de ejecución cuando se llama a la regla @Import.

Sintaxis

@import FilePath;

La regla sass @import permite la inclusión de ambos tipos, lo que significa que puede incluir archivos SASS en un archivo CSS o puede importar archivos CSS en un archivo SASS. Además, puede importar tantos archivos como desee en el archivo principal. Los archivos que se pueden importar incluyen archivos de reinicio, colores, variables, fuentes, etc.

Algunos ejemplos de la regla @import en sass son los siguientes.

@Import "fuentes";
@Import "Variables";
@Import "Colors";

Veamos un ejemplo para comprender mejor esta regla.

Ejemplo

Supongamos que tenemos un archivo por el archivo de nombre1.sass y se parece a esto.

Hablar con descaro a

H1
Font-Family: Verdana, Sans-Serif;
tamaño de fuente: 30px;
color morado;

También tenemos otro archivo por nombre de nombre2.sass y tiene el siguiente código.

Hablar con descaro a

pag
Font-Family: Times New Roman, Serif;
tamaño de fuente: 20px;
color azul;

Ahora queremos importar ambos archivos en otro archivo que tenga el nombre principal.hablar con descaro a. Usaremos la regla @Import para hacerlo.

@Import file1, archivo2

Después de compilar este principal.Archivo SASS Nuestro archivo de salida CSS resultante aparecerá así.

Los archivos se importaron correctamente!

Nota: El uso de la regla @import se desaconseja porque causa conflictos de nombres, ya que da acceso a todas las funciones, variables, mezclas, etc. a otro archivo. Además, esto también causa problemas de seguridad.

Parciales en sass

Los parciales en Sass se consideran aquellos archivos cuyos nombres comienzan con un bajo y estos no se transpilan directamente. Los parciales se hacen solo en esas circunstancias cuando está importando un archivo y no desea que su archivo sea transpilado directamente por Sass.

Sintaxis

_Nombre del archivo;

Por ejemplo, el archivo que se muestra a continuación es un "_font.archivo SCSS ".

$ FontSize: 20px;
$ Fontfamily: Times New Roman;
$ Color: azul;

El subrayador inicial evita que este archivo se transforma a fuentes.CSS. Sin embargo, cuando desea importar este archivo, no use el bajo.

El subrayador inicial evita que este archivo se transforma a fuentes.CSS. Sin embargo, cuando desea importar este archivo, no use el bajo.
@Import "fuentes"
H1
tamaño de fuente: $ FontSize;
texto alineado; centro;
Color: $ Color;

De esta manera se importará el archivo sass parcial.

Conclusión

La directiva SASS @import permite la inclusión de una hoja de estilo en otra y da acceso a variables, mezclas, funciones del archivo importado al otro archivo. Además, no se realiza una solicitud HTTP adicional en el momento de ejecución cuando se llama a la regla @Import. Mientras tanto, los parciales en Sass se consideran aquellos archivos cuyos nombres comienzan con un bajo y estos no se transpilan directamente cuando los importa. Ambas entidades se discuten en profundidad en este artículo.