Define a variable used in js and css

Question

For example, I want to define a global color a = '#FFF', and reference it in js and css to make sure that there is only one color named a in the project. then when the value of a changed, a in js and css also changed. is that possible in vue?

Ilijanovic · Accepted Answer · 2020-06-24 13:20:49Z

1

Hmm... I was thinking about watchers watch in combination with CSS variables.

Maybe something like this? Whenever a changes, the CSS variable --a changes aswell.

You can actually type in any color format you want. Hex, rgb, rgba...

let v = new Vue({
   el: "#app",
   data: {
      a: "red"
   },
   watch: {
      a(val){
         document.documentElement.style.setProperty("--a", val);
      }
   }
})

:root {
   --a: red;
}
#app {
   height: 100px;
   width:100%;
   background: var(--a);
   transition: background 500ms;
}

p {
   background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <p>Color: {{a}}</p>
   <input v-model="a">
</div>

edited Jun 24, 2020 at 13:20

answered Jun 24, 2020 at 12:41

Ilijanovic

15k4 gold badges29 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Define a variable used in js and css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related