より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！
↑私が10年以上利用している会計ソフト！
目次
- Sassの基礎知識
- @mixin の基本的な使い方
- リンクカラーを一括設定
- ベンダープレフィックス
- 透明度
- 絶対位置の指定
- rem を使ったフォントサイズ指定
- レティナディスプレイ対応画像
- Compassについて軽く。
Sassの基礎知識
今回はSassを使った応用を紹介するので、基礎知識や環境設定については以下のサイト・記事を参考にしてください。初期設定は難しくみえるかもしれませんが、一度設定しておくと今後はかなり時間を節約してCSSコーディングができるようになるので、この機会にぜひ挑戦してみてください！
- 効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！
過去記事。Sassでできる事を簡単に紹介しています。 - 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についてはたくさん記事があるので、参考にしてみてください。
- CSSの常識が変わる！「Compass」、基礎から応用まで！
- コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利
- Compass Core Framework
Compassのレファレンス
うーん、中にはもう少しスマートな書き方がありそうなものも。おすすめスニペットがあればぜひ教えてください！
[…] より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Web… […]
[…] より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Web…：そろそろ使わにゃならんと思ってる。 […]
[…] 『より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集』 Sassをきちんと理解して、応用へ！ […]