Можно ли использовать пользовательские свойства CSS в значениях для свойства содержимого?

Пример:Можно ли использовать пользовательские свойства CSS в значениях для свойства содержимого?

:root { 
    --PrimaryThemeColor: #3acfb6; /* with or without quotes */ 
} 

.ColorSwatch:after { 
    content: var(--PrimaryThemeColor); 
}

Когда это оказывается, вычисленное CSS буквально это значение.

content: var(--PrimaryThemeColor);

Даже если я использую пост-процессор, который впрыскивает вычисленное значение в качестве запасного варианта, само значение не является строкой, так что недопустимо для content.

.ColorSwatch:after { 
    content: #3acfb6; 
    content: var(--PrimaryThemeColor); 
}

источник

2016-08-03 Kevin Suttle

Что вы подразумеваете под "с или без кавычек"? Он должен корректно работать с кавычками. – BoltClock

Да, это возможно. Но ваша проблема, похоже, преобразует цвет в строку вместо использования переменной в 'content'. – Oriol

Переменная CSS применяется при применении к свойству CSS, но не при применении к контенту. Переменные CSS не ведут себя как переменные javascript, печатающие его значение как строку. – Buffalo

Значение пользовательского свойства должно быть строкой (либо строкой буквальной, attr() выражения, или в случае content любого сочетания любого числа указанных маркеров) для того, чтобы соответствующего var() выражения правильно работать в любом месте, где ожидается строка.

Невозможно преобразовать нестроковое значение в строку или между любыми двумя типами данных через функцию var(), если это то, о чем вы просите. Значение всегда анализируется, сохраняется и заменяется как-есть, и значение может содержать любое количество маркеров любого вида, поэтому преобразование между типами данных будет ... довольно сложно.

источник

2016-08-03 19:14:42 BoltClock

Правильно, я уже это указал. > «само значение не является строкой, поэтому оно недопустимо для содержимого». –

@ Кевин Саттл: Да, так ты ответил на свой вопрос. – BoltClock

Похоже, что это довольно распространенный случай использования, поэтому было бы неплохо расширить синтаксис 'var', чтобы быть' var (- name type-or-unit) '. Это позволило бы как «font-size: var (- size px)», так и избежать громоздкого «font-size: calc (1px * var (- size))», и в данном случае разрешить ' content: var (- primaryThemeColor string) '. («тип единицы» здесь, конечно, имеет ту же семантику, что и при использовании в функции 'attr()'). –

Можно ли использовать пользовательские свойства CSS в значениях для свойства содержимого?

ответ

Смежные вопросы