Help us understand the problem. What is going on with this article?

【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>
katu_
学習記録のためにQiita始めました
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away