sass 如何根據變量值，改變skin

/* 主題顏色 */
$color-primary-green:green;
/* 更換的顏色 */
$color-primary-blue:blue;
/* 更換的顏色 */
$data-defalut:"green"

@mixin color_primary() {
    &[data-txt="green"] {
        background: $color-primary-green;
    }

    &[data-txt="blue"] {
        background: $color-primary-blue;
    }

}

.price {
    height: 400px;

    /*color: $color-primary;*/
    /* 原始引用方式，錯誤 */
    &::before {
        content: attr(data-txt);
    }

    @include color_primary();
    /* 採用函數調用 */
}

 <div class="head price" :data-txt="bgColor" @click="changeSkin">

<script lang="ts">
    import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator'
    import { mixins } from 'vue-class-component'
    
bgColor: string = "blue";
 private changeSkin() {
            //this.$refs.bgDom.attributes('data-txt', 'green');
            this.bgColor = this.bgColor == "blue" ? "green" : "blue";
        }

參考地址

git 項目地址。詳細講解