请告诉我如何使用变量作为CSS中的属性值

Question

我正在使用PUG。

我在变量h上输入了10。

我想将h用作元素命名项的属性。

- var h=10
doctype html
html
    head
        style.
            .item {height: hpx;}
    body
        .item Hello!

当然没用.T.T

我怎样才能让它发挥作用？

Answer 1

使用String Interpolation：

- var h=10
doctype html
html
    head
        style.
            .item {height: #{h}px;}
    body
        .item Hello!

Answer 2

您还可以使用以下代码：

在HTML文件中：

html
 head
    style.
        .item { height: var(--h);color: var(--color); }

 body
    .item Hello!

在CSS文件中：

:root {
  --h: 10px;
  --color: red; 
}

希望它对你有用。

感谢。