更新日
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！
目次
- Sass の基礎知識
- @mixin の基本的な使い方
- リンクカラーを一括設定
- ベンダープレフィックス
- 透明度
- 絶対位置の指定
- rem を使ったフォントサイズ指定
- レティナディスプレイ対応画像
- Compass について軽く。
Sass の基礎知識
今回は Sass を使った応用を紹介するので、基礎知識や環境設定については以下のサイト・記事を参考にしてください。初期設定は難しくみえるかもしれませんが、一度設定しておくと今後はかなり時間を節約して CSS コーディングができるようになるので、この機会にぜひ挑戦してみてください！
- Sass/SCSS 入門 (全 15 回) - ドットインストール
短い動画でサクサク学習できます。 - 【Sass を覚えよう！】もくじ的なのと参考リンク
Sass の基本から応用まで詳しく書かれています - Sass 公式サイト
例文などあります。
@mixin の基本的な使い方
@mixin に続いてお好みの名前を定義し、@include で呼び出します。何度も使うようなスタイルがあるなら、あらかじめ定義しておくと便利です。
SCSS @mixin の設定
@mixin circle {
width: 50px;
height: 50px;
border-radius: 100%;
}
SCSS @include で呼び出し
.box {
@include circle;
background: #fc0;
}
CSS に出力
.box {
width: 50px;
height: 50px;
border-radius: 100%;
background: #fc0;
}
引数を使う
引数を指定しておくと、@mixin のカスタマイズ性がググッとアップしますよ！ @include で呼び出すときに括弧内（）に値を入れると、その部分に当てはめて出力されます。
SCSS @mixin の設定
@mixin circle($size) {
width: $size;
height: $size;
border-radius: 100%;
}
SCSS @include で呼び出し
.box {
@include circle(100px);
background: #fc0;
}
CSS に出力
.box {
width: 100px;
height: 100px;
border-radius: 100%;
background: #fc0;
}
初期値の設定
コロンに続いて値を書き、初期値として設定しておくことができます。上記と同様、 @include で呼び出す時に括弧内（）に値を入れればその値が、括弧（）を書かないでおくと初期値が呼び出されます。
SCSS @mixin の設定
@mixin circle($size: 40px) {
width: $size;
height: $size;
border-radius: 100%;
}
SCSS @include で呼び出し
.box {
@include circle;
background: #fc0;
}
CSS に出力
.box {
width: 40px;
height: 40px;
border-radius: 100%;
background: #fc0;
}
ここで紹介した @mixin の使い方は、ドットインストールの動画でも紹介されています。約 3 分の短い紹介でサクっとおさらいしておきましょう！
@mixin の使い方を覚えたら、自分の使いやすいようにカスタマイズして保存しておくと何かと便利です。それでは続いて @mixin を使ったコード集を紹介します！
リンクカラーを一括設定
リンクの色と、ホバーした時やフォーカスした時のリンクの色を一括設定します。一括…というのは、元となる色を決めておき、 :hover, :active, :focus の時は lighten という関数を使って明るい色のカラーコードを自動生成する方法です。カラーコードを調べる手間が省けるので、かなり時間短縮になりそうです。
色を明るくする lighten の他に、暗くする darken や、彩度を調整する saturate など、たくさんの関数が用意されています。Sass で使える Function 一覧ページで紹介されているので、参考にしてみてください。
SCSS @mixin の設定
@mixin linkColor($color) {
color: $color;
&:hover,
&:active,
&:focus {
color: lighten($color, 20%);
}
}
SCSS @include で呼び出し
a {
@include linkColor(#3cf);
}
CSS に出力
a {
color: #33ccff;
}
a:hover,
a:active,
a:focus {
color: #99e6ff;
}
ベンダープレフィックス
CSS3 を使う時は必ずと言っていいほどベンダープレフィックスを指定することになると思うので、あらかじめ設定しておきましょう。ただし border-radius など、すでにベンダープレフィックスの記述が不要なプロパティもあるので、CSS3 のプロパティすべてに使ってね、というわけではないのでご注意を。グラデーション等、プロパティにベンダープレフィックスを使用しないものは要カスタマイズです。
SCSS @mixin の設定
@mixin css3($property, $value) {
@each $prefix in -webkit-, -moz-, -ms-, -o-, "" {
#{$prefix}#{$property}: $value;
}
}
SCSS @include で呼び出し
.border_radius {
@include css3(transition, 0.5s);
}
CSS に出力
.border_radius {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
透明度
モダンブラウザーなら透明度の設定は opacity プロパティで OK ですが、IE は filter を使う必要があります。opacity は 0〜1、filter は 0〜100 のパーセンテージで透明度を指定するので、IE 用には単純に opacity の値に 100 をかけて出力します。
SCSS @mixin の設定
@mixin opacity($opacity) {
opacity: $opacity;
$opacityIE: $opacity * 100;
filter: alpha(opacity=$opacityIE);
}
SCSS @include で呼び出し
.box {
@include opacity(0.5);
}
CSS に出力
.box {
opacity: 0.5;
filter: alpha(opacity=50);
}
絶対位置の指定
position: absolute; を使って絶対位置を指定する時に使える mixin。top, right, bottom, left すべて書いていますが、必要な位置のみ設定しておけば OK。
SCSS @mixin の設定
@mixin absPosition($top: auto, $right: auto, $bottom: auto, $left: auto) {
position: absolute;
top: $top;
right: $right;
bottom: $bottom;
left: $left;
}
SCSS @include で呼び出し
.box {
@include absPosition(5px, 20px, 10px, 15px);
}
CSS に出力
.box {
position: absolute;
top: 5px;
right: 20px;
bottom: 10px;
left: 15px;
}
rem を使ったフォントサイズ指定
フォントサイズの指定は、相対指定の ％ や em 、絶対指定の px がよく使われますが、CSS3 では「rem」という単位を使って指定することができます。WordPress の 2012 年のデフォルトテーマ、Twenty Twelveで採用されていたので、目にした事がある人も多いかと思います。em や % は相対指定なので、親要素の影響を受けてしまいますが、rem は HTML 要素（root）を継承するので、どれだけ入れ子になって階層が深くなっても、フォントサイズが影響されることはありません。
なぜこんな便利な単位があまり使われていないかと言うと、rem は IE8 以下のブラウザーでは対応していないのです。未対応のブラウザーには同時に px を指定する必要があります。2 つの単位を書くのは計算するのも手間だったりしますが、mixin で定義しておけば自動的に算出してくれますよ。スマートフォンサイトや古いブラウザーに対応させなくてもいいサイトなら、うまく取り入れられそうですね。
rem ではベースとなるフォントサイズを元に値を計算するので、$base で初期値を設定しておきます。@include で呼び出すときは変更したいフォントサイズのみを入力すれば、$base を変更することなく出力できます。
SCSS @mixin の設定
@mixin fontsize($size: 24, $base: 16) {
font-size: $size + px;
font-size: ($size / $base) * 1rem;
}
SCSS @include で呼び出し
body {
@include fontsize(12);
}
CSS に出力
body {
font-size: 12px;
font-size: 0.75rem;
}
レティナディスプレイ対応画像
背景画像を使っている要素に、レティナディスプレイ対応ブラウザーで見た場合は高解像度の画像を表示させます。まず、通常サイズの logo.png と、レティナディスプレイに対応させるための高画質の画像 logo-2x.png を用意。Sass では画像名・拡張子・幅・高さの順に引数を作り、mixinを定義します。そしてメディアクエリーでレティナディスプレイの場合のコードを書きます（な、長い…）。レティナ対応画像には名前の最後に -2x をつけ、 background-size で背景画像のサイズを指定します。
注意点として、レティナディスプレイ用のスタイルがたくさんある場合は、このようにひとつの要素ごとに記述していくとかなり長くなってしまいます。そういった場合はこの mixin を使わず、まとめられるものはひとまとめに書いた方がきれいにおさまります。
SCSS @mixin の設定
@mixin imgRetina($image, $extension, $width, $height) {
background: url($image + "." + $extension) no-repeat;
width: $width;
height: $height;
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
background-image: url($image + "-2x" + "." + $extension) no-repeat;
background-size: $width $height;
}
}
SCSS @include で呼び出し
.logo {
@include imgRetina(logo, png, 100px, 40px);
}
CSS に出力
.logo {
background: url(logo.png) no-repeat;
width: 100px;
height: 40px;
}
@media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
.logo {
background-image: url(logo-2x.png) no-repeat;
background-size: 100px 40px;
}
}
Compass について軽く。
Compassは mixin があらかじめ定義されている SCSS のフレームワークです。CSS3 用 mixin がたくさんあるので、複雑なカスタマイズをしないのであればこれで十分かも。
例えば、
@import "compass/reset/";
と書けば、Compass が用意しているリセット CSS が読み込まれたり、@mixin で定義しなくても、
@include box-shadow(#000 2px 2px 5px);
と、 @include で box-shadow を呼び出せば…
-webkit-box-shadow: #000 2px 2px 5px;
-moz-box-shadow: #000 2px 2px 5px;
box-shadow: #000 2px 2px 5px;
こんな感じで CSS が吐き出されます。便利ですねー！
Compass についてはたくさん記事があるので、参考にしてみてください。
うーん、中にはもう少しスマートな書き方がありそうなものも。おすすめスニペットがあればぜひ教えてください！