169 похожих чатов

Мой код в стилях, как мне через вью изменять значения

$primary-height ?

<style style lang="sass">

$primary-height: 925px

.bg-top-home-height:before
height: $primary-height

</style>

21 ответов

6 просмотров

Никак. Нужно вынести primary-height в инлайн-стили и тогда можно будет менять. Или использовать styled components.

Если есть фиксированное кол-во высот, то можно создать соответствующие СSS классы и переключать их в коде.

использовать CSS переменные, а не SАSS

Ruslan
использовать CSS переменные, а не SАSS

В web api появилась возможность менять значение CSS переменных из JS? Можно ссылку на доки?

Тогда вот вариант хороший от Ruslan: https://www.w3schools.com/css/css3_variables_javascript.asp

через переменные для цсс можно. <template> <div :style="style"> hello </div> </template> <script setup> import { computed } from "vue"; const style = computed(()=>({'--text-color': 'red'})) </script> <style> div { color: var(--text-color); } </style>

но лучше через компутед

Gregory- Автор вопроса
Sasha
Никак. Нужно вынести primary-height в инлайн-стили...

Как я вынесу если у меня она внутри класса? Причём с :before?

Gregory- Автор вопроса
Sasha
Если есть фиксированное кол-во высот, то можно соз...

Да это геморрой и не автоматизация ничуть

Gregory- Автор вопроса
Gregory
Как я вынесу если у меня она внутри класса? Причём...

Вынести можно. Но я ниже писал что вариант с CSS переменными который посоветовал Ruslan будет наилучшим и естественным.

Gregory
Как ?

что то типа :style="{ maxHeight: isOpen ? listMaxHeight : '0px' }" const listMaxHeight = computed(()=>'100px')

Gregory- Автор вопроса
Alexey Turdakin
что то типа :style="{ maxHeight: isOpen ? listMaxH...

А ради чего computed, если константа внутри?

Mikhail Kramer
А ради чего computed, если константа внутри?

например у нас див такой <div ref="listDOM" :style="{ maxHeight: isOpen ? listMaxHeight : '0px' }" > тогда в компутед можно дом передать // РЕФ списка и его максимальная высота const listDOM = ref(null); const listMaxHeight = maxHeight(listDOM); // Максимальная высота ДОМ элемента const maxHeight = (refDOM, margin = 27) => computed(() => toPx(val(refDOM) ? calcHeight(margin, rect(refDOM)) : 0));

Gregory- Автор вопроса
Sasha
Тогда вот вариант хороший от Ruslan: https://www.w...

это круто к как ко вью прикрутить? можно в криэтид js код вставить?

Gregory
это круто к как ко вью прикрутить? можно в криэтид...

ты по приколу игноришь https://vuejs.org/api/sfc-css-features.html#v-bind-in-css

Gregory- Автор вопроса
Илюша 🎂
ты по приколу игноришь https://vuejs.org/api/sfc-c...

братан это самый крутой варик, я до него еще не дошелчитал другие

Илюша 🎂
ты по приколу игноришь https://vuejs.org/api/sfc-c...

ого, крутая штука, не видел её тоже раньше

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

Обсуждают сегодня

А еще в перле можно уже @arr1 + @arr2?
Sergei Zhmylove
53
я не магистр хаскеля, но разве не может лейзи тип конвертнуться в не-лейзи запросив вычисление содержимого прям при инициализации?
deadgnom32 λ madao
100
Привет всем. появился вопрос. Разрабатываю сайт, в данный момент он запущен. Хостинг beget. Добавляю на сайт яндекс метрику с помощью полей client-settings (взято отсюда http...
Andrew
2
Подскажите, где смотреть результат выполнения программы? Код: ;.686 ;Система команд процессора 686 ;.MODEL FLAT,stdcall ;Модель памяти плоская, станда...
Егор Анелькин
5
Где в Астане можно купить мясо для шашлыков?
Dancing Іңұқәһүғө
21
Добрый день подскажите пожалуйста может кто то сталкивался с ошибками Sentry 22.10.0 развернутым из helm чарт в Kubernetes? Изначально 3 дня назад очень стало много событий ух...
Tire4 Finist Devops
1
;.686 ;Система команд процессора 686 ;.MODEL FLAT,stdcall ;Модель памяти плоская, стандартный ;вызов процедуры ;option casemap:no...
Егор Анелькин
1
почому оно не работает?
Vi Chapmann ٩( 💢•̀ з•́)و Chapmann
19
всем привет почти закончил курс После него можно писать свою операционку? Какие библиотеки надо использовать и куда дальше копать для изучения
Linus
19
Так а кто может спарсить всех участников чата? Идишники
Magic
18
Карта сайта