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

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

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

Пример кода: learnvue.co

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

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

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