Sassのmixinを使ってテキストのリンク色を使い分ける。

たぐと申します。東京のweb制作会社でプロデューサーをしています。

今回は、最近このブログのSassのコードでも使ったmixinの実例をさらっと紹介します。

具体的には、テキストのリンク色設定をシンプルにSassで定義する方法です。

テキストのリンク色を使い分ける。

これってよくやると思います。
デフォルトでは下記のように設定するケースって多いと思います。

a {

    &:link {
        color: #000;
    }

    &:visited {
        color: #000;
    }

    &:hover {
        color: #666;
    }

    &:active {
        color: #000;
    }
}

上記は、テキストのリンク色は、黒でマウスオーバーしたらグレーになる。
そんな感じの設定です。

ただ、実際には、リンク色の指定って、それを置く場所で結構変わります。
背景が暗いとき、ボタンの上に置くテキストだったり。

そういうときに、毎回毎回上記のような記載をCSSで作ってられないですよね？
そんな時にmixinは役立ちます。

以前紹介したように、

です。

Sassのmixinとextendを概念で理解する。

mixinの定義としては以下のような感じです。

@mixin linkColor($color) {
    &:link {
        color: $color;
    }

    &:visited {
        color: $color;
    }

    &:hover {
        color: $color;
    }

    &:active {
        color: $color;
    }
}

上記は「linkColor」というmixinを定義したものです。

linkColorは、$colorという引数を取り、その値でリンク色を定義しています。

では、それを使う場合にどうするか？

定義したmixinを適用したいSassのClassに入れ込んであげます。

.box-sample{
	a {
		text-decoration: none;
		@include linkColor($color: #f00);
	  }
}

こんな感じ。

@include linkColor($color: #f00);

この部分で定義したmixinを読み込んでいます。
関数みたいな感じですね。

これで、box-sampleというclass内の「a（アンカータグ）」のテキストは赤色（#f00）になります。

このような定義を作っておくことで、
.box-sampleだろうが、.card-recommendだろうが、
自身が定義したclass内で、

ここの中のリンクテキストはこの色にしたいなー

ということがあれば、リンクテキストの色を自在に操れます。

上記の例では、引数は1つで、「#f00」という赤色1色を指定していますが、引数を複数定義して、「&:visited」「&:hover」「&:active」それぞれの場合で、違う色を設定すること可能です。