¿Por qué poner «_» delante del nombre de archivo en SCSS?

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;
}

Publicación traducida automáticamente

Artículo escrito por KV30 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *