如何使用 css 变量 handle/use 路径图像？ Angular

Question

我收到一个配置 JSON，其中包含我必须在 CSS 中使用的图像的颜色和路径，我在 html 中正确设置了变量，它会结果与此类似：

    <html lang="en" style="
--c-logo-square:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/temp%20belike%20small.png;
    --c-background-image:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png; 
    --c-primary:green; 
    --c-secondary:purple;">

我可以正确使用颜色变量，但我不知道如何使用图像路径作为背景。

// Works
.my-html-component {
    color: var(--c-primary);
}

// Error
logo {
  background: url(var(--c-background-image));
}

在使用 Angular 和 SCSS 时，我知道我可以使用一些功能来做我需要的事情，但我不知道该怎么做。

Answer 1

不是在属性中定义url，而是将其定义为变量的一部分。不要忘记添加 :root.

:root {
--c-background-image:url(https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png); 
}


.logo {
  background: var(--c-background-image);
  width:500px;
  height:500px;
}

<div class="logo"></div>

如何使用 css 变量 handle/use 路径图像？ Angular

How to handle/use path images with css variables? Angular

css

sass

css-variables