コフス技術ブログ

ホームに戻る
Powered by
ホーム
SASS

【SCSS】Web制作時に物凄く便利な＠mixinベスト5

,
この記事はにメンテナンスが行われています。

Web制作時にSCSSにてこれが無いと生きていけないと個人的に思っている＠mixinベスト5をご紹介します。

いづれも実際に様々な制作案件で使用し、生き残った精鋭達です。実際には手元の自作テンプレートには30以上の@mixinが存在し、どれも無くてはならないものですが、その中でも5つ選ぶとすると...でチョイスしてみました。

もし好評であれば全ての@mixinをご紹介したいと思います。

共通で用いる@mixin

まず最初にBEST5とは別で各@mixinで共通で呼ぶ事が多い@mixinを記載しておきます。

// 09__疑似要素初期化
// ----------------------------------------------------------
@mixin icon-ini {
    content: '';
    display: inline-block;
}

BEST5：ブラウザハック系

まずはBEST5。
あまり多用したくはないブラウザハック系の@mixinも状況によっては無くてはならない存在です。特に納期に追われていてブラウザハックを用いない方法に切り替えられない場合は使うこともありますね。

IE系は特に私もよく利用します。ラインハイトのバグだったりSVGのバグ系はどうしようもない問題だったりするので、逆にブラウザハック用いるのが正だったりするかも！？

とはいえやはり多用は禁物。状況に応じて使っていきたい@mixinです。

※ 予め$breakPoint変数でブレイクポイントの指定が必要です。

// 13__ie11only
// ----------------------------------------------------------
@mixin ie11only {
    @media all and (-ms-high-contrast: none), print {
        @content;
    }
}

@mixin ie11only_sm {
    @media screen and (max-width: $breakPoint - 1) and (-ms-high-contrast: none) {
        @content;
    }
}

@mixin ie11only_lg {
    @media screen and (min-width: $breakPoint) and (-ms-high-contrast: none) {
        @content;
    }
}

// 14__edgeonly
// ----------------------------------------------------------
@mixin edgeonly {
    @supports (-ms-ime-align: auto) {
        @content;
    }
}

// 15__ffonly
// ----------------------------------------------------------
@mixin ffonly {
    @-moz-document url-prefix() {
        @content;
    }
}

// 16__safarionly
// ----------------------------------------------------------
@mixin safarionly($className) {
    _::-webkit-full-page-media,
    _:future,
    :root $className {
        @content;
    }
}

BEST4：くの字矢印

お次は矢印を作る時に「くの字」であればこれだけで作ることが出来る便利@mixin。

使い方は非常に簡単で、include arrow(10, 2, #000, right)（※ 左から大きさ、太さ、色、方向）とすると右くの字矢印が出来ます。便利ですよね！

// 07__くの字矢印
// ----------------------------------------------------------
@mixin arrow($width, $bold, $color, $deg) {
    @include icon-ini;

    border-color: $color;
    border-style: solid;
    border-width: 0 #{$bold}px #{$bold}px 0;
    height: #{$width}px;
    vertical-align: middle;
    width: #{$width}px;
    //角度
    @if ($deg == 'left') {
        transform: rotate(135deg);
    }

 @else if ($deg == 'top') {
        transform: rotate(225deg);
    }

 @else if ($deg == 'right') {
        transform: rotate(-45deg);
    }

 @else if ($deg == 'bottom') {
        transform: rotate(45deg);
    }

    @include ie11only() {
        margin-bottom: 1px !important;
    }
}

BEST3：フォントサイズ周り一括指定

文字サイズとラインハイトと文字の太さを一括で指定出来る@mixinです。これもよく利用します。
デザインデータがphotoshopの場合、文字パネルの「フォントサイズ」と「行間」の数値をそのまま入力するとデザインを再現することが出来ます。

使い方はinclude fz(12, 26, 700)（※ 左からフォントサイズ、行間、太さ）です。

// 03__フォントサイズとラインハイトまとめて指定
// ----------------------------------------------------------
@mixin fz($size, $height: false, $weight: false) {
    font-size: #{$size}px;

    @if $weight {
        font-weight: $weight;
    }

    @if $height {
        line-height: $height / $size;
    }
}

@mixin fzs($size, $height: false, $weight: false) {
    $size: $size/2;
    $height: $height/2;

    font-size: #{$size}px;

    @if $weight {
        font-weight: $weight;
    }

    @if $height {
        line-height: $height / $size;
    }
}

BEST2：順番関連指定

これもよく使っている順番関連の@mixinです。:nth-of-typeとかを簡略化しただけですが非常に分かりやすくて愛用しています。

使い方はinclude first{ // ここに記述 }といった感じです。全部で4種類あり、

  • include first()：一番最初
  • include notfirst()：一番最初以外
  • include last()：一番最後
  • include notlast()：一番最後以外

となっています。直接nthを記述してしまってもいいのですが、やはり見通しのいい記述はSCSSの破綻防止にも繋がりますし、こうやって@mixin管理してもいいのかなと思います。

// 17__first, notfirst
// ----------------------------------------------------------
@mixin first {
    &:first-of-type {
        @content;
    }
}

@mixin notfirst {
    &:not(:first-of-type) {
        @content;
    }
}

// 18__last, notlast
// ----------------------------------------------------------
@mixin last {
    &:last-of-type {
        @content;
    }
}

@mixin notlast {
    &:not(:last-of-type) {
        @content;
    }
}

ちなみにnth-of-typeですので異なるタグだと効きません。その場合はnth-child使うなりで対応する必要があります。（別途引数追加して@ifでnth-child切り替え出来るようにしてもいいかもですね。）

BEST1：media query

少し長いですが、BEST1はmedia query関連です。予め$breakPointを変数として用意しておくだけで様々なmedia queryを利用することが出来ます。

主に私が利用する@mixinはinclude media(lg){}とinclude media(sm){}です。昨今のWeb制作と言えばレスポンシブが一般的なので非常に多用します。

直接media queryを記述していると後から変更が大変なので@mixinを用いている方も多いでしょう。そういう意味ではあまり珍しくもないのですが（汗）やはり1番無くてはならない@mixinですね！

// 06__media query
// ----------------------------------------------------------
@mixin media($size, $px: false) {
    @if ($size == 'sm') {
        @media screen and (max-width: $breakPoint - 1) {
            @content;
        }
    }

 @else if ($size == 'lg') {
        @media screen and (min-width: $breakPoint), print {
            @content;
        }
    }

 @else if ($size == 'HR') {
        @media screen and (min-width: $breakPointHR) {
            @content;
        }
    }

 @else if ($size == 'retina') {
        @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
            @content;
        }
    }

    @if ($px) {
        @if ($size == 'max-width') {
            @media screen and (max-width: $px) {
                @content;
            }
        }

 @else if ($size == 'min-width') {
            @media screen and (min-width: $px) {
                @content;
            }
        }

 @else if ($size == 'max-height') {
            @media screen and (max-height: $px) {
                @content;
            }
        }

 @else if ($size == 'min-height') {
            @media screen and (min-height: $px) {
                @content;
            }
        }
    }
}

以上私がWeb制作時に無くてはならない@mixinベスト5でした。

ホームへ戻る