SASS | Usar variables en varios archivos

El uso de variables en varios archivos en SASS se lleva a cabo mediante la regla @import de SASS.

Regla @import que importa hojas de estilo Sass y CSS para proporcionar variables, @mixins y funciones. Tales que combinan todas las hojas de estilo para compilar css.

También importa URL como marcos como Bootstrap, etc.

@import ya no se recomienda en futuras actualizaciones, así que prefiera la regla @use en su lugar.

Sintaxis:

/* importing name and file path is /_file.scss */
@import 'file';

Enfoque 1: importar múltiples parciales de Sass

Para importar múltiples parciales de sass con @import agregando @import seguido del primer nombre de archivo entre comillas, luego coma (, ) y luego seguido del segundo nombre de archivo entre comillas y final con punto y coma

/* importing name and file path is /_file1.scss and  /_file2.scss */
@import 'file1', 'file2' ;

Ejemplo 1: El siguiente ejemplo ilustra el enfoque anterior.
archivos SASS

/* _colors.scss */
$primary:#00ff40;
$secondary: #f44336;
$tretiary:#03a9f4;
$tera: #ffeb3b;
$dark:#000000;
$grey:#919191;
$light:#dddddd;
$white:#FFFFFF;
  
/* _std.scss */
html,
body,
ul,
ol {
    margin: 0;
    padding: 0;
}
body {
        color:$grey;
    font-family: Helvetica, sans-serif;
    background-image: url('/img/backimg.jpg');
    background-repeat: no-repeat;
      background-attachment: fixed;
  background-position: center;
  background-size: cover;
    }
  
/*_section.scss*/
  
div{
  
    padding: {
        top: 20px;
        left: 10px;
        right: 10px;
        bottom: 20px;
        }
    h1{
          
        color: $secondary !important;
        align-items: center;
          
    }
  }
/* style.scss*/
@import 'colors';
@import 'std', 'section';

Archivo CSS compilado: style.css

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

body {
  color: #919191;
  font-family: Helvetica, sans-serif;
  background-image: url("/img/backimg.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

div {
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
}

div h1 {
  color: #f44336 !important;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

Enfoque 2: importar CSS simple
- Para cargar Plain CSS con @import de la siguiente manera:
- @import seguido de la ruta del archivo CSS con la extensión .css entre comillas dobles.
- En el caso de la ruta URL, complete la URL especificada dentro de url(” “);
- ```
/* importing plain CSS*/
@import "mytheme.css";
@import "http://fonts.googleapis.com/css?family=Droid+Sans";
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
@import url(mytheme);
@import "landscape" screen and (orientation: landscape);
```
Ejemplo 2: El siguiente ejemplo ilustra el enfoque anterior.
Archivo SASS: estilo.scss

@mixin google-font($family) {

@import url("http://fonts.googleapis.com/css?family=#{$family}");

}

@include google-font("Serif Sans");

Archivo CSS compilado: style.css
```
@import url("http://fonts.googleapis.com/css?family=Serif Sans");
```

Enfoque 3: importar módulos y configurar módulos

Para cargar módulos y configurar módulos con @import de la siguiente manera:
Para hacer esto más fácil, Sass también admite archivos de solo importación como los siguientes:
_filename.scss se importa para importar solo archivos
filename.import.scss que como
```
@forward "filename" as filename-*;
```
En caso de @use este método no recomendado.
Para configurar módulos, módulos cargados a través de @import definiendo variables globales con respecto a la carga inicial de ese módulo.

Ejemplo 3:
El siguiente ejemplo ilustra el enfoque anterior.
archivos SASS

/*_libray.scss */
  
$purple:Purple;
$white:white;
button{
     color:$white;
     border-color:$purple;
     background-color:$purple;
     padding :10px;
}
  
/* _library.import.scss */
  
@forward 'library' as lib-*;
  
/* style.sass  */
  
$lib-color: indigo;
@import "library";

Archivo CSS compilado: style.css

button{
     color: white;
     border-color:indigo;
     background-color:indigo;
     padding :10px;
}

Referencia: https://sass-lang.com/documentation/at-rules/import

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta