Is there a way to define css selector properties dynamically ?
For example how to define "color" property of ".some-style" selector with the value got from the backend server?
<style>
.some-style {
color: #ffc050;
}
</style>
-
please give more details about your use caseBoussadjra Brahim– Boussadjra Brahim2020-11-19 14:15:01 +00:00Commented Nov 19, 2020 at 14:15
Add a comment
|
1 Answer
- Create a dynamic
stylein your top-most element in your template. - Assign the backend response of your properties to a computed function.
- Set style lang to
lang='scss'then use CSS varialbe functionvar()to set the values.
Example
<template>
<div :style="cssProps">
<div class="some-style">
Hello Mars
</div>
</div>
</template>
<script>
export default {
computed: {
cssProps() {
// backend response with your css values
let backendResponseObject = {
fontColor: "black", // you can use rgb or hex
backgroundColor: "White" // you can use rgb or hex
}
properties = {
"--brand-base": backendResponseObject.color,
"--brand-primary": backgroundColor.hex,
};
return properties;
}
}
}
</script>
<style lang="scss">
.some-style {
color: var(--brand-base);
background: var(--brand-primary);
}
</style>
1 Comment
Simo Mafuxwana
Set style lang to lang='scss' then Actually you don't have to use scss. just that I've always used this in
<style lang="scss">