Vue.jsでコンポーネント作るときにCSS変数つかったら色々できる

ブロック要素に内容を表示するだけの簡単なコンポーネントを作ったとします。
この要素幅や背景色を属性で指定したい場合、CSS変数を使うと以下のように実装できます。

Box.vue

<template>
  <div class="box" :style="styles"> <!-- computedなstylesプロパティをstyleにバインド-->
    <div class="message">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'box',
  props: {
    color: {},
    width: {}
  },
  computed: {
    // バインドするスタイルを生成
    styles () {
      return {
        '--color': this.color,
        '--width': this.width
      }
    }
  }
}
</script>

<style scoped>

.box {
  /* デフォルトの値を宣言*/
  --color: orange;
  /* --width: width; */ /* 20180215 書き間違えていたため修正しました */
  --width: 100px;
  
  /* CSS変数を背景と幅に割り当て */
  background-color: var(--color);
  width: var(--width);
  
  display: inline-block;
  
}

.box .message {
  padding: 1em;
}
</style>

使うときはこんな感じになります。

App.vue

<template>
  <div id="app">
    <!-- 属性で色と幅をバインド -->
    <box class="green" :color="color" :width='width'>.green</box>
    
    <div>
      <!-- バインドした属性を編集する入力ボックス -->
      <input v-model='color'>
      <input v-model='width'>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    // バインドする属性を宣言
    return {
      color: 'pink',
      width: '20px'
    }
  }
}
</script>

実行した様子は以下の感じです（画像なのでわかりにくいですが）。
入力ボックスに入力した値に応じてコンポーネントが変化します。