Динамический встроенный стиль в vue с помощью переменных sass

Здесь у меня есть код одного блока в mySlide

<div :style = "{
               'background-image': `url('~@/assets/img/${slide[2].src}')`,
               'background-color': '$tertiary-light-gray',
             }"
     class = "carouselSlide__line__block imageBlock">
</div>

Я должен установить фоновое изображение и увеличить фоновый цвет полупрозрачности.

Как мне это сделать?

Вы не можете этого сделать. Сначала вам нужно определить css var. Или лучше используйте его в классе, потому что нет необходимости, чтобы фоновый цвет принадлежал стилю.

— 13.04.2023 16:42

Согласно этому ответу, вы не можете использовать переменные sass во встроенном стиле: stackoverflow.com/a/65462299/13023290

— 15.04.2023 07:19

vue.js sass sass-variables

13.04.2023 11:13

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Использование SCSS внутри атрибута стиля не работает. Вы можете использовать v-bind в своем css, чтобы установить свои значения.


<div class = "carouselSlide__line__block imageBlock"></div>

<script setup>
const image = computed(() => `url('~@/assets/img/${slide[2].src}')`);
</script>

<style scoped lang = "scss">
.imageBlock {
  background-image: v-bind(image);
  background-color: $tertiary-light-gray;
}
</style>

15.04.2023 12:19

Другие вопросы по теме

Отключить прокрутку при навигации со стрелками вверх и вниз

Внутренняя ошибка Nuxt 3 SCSS после каждого сохранения или создания нового файла SCSS

Svelte SMUI, получение цветов темы в javascript

Как стилизовать дочерние элементы внутри родительского элемента с прорезями?

Изменение непрозрачности цвета фона путем преобразования цвета в rgba

Как создать заголовки от H1 до H6, используя Sass в CSS с уменьшенным размером шрифта

Не удалось скомпилировать «sass» при попытке установить пакет с помощью R

Автозаполнение ввода в темном режиме с помощью Tailwind

Сохранить количество дочерних элементов, соответствующих селектору, в переменной

Возникли проблемы с предотвращением дублирования кода CSS

Динамический встроенный стиль в vue с помощью переменных sass

Ответы 1

Другие вопросы по теме

Похожие вопросы