Как переопределить sass-переменную в vue-компоненте?

Question

[Алексей Бабиев]

Есть глобальный _variables.scss, где определена переменная $var: 0;

Как во вью-компоненте переопределить значение этой переменной?

Пытался так, в лоб, но не взлетает

<style scoped lang="scss">
    $var: 10;
</style>

В компоненте есть элементы, стили которых зависят от этой переменной, и мне надо изменить именно саму переменную, а не переписывать стили. Вроде в этом и смысл переменных, но я в sass вообще никак

Answer 1

[Василий Банников]

sass-переменные исчезают, когда sass переводится в css, так что не выйдет.
Но вы можете использовать css-переменные

Comments

[Алексей Бабиев]

Да, спасибо, уже разъяснили

Answer 2

[iBird Rose]

с scss переменными ты так не сможешь. а вот с обычными css переменными сможешь. погугли про них

Comments

[Алексей Бабиев]

Так проблема в том, что я не могу менять ничего снаружи компонента. Задача стоит написать компонент, не трогая существующий код

[iBird Rose]

Алексей Бабиев, ну не сможешь ты так сделать с scss переменной. а вот css - спокойно
https://www.telerik.com/blogs/passing-variables-to...
https://stackoverflow.com/questions/56458006/using...

Answer 3

[Andrey Vasilev]

Если тебе не нужно значение этой переменной, то зачем ты её вообще объявляешь ещё раз? Судя по всему тебе без разницы как она будет называться, она будет иметь совершенно другое значение, так есть ли смысл? Может проще создать переменную с другим назваанием? $locVar: 10 ?

Comments

[Andrey Vasilev]

а поменять переменную везде проще простого: ctrl + F -> $var -> $locVar

[Алексей Бабиев]

Эта переменная используется в стилях, мне надо поменять значение, чтобы стили поменялись

[Andrey Vasilev]

Алексей Бабиев, я не уверен, но попробуй отцепить scoped от стилей и посмотри, поменяется ли значение (просто проверь)

[Алексей Бабиев]

Andrey Vasilev, нет, не меняется. Похоже придётся переписывать сами стили.

[Andrey Vasilev]

Алексей Бабиев, да зачем переписывать стили? задай переменную прямо тут, локальную переменную $locVar = значение, а потом просто поиском замени все переменные в scoped с $var на $locVar. Это как вариант просто.