2018.2.11

【実用的なサンプル多数】Sassのmixinのおすすめ10選

Sass(本記事ではScss記法)には便利な機能がいくつもあります。今回はその中でも特に便利なmixinを紹介していきます。

mixinのサンプルを紹介しているサイトは幾つもありますが、「このmixinってすごいけどどこで使うの?」というものもチラホラ見かけてしまいます。

しかし、今回紹介するmixinは、実際に私が業務で何度も使い、日々改良してきたものです。実用性は大いにあると言い切れます。

mixinを使えばコードの記述量が減り、可読性があがったりなど作業効率が格段にアップするのでぜひ使ってみてはいかがでしょうか。

mixinについて

基本的な知識

まず、mixinについて簡単に説明します。

予めよく使うスタイルを登録しておくことで、それを簡単に呼び出せる機能がmixinです。

mixinを定義するには、@mixin 任意の名前のように書き、登録したいスタイルを{}の中に書きます。

@mixin heading{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
}

そして、登録したmixinを呼び出すには、@include 定義した名前で呼び出します。

h2{
    @include heading;
}

これでscssをコンパイルすると、以下のようになります。

h2{
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin-top: 40px;
}

引数を使ってみる

先程紹介した方法だと、mixinを定義した時のスタイルのプロパティと値がそのまま反映されます。

しかし、引数を使うことで、呼び出し時に値を自由に変更することが出来ます。

文章だけではピンとこないと思うので、以下のサンプルを用意しました。

@mixin heading($fontSize){
    font-size: $fontSize;
}
h2{
    @include heading(2rem);
}
h3{
    @include heading(1.8rem);
}

結論として、h2にはfont-size: 2rem、h3にはfont-size: 1.8remがコンパイルされます。

上記のサンプルのように、mixinの定義時には、名前の後に括弧で引数を設定することが出来ます。

@contentでブロックコンテンツを渡す

引数を使えば、プロパティの値を自由に呼び出し時に設定することが出来ますが、@contentを使うことで、プロパティ自体も自由に設定することが出来ます。

こちらもサンプルを用意しました。

@mixin heading{
    font-size: 2rem;
    @content;
}
h2{
    @include heading{
    color: red;
  }
}
h3{
    @include heading{
    color: blue;
  }
}

これをコンパイルしたら、h2はcolor: redが、h3はcolor: blueになります。

このように@contentを使うことでプロパティを自由に設定することが出来ます。

また、プロパティだけではなく、下記のようにブロックコンテンツ(要素)を渡すことも出来ます。

h2{
    @include heading{
        p{
            color: red;
        }
    }
}

このように呼び出すと、h2の中にp{color: red}が展開されます。

mixin集

background-image

何かと記述量が多いbackgroundプロパティですが、それをmixinにすることで記述量が圧倒的に少なくなります。

最初に$PATH_IMGに画像のファイルまでのパスを設定しておきます。このようにパスを設定しておくことで、他の箇所でもパスを省略することが出来たり、打ち間違いを防ぐことが出来ます。

呼び出し時には、引数に画像のファイル名を与えてあげます。

$PATH_IMG: "/assets/img/";

@mixin background-image($fileName) {
	background-image: url($PATH_IMG + $fileName);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	@content;
}

また、@contentを使うことで、呼び出し時に他のbackgroundプロパティを追加することも出来ます。

親要素に対して中央寄せ

親要素に対して子要素を中央寄せにするmixinです。

引数に x, y, xy いずれかを与えることで、どのように中央寄せするかを指定することが出来ます。中央寄せの種類は以下3つです。

  • x:横方向中央寄せ
  • y:縦方向中央寄せ
  • xy:縦横方向中央寄せ
@mixin center($direction) {
	position: absolute;
	@if $direction==xy {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	@else if $direction==x {
		left: 50%;
		transform: translateX(-50%);
	}
	@else if $direction==y {
		top: 50%;
		transform: translateY(-50%);
	}
}

使用時には親要素にposition: rerativeをかけるのを忘れないようにしましょう。

clear-fix

floatを解除する時は、親要素に対してclear-fixのクラスを付与するのが一般的だと思いますが、それをmixinで行うことも出来ます。

mixinで解除するメリットとしては、マルチクラスにならないのでhtmlが見やすくなったり、sassだけでスタイルを管理出来る点です。

@mixin cf {
	&:after {
		content: "";
		display: block;
		clear: both;
	}
}

counter-increment

自動で連番を付与できるcounter-incrementのmixinです。

第一引数には、カウンターの名前を与えてあげます。

第二引数と第三引数には、連番の前後に表示させたい値を与えてあげます。デフォルトでは空の値を与えているので、第一引数だけを与えて、第二、第三引数は省略することも可能です。

@mixin counter($numName, $beforeText, $afterText) {
    content: "#{$beforeText}" counter(num_ + $numName) "#{$afterText}";
    counter-increment: num_ + $numName;
}

使用時には連続する要素の親にcounter-resetをかけるのを忘れないようにしましょう。

グラデーション

2色で均等の割合で色が変化するシンプルなグラデーションのmixinです。

第3引数でグラデーションの方向を指定しており、デフォルトは縦方向です。

@mixin gradient($startColor, $endColor, $orientation: ttob) {
	background: $startColor;
	@if $orientation == ttob {
		background: -webkit-linear-gradient(top, #{$startColor} 0%, #{$endColor} 100%);
		background: linear-gradient(to bottom, #{$startColor} 0%,  #{$endColor} 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr=' #{$endColor}', GradientType=0);
	} @else if $orientation == ltor {
		background: -webkit-linear-gradient(right, #{$startColor} 0%, #{$endColor} 100%);
		background: linear-gradient(to right, #{$startColor} 0%,  #{$endColor} 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr=' #{$endColor}', GradientType=1);
	}
}

疑似要素でアイコン

先程紹介したbackground-imageのmixinを少しカスタマイズしたものです。主に疑似要素で画像を使ったアイコンを作る際に使用する想定です。

こちらも画像のパスの一部に変数を使用することで保守制が向上します。

@mixin icon($fileName, $width, $height) {
	background: url($path_img + $fileName) no-repeat 50% 50%;
	background-size: $width $height;
	width: $width;
	height: $height;
}

Media Queries

meadia queryも普通に記述するとなかなか手間なのでmixinにすることで格段に記述が楽になります。

引数にscreenのwidthを与えて使用します。引数に与えるwidthを変数にすることで、より運用しやすいコードになります。

$BREACKPOINT_PC: 1080px;
$BREACKPOINT_TB: 920px;
$BREACKPOINT_SP: 640px;

@mixin max-screen($breakPoint) {
    @media screen and (max-width: $breakPoint) {
        @content;
    }
}
@mixin min-screen($breakPoint) {
    @media screen and (min-width: $breakPoint) {
        @content;
    }
}
@mixin screen($breakPoint_min, $breakPoint_max) {
    @media screen and (min-width: $breakPoint_min) and (max-width: $breakPoint_max) {
        @content;
    }
}

hover

aタグなどのリンク系にhover時の動きを付ける際、transitionを何度も書くのが手間なのでmixinにしてみました。

このmixinは、ページ全体でhover時の動きがある程度共通の場合にとても役に立ちます。さらに、一部のリンクには違う動きをさせたい場合にも対応することが出来ます。

以下の場合、aタグに対して@include hoverで呼び出してあげれば、hover時に透明度が下がるようになります。

@mixin hover($flag: true){
  @include min-screen(900px){
    transition: .2s;
    &:hover{
       transition: .3s;
       @if $flag == true{
         opacity: .5;
       }
       @content
    }
  }
}

そして、一部のリンクには違う動き(下線を表示など)をさせたい場合は、以下のように呼び出します。

@include hover{
  // ここに動きのスタイルを記述
}

このように呼び出すと、hover時にはopacity: .5と「新たに記述したスタイル」が適用されます。

 

しかし、opacityは不要で、「新たに記述したスタイルのみ」で良い場合もあるかと思います。その場合は、以下のように引数をfalseにすることで対応可能です。

@include hover(false){
  // ここに動きのスタイルを記述
}

このように呼び出すと、hover時には「新たに記述したスタイルのみ」が適用されます。

擬似要素で三角形

三角形を疑似要素で作りたい時に使えるmixinです。三角形の方向を上下左右で指定することが出来ます。

@mixin triangle($direction, $width, $height, $color){
	width: 0;
	height: 0;
	border-style: solid;
	$valWidth: $width / 2;
	$valHeight: $height / 2;
	@if ($direction == top) {
		border-width: 0 $valWidth $height $valWidth;
		border-color: transparent transparent $color transparent;
	} @else if ($direction == left) {
		border-width: $valHeight $width $valHeight 0;
		border-color: transparent $color transparent transparent;
	} @else if ($direction == right) {
		border-width: $valHeight 0 $valHeight $width;
		border-color: transparent transparent transparent $color;
	} @else if ($direction == bottom) {
		border-width: $height $valWidth 0 $valWidth;
		border-color: $color transparent transparent transparent;
	}
}

複数行のテキストに下線を引く

テキストに下線を引くにはborder-bottomや疑似要素を使うことで実現可能ですが、それはテキストが一行の場合にのみ可能です。

2行以上になった場合、最終行にのみ下線が引かれ、それ以外の行には引かれません。

以下のmixinは、グラデーションとインライン要素を組み合わせることで、複数行にも対応可能な下線を引くことが可能になります。

@mixin line($color: #ff0, $height: 65%){
  background: linear-gradient(transparent $height, $color 0%);
  display: inline;
}

まとめ

mixinはとても便利でコーディングの時間を短縮させてくれる便利な機能です。

しかし、引数を多く設定したり複雑な仕組みにしたりすると、作った人以外分からなくなることもあります。mixinを作る、使う際は運用・開発メンバーでルールを決めるなどして修正・運用時のことも考えて使うようにしましょう。

シェアする
フォローする
Web-Guided - web業界で働く方を少しだけ手助けするメディア