【Vue】CSSに変数を渡す方法

前提

• Vueの作業環境が整っていること

※ 前回の動作環境を引き継いで進めていきます。

配色を変えていく

ColorDrop という、配色センスが無くても助けてくれるサイトがあります。
ありがたいですね。使わせてもらいましょう。

当ブログと同様に、リッチテキスト内のタグ毎に配色を変更していく実装にしましょう。

今回採用する配色はこれでいきます。
あらかじめリッチテキストは作成しておきます。

実装

v-bindを使ってHTML上のstyle属性に適用させていきます。
それぞれのカラーパターンと現在のカラーパターンがわかる変数も用意しましょう。

index.vue

<template>
  <div>
    <v-container>
      // colorSwitchで配色パターンを切り替える
      <v-card :style="colorSwitch === 'cool' ? coolColor : cuteColor" class="color-pallet">
        <v-card-text v-html="richText"/>
        <v-card-actions>
          // クール系、かわいい系それぞれの切り替え用ボタン
          <v-btn color="#08ffc8" @click="colorSwitch='cool'">クール系</v-btn>
          <v-btn color="#ffb6b9" @click="colorSwitch='cute'">かわいい系</v-btn>
        </v-card-actions>
      </v-card>
    </v-container>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'

// Typescriptを使っているので型を作っておく
type ColorType = {
  "--color-h1": string
  "--color-h2": string
  "--color-h3": string
  "--color-back": string
}

@Component
export default class Index extends Vue {
  // 配色の切り替え用
  colorSwitch: 'cool' | 'cute' = 'cool'
  coolColor: ColorType = {
    "--color-h1": '#08ffc8',
    "--color-h2": '#fff7f7',
    "--color-h3": '#dadada',
    "--color-back": '#204969'
  }
  cuteColor: ColorType = {
    "--color-h1": '#ffb6b9',
    "--color-h2": '#fae3d9',
    "--color-h3": '#bbded6',
    "--color-back": '#8ac6d1'
  }
  // 対象のタグを設定します。
  richText: string = `<h1>h1タグだよ</h1><p>こんにちは、h1タグです。</p><h2>h2タグだよ</h2><p>こんにちは、h2タグです。</p><h3>h3タグだよ</h3><p>こんにちは、h3タグです。</p>`
}
</script>

<style lang="sass">
// h1,h2,h3,pタグに変数で受け取った色を当てる
.color-pallet
  h1
    background: var(--color-h1)
  h2
    background: var(--color-h2)
  h3
    background: var(--color-h3)
  p
    color: var(--color-back)
</style>

ポイント

VueからCSSへ変数を渡すには、CSSの命名規則に合わせる必要があります。
--カスタムプロパティと、ハイフンが2つ入ります。

css側で宣言した変数を呼び出します。
var(--カスタムプロパティ)

今回はSassを使っていますが、ScssでもCSSでも可能です。
是非お試しください！

共有

【今回の作業ブランチ】
https://github.com/yutahhh/firebase-study/tree/feature/%234

【Hosting】
https://fir-study-42747.web.app/

お疲れ様でした。