vue.js - How can I use data in css with Vue?

Question

I want to design a button component with Vue.
When I get main props, how can I get in css --mainColor variable without setting inline-style? thanks.

<script>
import Vue from "vue";

    export default Vue.extend({
    name: "Button",
    props: {
        text: {
            type: String,
            default: ""
        },
        main: {
            type: String,
            default: "#10b981"
        }
    }
});
</script>

<style lang="scss" scoped>
.btn {
    --mainColor: #10b981;
    display: inline-block;
    border: 1px solid var(--mainColor);
    color: var(--mainColor);
    &:hover {
        background-color: var(--mainColor);
        color: #fff;
    }
}
</style>

Answer 1

I doubt that's possible. But you can run conditional logic in sass, like their official example:

$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}

https://sass-lang.com/documentation/at-rules/control/if