0.1.13 • Published 3 years ago
@makalay/vue-var-css v0.1.13
v-css-var
use CSS Variables by vue directive
install the package
npm i v-css-var
use it in main.js
import cssVar from 'v-css-var'
Vue.use(cssVar)basic use
<template>
<div>
<div v-css-var="var"></div>
<p v-css-var="var"></p>
</div>
</template>
<script>
export default {
data(){
return {
var:{
c:'red',
a:'1px'
}
}
}
}
</script>
<style>
div{
height: var(--a);
}
p{
color:var(--c);
height: var(--a);
}
</style>It will be transfed as
<div style="--a:'1'"></div>If you want share the vars to all, you can add it to the html element
<template>
<div v-css-var.root="var"></div>
</template>It will be transfed as
<html style="--a:'1px'">
<body>
<div></div>
</body>
</html>TO DO
- remove the css Variables
- write the test