Как использовать переменные в CSS с Vue.js 3?

Чтобы использовать переменные в CSS с Vue.js 3, нужно выполнить два шага: 1

1. Объявить реактивные данные внутри скрипта компонента. 1 Например, можно привязать цвет абзаца к данным компонента. 1 Для этого нужно использовать ref из библиотеки Vue. 1
2. Получить доступ к этим данным в CSS с помощью v-bind. 12

Пример кода: 1

<script setup>    import { ref } from 'vue'    const color = ref('red')</script><template>    <div>        <div class='text'>hello</div>    </div></template><style>    color: v-bind(color);}</style>

Результат: если посмотреть на компонент в браузере, то можно увидеть, что элемент получает значение цвета из данных. 1

Важно: переменные CSS не доступны в дочерних компонентах. 1 Также перед использованием этой функции необходимо проверить поддержку переменных CSS браузером. 1