[CSS]最近のWeb制作でよく使う、Sassのmixinのまとめ

最近のWeb制作に役立つ、Sassのmixinのまとめを紹介します。

15 essential Sass mixins

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

Sassやってみたい、と考えてる人には下記の本をオススメします。

• Sassの初心者からもっと使いこなしたい人まで、Sassを確実にマスターできるオススメの本 -Sassの教科書

• box-sizing（ボックスサイズ）
• opacity（不透明度）
• column-width（カラム幅）
• circle（円形）
• font-size（フォントサイズ）
• box-shadow（ボックスシャドウ）
• xPos（要素の座標）
• vertical-align（天地の中央に配置）
• flexbox（フレックスボックス）
• flex（モダンブラウザの旧仕様にも対応したflexの指定）
• flex-order（表示の順番）
• flex-direction（表示の方向）
• gradient（グラデーション）
• ghost-button（ゴーストボタン）
• break-point（ブレイクポイント）

box-sizing（ボックスサイズ）

一つ目は、box-sizing用のmixinの定義。
Sassを使用すると、変数（ここでは$type）が使えたり、ベンダープレフィックスをコード側に記述することもなくなります。

mixinの定義

@mixin box-sizing($type)
 {
 -webkit-box-sizing:$type;
 -moz-box-sizing:$type;
 box-sizing:$type;
 }

mixinの使い方

div {
 @include box-sizing(border-box);
 }

opacity（不透明度）

不透明度はモダンブラウザ用にはopacityで、IE8以下用にはfilterを使用して定義します。

mixinの定義

@mixin opacity($opacity) {
     opacity: $opacity;
    filter: alpha(opacity=($opacity * 100));
 }

mixinの使い方

div {
 @include opacity(0.5);
 }

column-width（カラム幅）

カラム幅の設定はmixinを使った最も良い例の一つです。

mixinの定義

@mixin column-width ( $value: 150px ) {
     -webkit-column-width: $value;
    -moz-column-width: $value;
    column-width: $value;
 }

mixinの使い方

div {
 @include column-width(150px);
 }

circle（円形）

divは通常長方形ですが、これを利用すると円形に変えることができます。

mixinの定義

@mixin circle
 {
 @include border-radius(100%);
 }

mixinの使い方

div {
 @include circle();
 }

font-size（フォントサイズ）

mixinはプログレッシブエンハンスメントでも活躍します。
IE8などの古いブラウザはpx、モダンブラウザはremに上書きしてfont-sizeを設定します。

mixinの定義

@mixin font-size($size) {
     font-size:$size;
 font-size: ($size / 16px) * 1rem;
 }

mixinの使い方

div {
 @include font-size(14px);
 }

box-shadow（ボックスシャドウ）

このmixinはベンダープレフィックスを考えずに、ボックスシャドウを利用できるようにします。

mixinの定義

@mixin box-shadow( $h: 10px , $v: 10px , $b: 0px , $s: 0px , $c: #000000 ) {
     -webkit-box-shadow: $h $v $b $s $c;
 -moz-box-shadow: $h $v $b $s $c;
 box-shadow: $h $v $b $s $c;
 }

mixinの使い方

div {
 @include box-shadow(8px, 8px);
 }

xPos（要素の座標）

mixinはコードをシンプルにします。
要素を移動させる座標（X軸）を設定します。

mixinの定義

@mixin xPos($x) {
 -webkit-transform:translateX($x);
 -moz-transform:translateX($x);
 -ms-transform:translateX($x);
 transform:translateX($x);
 }

mixinの使い方

div {
 @include xPos(50px);
 }

vertical-align（天地の中央に配置）

天地の中央に要素を配置するスニペットもmixinでは簡単です。

mixinの定義

@mixin vertical-align {
     position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
 }

mixinの使い方

div {
 @include vertical-align();
 }

flexbox（フレックスボックス）

ブラウザごとに記述が異なる時、Sassのmixinは非常に素晴らしい効果を発揮します。

mixinの定義

@mixin flexbox
 {
 display:-webkit-box; // old
 display:-moz-box; // old
 display:-ms-flexbox; // ie
 display:-webkit-flex; // new
 display:flex; // new
 }

mixinの使い方

div {
 @include flexbox();
 }

flex（モダンブラウザの旧仕様にも対応したflexの指定）

displayのプロパティをflexに設定する時のモダンブラウザの旧仕様にも対応した記述方法です。

mixinの定義

@mixin flex($values) {
     -webkit-box-flex: $values;
 -moz-box-flex:  $values;
 -ms-flex:  $values;
 -webkit-flex:  $values;
 flex:  $values;
 }

mixinの使い方

div {
 @include flex(1, 2);
 }

flex-order（表示の順番）

flexと同様に、旧仕様にも対応したflex-orderの設定。

mixinの定義

@mixin flex-order($order){
     -webkit-box-ordinal-group: $order; // old
 -moz-box-ordinal-group: $order; // old
 -ms-flex-order: $order; // ie
 -webkit-order: $order; // new
 order: $order; // new
 }

mixinの使い方

div {
 @include flex-order(3);
 }

flex-direction（表示の方向）

mixinでは、ifやelseなどの条件も使用できます。

mixinの定義

@mixin flex-direction($direction)
 {
 @if $direction == column
 {
 -webkit-flex-direction:vertical;
 -moz-flex-direction:vertical;
 -ms-flex-direction:column;
 -webkit-flex-direction:column;
 flex-direction:column;
 }
 @else
 {
 -webkit-flex-direction:horizontal;
 -moz-flex-direction:horizontal;
 -ms-flex-direction:row;
 -webkit-flex-direction:row;
 flex-direction:row;
 }
 }

mixinの使い方

div {
 @include flex-direction(column);
 }

gradient（グラデーション）

コードは可能な限りシンプルにしておくべきです。しかし必要がある時はコードが長くなってしまうことがあります。このmixinは3つの値を指定するだけで、すべてのブラウザで線形（水平・垂直）と円形の美しいグラデーションを作りだします。

mixinの定義

@mixin gradient($start-color, $end-color, $orientation)
 {
 background: $start-color;
 @if $orientation == vertical
 {
 // vertical
 background: -moz-linear-gradient(top,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(top,  $start-color 0%,$end-color 100%);
 background: linear-gradient(to bottom,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=0 );
 }
 @else if $orientation == horizontal
 {
 // horizontal
 background: -moz-linear-gradient(left,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(linear, left top, right top, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: -o-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: -ms-linear-gradient(left,  $start-color 0%,$end-color 100%);
 background: linear-gradient(to right,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 @else
 {
 // radial
 background: -moz-radial-gradient(center, ellipse cover,  $start-color 0%, $end-color 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,$start-color), color-stop(100%,$end-color));
 background: -webkit-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: -o-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: -ms-radial-gradient(center, ellipse cover,  $start-color 0%,$end-color 100%);
 background: radial-gradient(ellipse at center,  $start-color 0%,$end-color 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start-color', endColorstr='$end-color',GradientType=1 );
 }
 }

mixinの使い方

div {
 @include gradient(#ff00ff, #ff00cc, vertical);
 }

ghost-button（ゴーストボタン）

フラットスタイルによく使用されるゴーストボタンのmixinです。
ホバー時に繊細なアニメーションが適用されるこのボタンの作り方は、下記を参考に。

• How to make a ghost button in CSS3

mixinの定義

@mixin ghost-button($font, $font-size, $font-color, $border-size, $border-color, $padding, $transition-speed, $hover-color)
 {
 display:inline-block;
 text-decoration:none;
 text-transform:uppercase;
 font-family: $font;
 font-size: $font-size;
 color:$font-color;
 border:$border-size solid $border-color;
 padding:$padding;
 -webkit-transition: color $transition-speed, background $transition-speed;
 transition: color $transition-speed, background $transition-speed;
 &:hover
 {
 background:$border-color;
 color:$hover-color;
 }
 }

mixinの使い方

div {
 @include ghost-button(“Trebuchet”, 12px, #ffffff, 5px, #34dec6, 4px, 300ms, #000000 );
 }

break-point（ブレイクポイント）

Sass 3.2から使える「@content」でブロックコンテンツも扱え、キーワードによるブレイクポイントを設定するこができます。ブレイクポイントはデバイスに基づいて設定しないほうがいいでしょう。

mixinの定義

@mixin break-point($point)
 {
 @if $point == desktop{
 @media only screen and (max-width:50em)
 {
 @content;
 }
 }
 @else if $point == mobile{
 @media only screen and (max-width:20em)
 {
 @content;
 }
 }
 }

mixinの使い方

div {
 margin:5em;
 @include break-point(mobile)
 {
 margin:2em;
 }
 }