色を継承できる【currentColor】の使い方

こんにちは。
今日は、色を継承できる【currentColor】の使い方について書こうと思います。

この値の存在は、先日記事にしたCSSNiteの『CSS設計完全ガイド』の著者による「CSS設計のキホンと王道パターン」を視聴したときに知りました！

そのとき、これは便利だな〜〜と思ったので記事にします＾＾

currentColorとは
currentColorの使い方
1. コーディング
  1. HTML編
  2. CSS編

currentColorとは

まず始めにcurrentColorについて説明します！

currentColorとは、CSS上で変数のように使えるキーワードでプロパティの値に指定します。
そしてその要素に適応されているcolorと同じ値（色）になります。

なのでもしその要素の親要素にcolorを指定している場合は、colorは継承されるので実質親要素の値になります。この使い方も便利だと感じました。

個人的に一番いい点は修正に強いところだと思います＾＾

と言っても実際に試してみないと分かりづらいので検証しましょうー！

currentColorの使い方

例としてこのようなボタンを作ってみたいと思います！

コーディング

HTML編

      <section class="contSect">
        <div class="inner">
          <div class="btn"><a href="#">もっと見る</a></div>
        </div>
        <!-- / .inner -->
      </section>
      <!-- /.contSect -->

CSS編

.btn {
  font-size: 16px;
  text-align: center;
  font-weight: bold;
}

.btn a {
  color: #f79457;

  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 10px 15px;
  border-radius: 40px;
  min-width: 250px;
  box-sizing: border-box;
  border: 2px solid currentColor;
}

.btn a:after {
  position: relative;
  display: inline-block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent currentColor;
  border-width: 5px 0 5px 10px;
  vertical-align: middle;
  margin-top: -.2em;
  margin-left: 1.2em;
}

ポイントは、色を設定したのは<a>のcolorだけで、ボーダーや擬似要素の三角には設定していないということです。

その代わりに今回紹介したい【currentColor】という値を使っています。

このように設定しておくと、いざ全体の色が変わったとしても<a>のcolorを変えるだけで他の色も変わってくれます＾＾

試しに緑を設定すると・・・