Как вставить переменную vue.js в css или scss?

Question

В коде представлен один из способов, как я меняю переменную цвета new_color, которая приходит с сервера, но такой способ мне не очень подходит, так как кода слишком много и везде вставлять :style, я думаю, как-то неправильно. Есть ли способ лучше, чтобы можно было менять одну, в моем случае - scss переменную $main-color, которая отвечает за множество стилей? Как-то я могу воздействовать на переменную $main-color из js кода или придется писать везде :style?

        <div class="container new_color" :style="background-color: new_color;">
        
        </div>
    </div>

</template>
<script>
   
    export default {
        data() {
            return {
                new_color: '#00C851',
            }
        },
    }

</script>

<style lang="scss">

    $main-color: #df0000;

    .new-btn {
        border: 1px solid $main-color;
    }

    .new-btn2:hover {
        background-color: $main-color;
    }

       ............
        ...............
          ...................
</style>

Answer 1

Возможно это подойдет:

    var app = new Vue({
      el: '#app',
      data: {
        style: 'bigRed'  
      },
      computed: {
          cssVars() {
              switch (this.style) {
                case 'bigRed':
                  return ({
                    '--text-color': 'white',
                    '--bg-color':  'red',
                    '--height': 50 + 'px'
                  })
                default:  
                  return {
                    '--bg-color':  'white',
                  }
              }
          }
      },
      methods:{
        change_style: function(){
          this.style = this.style === 'bigRed' ? '' : 'bigRed';
        }
      }
    })

  button {
    color: var(--text-color);
    background-color: var(--bg-color);
    height: var(--height);
  }

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <button v-on:click="change_style" :style="cssVars">Нажми меня!</button>
  </div>
</body>
</html>

Answer 2

Можно воспользоваться возможностями обычных css переменных. Например: Создадим переменную для цвета

:root {
  --color: red;
}

После чего из js мы сможем получить к ней доступ через

window.getComputedStyle(document.documentElement).getPropertyValue('--color')

Или

window.getComputedStyle(document.body).getPropertyValue('--color')

Ну и естественно можно изменять её значение на необходимое

document.body.style.setProperty('--color', 'green')

Таким образом мы переопределим глобальную css переменную. Остальное уже дело техники, просто подставить вместо green свой цвет, который приходит с сервера.

Или если нужно назначить это значение вашей scss-переменной $main-color

БЛОГ НА HUSL

Как вставить переменную vue.js в css или scss?

Ответы (2 шт):