【Nuxt.js】デフォルトの色を定義して汎用的に使えるようにする

デフォルトの色を定義して汎用的に使えるようにする

default.vue

<template>
  <div>
    <nuxt />
  </div>
</template>

<style>
/* 使用する色を定義 */
:root {
  --dark-grey: #999b9f;
  --grey: #dcdfe5;
  --light-grey: #f6f7f9;
}
</style>

var(プロパティ)とすれば定義した色が適用される

<style>
.button--grey {
  background: var(--light-grey);
  border: 1px solid var(--grey);
}
</style>

classにbutton--greyを指定すれば、上記で設定したCSSが適用されることがわかる

<template>
  <section>
    <!-- 省略 -->
    <div class="btn">
      <nuxt-link :to="{ name: 'create', params: {url: url} }">
        <Btn class="button--grey" :text="btn"></Btn>  <!-- コンポーネント化したボタンを呼び出し -->
      </nuxt-link>
    </div>
  </section>
</template>