Sass(SCSS) mixin Snippets

Posted on December 7th, 2016
Category : Tips

普段からSassを使ってるのであれば多くの人が利用しているであろう機能のひとつであるmixinは、面倒な記述を手軽に呼び出せたり何度も同じ記述をするという手間を省けたりと、使いこなせば何かと楽になるだけでなくCSSを記述する時間を大幅に短縮させることも可能になります。特別目新しいものはないですが、今回はそんなmixinで使えるスニペットをいくつか紹介します。特にこれまでSassやmixinをあまり使ってこなかったという人は、全体的に紹介しているものは内容もシンプルですし、そのまま試しに使ってみるだけでなく自分好みにカスタマイズしたりもしてみてください。

※以下で紹介しているものは、それぞれ「mixin」はmixinコード、「usage」はmixin使用時のサンプルコード、「output」はコンパイル後のコードとなります。

※プレフィックスに関する記述に関しては、現状で必要だと思われるものでもAutoprefixerなどを使用するという想定で省いているので、必要な場合は各自で追記してください。

Sass(SCSS) mixin Snippets 目次

1. Clearfix

Clearfixを簡単に扱えるようにします。

mixin

SCSS

@mixin clearfix {
	&::after {
		content: '';
		display: table;
		clear: both;
	}
}

usage

SCSS

.elements {
	@include clearfix;
}

output

CSS

.elements::after {
	content: '';
	display: table;
	clear: both;
}

目次へ

2. センター配置

レイアウト周りでよく使うセンター配置です。
引数にwidthの値を指定したりmax-widthの有無を指定できるようになっています。

mixin

SCSS

@mixin center-layout($width, $max: false) {
	display: block;
	@if $max {
		max-width: $width;
	} @else {
		width: $width;
	}
	margin-right: auto;
	margin-left: auto;
}

サンプルの.elements01は単純にwidthで指定したい値を引数に記述したもので、.elements02は同じくwidthの値を指定するのに加え、第2引数でmax-widthを利用するようtrueを記述しています。

usage

CSS

.elements01 {
	@include center-layout(960px);
}

.elements02 {
	@include center-layout(1200px, true);
}

output

CSS

.elements01 {
	display: block;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

.elements02 {
	display: block;
	max-width: 1200px;
	margin-right: auto;
	margin-left: auto;
}

目次へ

3. 天地中央配置

要素を天地中央に配置させるスニペットのひとつを簡単に扱えるようにします。

mixin

SCSS

@mixin vertical-centering {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

usage

CSS

.elements {
	@include vertical-centering;
}

output

CSS

.elements {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

目次へ

4. 要素をセンター配置（天地左右中央・天地中央・左右中央で使い分け可能）

基本的には上で紹介してきたようなposition: absolute;とtransformを組み合わせたセンター配置のスニペットを使用するmixinですが、引数の指定によって天地左右中央だけでなく天地中央・左右中央にして使うということができるものです。

mixin

SCSS

@mixin centering-elements($horizontal: true, $vertical: true) {
	position: absolute;
	@if $horizontal and $vertical {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	} @else if $horizontal {
		left: 50%;
		transform: translate(-50%, 0);
	} @else if $vertical {
		top: 50%;
		transform: translate(0, -50%);
	}
}

引数の初期値は両方trueにしているので、そのまま使用した場合は天地左右中央となり、片方だけfalseにすることで天地中央または左右中央として実装できます。
それを踏まえてサンプルはそれぞれ以下のような動きが実装される記述となっています。

.elements01 … 天地左右中央
.elements02 … 天地中央
.elements03 … 左右中央

usage

CSS

.elements01 {
	@include centering-elements;
}

.elements02 {
	@include centering-elements(true, false);
}

.elements03 {
	@include centering-elements(false, true);
}

output

CSS

.elements01 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.elements02 {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

.elements03 {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
}

目次へ

5. 疑似要素

吹き出しデザインの一部を表現したり、リスト・ボタンといった要素にアイコンを付けたいときなど、何かと使う場面が多い疑似要素を使用する際によく記述するプロパティをまとめたものです。

mixin

SCSS

@mixin pseudo-element($content: '', $position: absolute, $display: block) {
	position: $position;
	display: $display;
	content: $content;
}

サンプルの::after擬似要素のように使用することでcontentの値を変更して出力でき、第2・第3引数を変更すればposition: relative;にしたりdisplay: inline-block;にしたりといった使い方もできます。

usage

CSS

.elements {
	&::before {
		@include pseudo-element;
	}

	&::after {
		@include pseudo-element('foo');
	}
}

output

CSS

.elements::before {
	position: absolute;
	display: block;
	content: "";
}

.elements::after {
	position: absolute;
	display: block;
	content: "foo";
}

目次へ

6. 画像置換

CSSで画像置換を実装するテクニックは幾つかありますが、その中のひとつを簡単に扱えるようにしたもので、使用時は引数に表示させる画像のパスやサイズを指定します。

mixin

SCSS

@mixin img-repl($width, $height, $image) {
	width: $width;
	height: $height;
	background: url($image) 0 0 no-repeat;
	font-size: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

usage

CSS

.elements {
	@include img-repl(200px, 100px, '../example.jpg');
}

output

CSS

.elements {
	width: 200px;
	height: 100px;
	background: url("../example.jpg") 0 0 no-repeat;
	font-size: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

目次へ

7. テキストを省略

テキストが領域をはみ出した場合に末尾に三点リーダー（…）が表示され、それ以降テキストが省略されるスニペットを簡単に扱えるようにします。

mixin

SCSS

@mixin text-truncate {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

usage

CSS

.elements {
	@include text-truncate;
}

output

CSS

.elements {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

目次へ

8. remでのフォントサイズ指定

演算機能を利用してremでのフォントサイズ指定を楽にするもので、最近はほぼ必要ないですがIEなどrem非対応のブラウザ用にpxでの指定も出力してくれるものです。
ベースとなるサイズはmixinで指定しているので、基本的に使用する際は指定したいサイズのみ引数に記述すればいいですが、第2引数も指定することでベースサイズも変更して出力できます。

mixin

SCSS

@mixin font-size($size, $base: 16) {
	font-size: $size + px; // fallback for old browsers
	font-size: ($size / $base) + rem;
}

サンプルの.elements01はmixinで指定しているベースサイズを利用した場合で、.elements02はベースサイズを変更したい場合の記述となります。

usage

CSS

.elements01 {
	@include font-size(24);
}

.elements02 {
	@include font-size(24, 18);
}

output

CSS

.elements01 {
	font-size: 24px;
	font-size: 1.5rem;
}

.elements02 {
	font-size: 24px;
	font-size: 1.33333rem;
}

目次へ

9. 縦横比を維持したブロック

縦横比を維持したブロック表示を簡単に扱えるようにしたもので、第3引数にイメージのパスを指定すれば縦横比を維持して領域いっぱいに背景画像を表示できるようになっています。
逆に第3引数を指定しなければ、単純に縦横比が維持されたブロックが表示されるのみになります。

mixin

SCSS

@mixin aspect-ratio($width, $height, $image: null) {
	display: block;
	width: 100%;
	height: 0;
	padding-top: ($height / $width) * 100%;
	@if $image != null {
		background: url($image) 50% 50% no-repeat;
		background-size: cover;
	}
}

サンプルの.elements01は単純に縦横比を維持したブロック要素を作りたい場合のもので、.elements02はさらに背景画像が表示されるようにしたものです。
デフォルトでbackground-size: cover;が出力されるようにしているので、それだと問題がある場合はmixinの該当箇所を任意のものに変更するなどしてください。

usage

CSS

.elements01 {
	@include aspect-ratio(960, 600);
}

.elements02 {
	@include aspect-ratio(960, 600, '../example.jpg');
}

output

CSS

.elements01 {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 62.5%;
}

.elements02 {
	display: block;
	width: 100%;
	height: 0;
	padding-top: 62.5%;
	background: url("../example.jpg") 50% 50% no-repeat;
	background-size: cover;
}

ちなみに、比率繋がりで黄金比や白銀比といったものを手軽に扱えるスニペットが以下で紹介されているので、興味ある方はこちらもチェックしてみてください。

黄金比や白銀比を手軽に使うためのSCSSスニペット – Qiita

目次へ

10. Webフォント指定

Webフォントの指定（@font-face）を簡単に扱えるようにしたものです。
使用時は第1引数にフォント名、第2引数にフォントファイルへのパスを指定し、第3・第4引数については特に指定しなければnormalの値がfont-weightとfont-styleに指定されて出力されます。

mixin

SCSS

@mixin font-face($family, $path, $weight: normal, $style: normal) {
	@font-face {
		font-family: $family;
		src: url('#{$path}.woff2') format('woff2'),
		     url('#{$path}.woff') format('woff'),
		     url('#{$path}.ttf') format('truetype');
		font-weight: $weight;
		font-style: $style;
	}
}

usage

CSS

@include font-face('fontName', '../font/fontName');

output

CSS

@font-face {
	font-family: "fontName";
	src: url("../font/fontName.woff2") format("woff2"), url("../font/fontName.woff") format("woff"), url("../font/fontName.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

ちなみに、IEをはじめとする古いバージョンに対応する必要があるという場合は、下記のようにすることで対応されたものが出力されます。

mixin

SCSS

@mixin font-face($family, $path, $weight: normal, $style: normal) {
	@font-face {
		font-family: $family;
		src: url('#{$path}.eot');
		src: url('#{$path}.eot?#iefix') format('embedded-opentype'),
		     url('#{$path}.woff') format('woff'),
		     url('#{$path}.ttf') format('truetype'),
		     url('#{$path}.svg##{$family}') format('svg');
		font-weight: $weight;
		font-style: $style;
	}
}

usage

CSS

@include font-face('fontName', '../font/fontName');

output

CSS

@font-face {
	font-family: "fontName";
	src: url("../font/fontName.eot");
	src: url("../font/fontName.eot?#iefix") format("embedded-opentype"), url("../font/fontName.woff") format("woff"), url("../font/fontName.ttf") format("truetype"), url("../font/fontName.svg#fontName") format("svg");
	font-weight: normal;
	font-style: normal;
}

目次へ

以上、Sass(SCSS)で使えるmixinのスニペットまとめでした。
紹介してきたものの中で間違ってるのはもちろん、もっとスマートに書けるとかより便利にできるとかあれば是非教えてください。