Sassの@mixinで2色のグラデーションを簡潔に記述する方法

サイト制作において、グラデーションカラーを使用する機会がよくあります。

グラデーションカラーはbackground-imageプロパティのlinear-gradient関数を使用することで作成可能ですが、記述が長くなるのが難点ですね。

また、サイトによっては、

ということもあり、何度も記述するのは面倒ですね・・。

そこで今回の記事では、Sassのミックスイン機能を使用して、2色のグラデーションカラーを簡単に記述する方法を紹介します！

グラデーションを多用するサイトでは特に役立つかと思いますので、ぜひ参考にしてみてください。

2色のグラデーションを呼び出す@mixinを作成

まずはグラデーションを呼び出す@mixinを定義していきましょう。

今回作成するのは、以下のようなシンプルなグラデーションコードを出力するミックスインです。

以下のコードをコピペして、Sassファイルに貼り付けてください。

@mixin gradient($direction, $color-1, $color-2) {
  background-image: linear-gradient($direction, $color-1, $color-2);
}

このままでもいいのですが、ミックスインの引数には以下のようにしてデフォルト値を指定することができます。

@mixin gradient($direction: 0deg, $color-1: #f571fa, $color-2: #2be6ff) {
  background-image: linear-gradient($direction, $color-1, $color-2);
}

よく使用する色や角度が決まっていれば、デフォルト値として渡してあげることで記述量が少なくなります。

次で、定義した@mixinを使用する方法を見ていきましょう。

@includeで2色のグラデーションを呼び出す

上で定義したミックスインを使用するには、@inlucdeを使用します。

// mixinを定義
@mixin gradient($direction, $color-1, $color-2) {
  background-image: linear-gradient($direction, $color-1, $color-2);
}

// mixinを使用
.gradient {
  @include gradient(135deg, #f571fa, #2be6ff);
}

$directionにはグラデーションの角度、$color-1には1つ目の色、$color-2には2つ目の色を引数として渡します。

このコードをコンパイルすることで、以下のようなCSSが生成されます。

/* アウトプット結果 */
.gradient {
  background-image: linear-gradient(135deg, #f571fa, #2be6ff);
}

さらに、デフォルト値を指定している場合は、記述がより簡潔になります。

// mixinを定義（デフォルト値あり）
@mixin gradient($direction: 0deg, $color-1: #f571fa, $color-2: #2be6ff) {
  background-image: linear-gradient($direction, $color-1, $color-2);
}

// mixinを使用
.gradient {
  @include gradient();
}

引数に何も指定しない場合は、デフォルト値として指定した値が適用されます。

/* アウトプット結果 */
.gradient {
  background-image: linear-gradient(0deg, #f571fa, #2be6ff);
}

また、デフォルト値のうち上書きしたい値があれば、以下のようにします。

.gradient {
  @include gradient($direction: to right bottom);
}

こうすることで、デフォルト値を引き継いだまま、上書きしたい部分だけ引数で渡すことができます。

/* アウトプット結果 */
.gradient {
  background-image: linear-gradient(to right bottom, #f571fa, #2be6ff);
}

以上でコードの解説は終わりです。

【まとめ】Sassのミックスインを使用して2色のグラデーションカラーを簡単に作成する方法

Sassの@mixin機能で、グラデーションカラーを簡潔に記述する方法を紹介しました。

background-imageやlinear-gradientなど、グラデーションを生成するCSSは記述量が多くなりがちです。

グラデーションを多用するサイトでは特に役に立つかと思いますので、ぜひこの記事で紹介したミックスインを使用してみてください。