css - 如何在 css 文件中创建别名或变量

Question

我有 css 文件列表，每个 css 文件都有不同的图像位置代码，如 url(../_images/headerImages.jpg)，现在我将图像放置到其他域，因此我想创建一个变量，如 var domainPath = http://sitename.com以便在每个 url(../) 处我都可以编写类似 url(domainPath+ '/images/headerImages.jpg') 的内容。

例子

var DOMAIN_PATH = http://www.mysite.com;

#header {background: url(DOMAIN_PATH/_images/headerimage.jpg)no-repeat; }

请帮我..

Answer 1

您不能在纯 CSS 中使用变量。我建议使用 CSS 预处理器，它是一种编译为 CSS 的语言。SASS很棒，你可以按照你的要求做：

$domainpath: url(http://www.mysite.com/_images/bg-header-noodletools-express.jpg);

#header {background: $domainpath no-repeat; }

另一种选择是LESS。

Answer 2

如https://ishadeed.com/article/css-vars-101/等中所述，现在可以在 CSS 中使用变量。

你可以做：

:root {
  --domainpath: url(http://www.yourdomain.com/_images/bg-header-noodletools-express.jpg);
}

#header {
  background: var(--domainpath) no-repeat;
}