variable SASS para la ruta de las imágenes

Siempre que queramos agregar una imagen a nuestra página web, no siempre necesitamos escribir la ruta completa de nuestras imágenes cuando usamos SASS. Preferimos almacenar la ruta a la carpeta de imágenes en una variable. Siempre es bueno agregar la ruta de una carpeta a una variable.

Declarar una variable
Sintaxis:

$assetPath :"path";

Agregar una variable en la ruta de la imagen
Sintaxis:

background: url(#{$assetPath}/gfg.gif);

Ejemplo 1: archivo SASS

$assetPath :"/assets/images";
body {
  margin: 0 auto;
  background: url(#{$assetPath}/gfg.gif);
  width: 100%; 
}

Salida: archivo CSS compilado

body {
  margin: 0 auto;
  background: url(/assets/images/gfg.gif);
  width: 100%; 
}

También podemos usar múltiples variables en una sola ruta a una imagen.

Sintaxis:

background: url(#{$variable1}/#{$variable2}/#{$variable3});

Ejemplo 2: archivo SASS

$assetsPath :"/assets/images";
$project :"project2";
body {
  margin: 0 auto;
  background: url(#{$assetsPath}/#{$project}/gfg.gif);
  width: 100%; 
}

Salida: archivo CSS compilado

body {
  margin: 0 auto;
  background: url(/assets/images/project/gfg.gif);
  width: 100%; 
}