图像路径的 SASS 变量

每当我们想向网页添加图像时，使用 SASS 时不必总是写出图像的完整路径。我们可以将图像文件夹的路径存储在一个变量中。将文件夹的路径添加到变量总是好的。

声明一个变量
句法 ：

$assetPath :"path";

在图像路径中添加变量
句法 ：

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

示例 1： SASS 文件

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

输出：编译后的 CSS 文件

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

我们还可以在图像的单个路径中使用多个变量。

句法 ：

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

示例 2： SASS 文件

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

输出：编译后的 CSS 文件

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