有些時候，網頁上的元件樣式，可能會透過 JavaScript 來做修改，例如對標籤調整 style 屬性，添加與刪除 class 類別名稱，達到動態的調整元件樣式的效果。

在一些前端框架下，要做到動態的調整樣式或類別屬性也相當容易，例如使用 Vue，你可以建立如下的程式碼，依據複選按鈕是否勾選，來決定是否套用樣式來實現元素翻轉效果。

結合 Master CSS 來動態標記類別名稱，依據判斷式來應用類別標記，就可以很方便的動態調整元素樣式。

<!-- Vue -->
<template>
  <div :class="{'scaleX(-1)': flipped}" class="~transform|.3s font:96 font:heavy fg:gold-82']">Aa</div>
  
  <label class="inline-flex align-items:center">
    <input v-model="flipped" type="checkbox">
    <sapn class="mx:6">翻轉</sapn>
  </label>
</template>

這個動態賦值的效果看似合理與容易，但如果你有使用過類似透過類別來套用樣式的 CSS 框架，這些框架可能採用的是編譯與打包時，才將頁面中所需要的類別樣式產生出來。

然而這些動態的類別樣式如果是透過模板串接，例如 fg:teal-${size}，可能會因為框架無法正確匹配或在編譯時期無法得知到底是什麼值也就無法產生相應的 CSS 規則，自然就無法實現動態賦值的效果。

但是在 Master CSS 你可以很輕易的來組合這些類別樣式標記，即使這些標記是透過取得伺服器資料後才產生，這些標記也都能在客戶端正常的運作。

<!-- Vue -->
<template>
  <div :class="`fg:teal-${size} fg:purple-${size}:hover font:96 font:heavy`">Aa</div>

  <!-- 動態調整 size 數值 -->
  <input v-model="size" type="range" min="2" max="98" step="2" />
</template>

透過滑動桿綁定的數值 size，我們就能控制文字顏色與滑鼠指標懸停時的變化。