Importación @import y Parciales de Sass

Recomendación de curso:Sass puede mantener el código CSS seco (DRY

Don't Repeat Yourself, no repitas).

Una manera de escribir código DRY es guardar código relacionado en archivos separados.

Puedes usar fragmentos CSS para crear archivos pequeños y agregarlos a otros archivos Sass. Por ejemplo, estos archivos pueden ser: archivos de reset, variables, colores, fuentes, etc.

Importación de archivos Sass @import Como CSS, Sass también admite

@import La directiva te permite incluir el contenido de un archivo en otro. Directiva.

Debido a problemas de rendimiento, CSS @import La directiva tiene una gran desventaja; cada vez que se llama, se crea una solicitud HTTP adicional. Sin embargo, Sass @import La directiva incluye archivos en CSS; por lo tanto, no se necesitan llamadas HTTP adicionales en tiempo de ejecución!

Sintaxis de importación de Sass:

@import nombrearchivo;

Consejo:No necesitas especificar la extensión de archivo, Sass asume automáticamente que te refieres a archivos .sass o .scss. También puedes importar archivos CSS.@import La directiva de importación de archivos, luego puedes usar cualquier variable o mixin definida en el archivo importado en el archivo principal.

Puedes importar cualquier cantidad de archivos en el archivo principal:

Ejemplo

@import "variables";
@import "colors";
@import "reset";

Veamos un ejemplo: supongamos que tenemos un archivo de reset llamado "reset.scss", que se ve así:

Sintaxis de SCSS (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

Ahora vamos a importar el archivo "reset.scss" en otro archivo llamado "standard.scss".

Hacemos lo siguiente: generalmente agregamos en la parte superior del archivo @import Directiva; de esta manera, su contenido tendrá un ámbito global:

Sintaxis de SCSS (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Por lo tanto, cuando se traduce el archivo "standard.css", el CSS se verá así:

Salida de CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (archivos parciales)

Por defecto, Sass traduce directamente todos los archivos .scss. Sin embargo, al importar archivos, no es necesario que se traduzcan directamente.

Sass tiene un mecanismo: si comienza con un subrayado el nombre del archivo, Sass no lo traducirá. Los archivos nombrados de esta manera se llaman partials en Sass.

Por lo tanto, los archivos partial Sass se nombran con subrayado inicial:

Sintaxis de Partial Sass:

_filename;

El siguiente ejemplo muestra el archivo partial Sass llamado "_colors.scss". (Este archivo no se convertirá directamente en "colors.css"):

Ejemplo

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

Ahora, si importa este archivo partial, omita el subrayado. Sass entiende que debe importar el archivo "_colors.scss":

Ejemplo

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}