Пожалуйста, сообщите мне, как использовать переменные в качестве значения атрибута в CSS

Question

Я использую PUG.

Я ввел 10 по переменной h.

Я хотел бы использовать h как свойство элемента с именем item.

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

Конечно, это не сработало.

Как я могу заставить это работать?

Answer 1

Использовать строковую интерполяцию:

- 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; 
}

Надеюсь, это хорошо для вас.

Благодарю.