Sass mantiene el código CSS DRY (Don´t Repeat Yourself). Una forma de escribir código DRY es mantener el código relacionado en archivos separados.
Puedes crear archivos pequeños con fragmentos de código CSS para incluirlos en otros archivos Sass. Ejemplos de dichos archivos pueden ser: restablecer archivo, variables, colores, fuentes, tamaños de fuente, etc.
Importar archivos Sass
Al igual que CSS, Sass también admite la directiva @import. La directiva @import te permite incluir el contenido de un archivo en otro. La directiva CSS @import tiene un gran inconveniente debido a problemas de rendimiento, crea una solicitud HTTP adicional cada vez que lo llama. Sin embargo, la directiva Sass @import incluye el archivo en el CSS, así que no se requiere una llamada HTTP adicional en tiempo de ejecución.
Su sintaxis es:
@import nombrearchivo;
Sugerencia: no necesitas especificar una extensión de archivo, Sass asume automáticamente que se refiere a un archivo .sass o .scss. También puedes importar archivos CSS. La directiva @import importa el archivo y cualquier variable o combinación definida en el archivo importado se puede usar en el archivo principal.
Puedes importar tantos archivos como necesites en el archivo principal:
Ejm
@import "variables";
@import "colors";
@import "reset";
Veamos un ejemplo: supongamos que tenemos un archivo de reinicio llamado «reset.scss», que se ve así:
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
y ahora queremos importar el archivo «reset.scss» a otro archivo llamado «standard.scss». Así es como lo hacemos: es normal agregar la directiva @import en la parte superior de un archivo, de esta forma su contenido tendrá un alcance global:
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Entonces, cuando se transpila el archivo «standard.css», el CSS se verá así:
html, body, ul, ol {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
Parciales Sass
De forma predeterminada, Sass transpila todos los archivos .scss directamente. Sin embargo, cuando deseas importar un archivo, no necesitas transpilarlo directamente. Sass tiene un mecanismo para esto: si comienza el nombre del archivo con un guión bajo, Sass no lo transpilará. Los archivos nombrados de esta manera se denominan parciales en Sass. Entonces, un archivo Sass parcial se nombra con un guión bajo inicial:
La sintaxis es
_filename;
El siguiente ejemplo muestra un archivo Sass parcial llamado «_colors.scss». (Este archivo no se transferirá directamente a «colors.css»):
$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;
Ahora, si importas el archivo parcial, omite el guión bajo. Sass entiende que debe importar el archivo «_colors.scss»:
@import "colors";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: $myBlue;
}