Как с помощью jQuery (или как-то ещё) изменять переменную в SASS?

Question

[boga-net]

В CSS файле есть переменная (в SASS файле, если быть точнее) задающая какие-то параметры, которую нужно менять с помощью input range или чего бы то ни было. Каким образом это можно реализовать ?

<input type="range" step="1" max="10" value="3" id="wrapWidth">

$width: 666px

Есть ли доступ к таким переменным ? в CSS много чего зависит от этой переменной, чтобы переносить весь код в js

Спасибо

Answer 1

[Виталий]

https://medium.com/@_bengarrison/accessing-and-mod...

загнать переменные в :root и менять их через .style.setProperty

Comments

[boga-net]

Или я не так понял, или этот способ не подходит. У меня переменная в SASS, а в вашем примере, используя style мы меняем то, к чему применяется метод style.

В моём случае нужно нечто такое :

SASS

$width: 1000px

.element
    width: $width

.element-2
   width: $width / 2

.element-2
   width: $width * 3

jQuery

width.on('change', function() {
	handleUpdate();
}

function handleUpdate() {
  '--width' = $(this).val();
}

Итоговый SASS

:root
    --width: 555px

$width: --width

Как это реализовать ?

[boga-net]

Виталий К тому же SASS ругается на :root

[Виталий]

boga-net, SASS - это препроцессор CSS, на продакшен вы выгружаете CSS с ним и работайте в JS. Переделайте ваш SASS так, как в примере, чтобы переменный были уровнять CSS и тогда будет работать. В статье по ссылке есть пример с живым примером в jsfiddle

[boga-net]

Виталий, SASS - да, это препроцессор, но так же и синтаксис, о чём я и говорил, поэтому написал выше пример. В SCSS, возможно, будет работать, но SASS ругается.
Никакого продакшена не будет, так как я делаю проект для самообучения.
Переделать SASS - переписать всё в SCSS - не проблема, но это значит из-за этого уже отказаться от синтаксиса SASS, без которого я уже не представляю написание стилей

В вашем живом примере идёт непонятное для меня присвоение переменной, так как там указыается footer.style. Мне нужно поймать значение и передать его в SASS.

[alvvi]

boga-net, вам косвенно объяснили, что нельзя изменять переменные SASS на стороне клиента никаким образом, потому что они существуют только до этапа сборки.
Что можно изменять - это CSS переменные, используйте их в любом синтаксисе, хоть свой собственный придумайте, они будут работать в браузере.