Cuando agregamos «_» delante del archivo SCSS, significa que es parcial para SCSS. Cuando el compilador obtiene archivos SCSS que comienzan con «_», simplemente ignora el archivo. Si desea que este parcial para SCSS se incluya para los estilos, debe usar @import. La ventaja de usar parciales es que puede usar archivos de estilo para organizar su código y todos los archivos se compilarían en un solo archivo. El propósito del SCSS parcial es mantener sus estilos separados en secciones lógicas.
Al final, queremos que un archivo SCSS cumpla mientras que podemos tener muchos archivos SCSS parciales lógicos.
Sintaxis:
@import filename;
Nota: Durante la importación no ponemos “_”, solo el nombre del archivo.
Ejemplos 1: Vamos a crear un archivo de colores _colors.scss
$first-color: blue; $second-color: yellow; // let's include it in main // SCSS file, style.scss @import "colors"; body { color: $first-color; background: $second-color; }
Producción:
body { color: blue; background: yellow; }
Ejemplos 2: Vamos a crear un archivo de colores _font.scss
$font: arial; $color: red; // Let's include it in main // SCSS file, style.scss @import "font"; body { font: 100% $font; color: $color; }
Producción:
body { font: 100% arial; color: red; }