プログラミングを高速に！sccsで使える便利なmixin♪

URUOSHI管理人の、SUMMY（@URUOSHI）です。

悩む人

cssのコーティングをmixinというのを使えば早く書けると聞いたんだけど、実際どうやって使えばいいの？具体的な使い方を教えて欲しい。

この悩みを解決します。

scssは使えるよ！という方もさすがに多くなって来たのではないでしょうか？
サクサク入れ子形式で書けますから便利ですよね♪

さらに高速にマークアップする方法に、「@mixin」がありCSS設計にも役立つ強力な機能です！
今回はその書き方や、サンプルをご紹介していきます！

「慣れたらもう@mininなしではいられない！」

その位便利で優秀なテクニックなので、余す事なく存分にお伝えしていきます♪

本記事を読み終えたあと、あなたのプログラミンスキルのアップは間違いなく飛躍すると思いますよ！

この記事で分かること

scssの基本概念
@mixinの役割
おすすめの@mixin

htmlやcssのマークアップ技術は、ノンデザイナーでも出来なきゃいけない！
という位初段階のプログラミングです。

あなたのマークアップライフを楽しいものにしていきましょう♪

僕

それでは最後までお付き合いください♪

そもそもSCSSとは？sassとはどう違うの？

プログラミング　scss

sccsにはもう一つ同じような名前の「Sass」というものがありますが、

それぞれでコーディングのルールが違います。
現在はscssの方が利用率も多く、記述もわかりやすいのでscssが主流と言っても良いでしょう。

ScssはSass（Syntactically Awesome Style Sheets）というRuby製のCSSメタ言語です。何それ意味不明・・・ですよね。
簡単に言うと省略して書けて、メンテもしやすく、変数とか関数も使えるCSSと言う感じです。

ScssとSassの違いについてですが、最初にSassというものができました。
作った理由としてはCSSの新しい仕様を待つよりも、自分たちで使いやすいCSSを作って、既存のCSSに合うように変換しちゃえば楽じゃない？という考え方からです。

Sassの記述方法

 css
div
  background-color: lightgray
  margin: 0 auto
  p
    padding: 0 0 0 10px
    span
      font-size: 2em

こんな感じになります。Sassだと{}と;が要らないです。(場合によっては;も使う時があります。）

これだけ見るとSassって楽でSassで良いんじゃない？となりそうですがその後にScssというのが登場します。

Scssの記述方法

 css
div{
  background-color: lightgray;
  margin: 0 auto;
  p{
    padding:  0 0 0 10px;
    span{
      font-size: 2em;
    }
  }
}

Scssになると{}が書きます。

Scssの方が情報量が多く後から見ると分かりやすいのとScssの方が都合が良くて、現在ではScssが一般的です。

@mixinとは？

プログラミング　scss

mixinとは別で定義したスタイルを@includeでなんども呼び出せるというものです。関数的な使い方ができるので便利です。

例えばよく使うスタイルを@mixinで定義しておくと、どこからでも@includeで呼び出せるのでコードがすっきりしてメンテナンス性も高まります。

例を挙げて見ていくと

・入力 (SCSS)

 css
@mixin round-box {
  border: solid 1px gray;
  border-radius: 5px;
  padding: 10px;
}
pre {
  @include round-box;
  line-height: 1.3;
}
.ad-widget {
  @include round-box;
  background: #ccc;
}

・出力 (CSS)

 css
pre {
  border: solid 1px gray;
  border-radius: 5px;
  padding: 10px;
  line-height: 1.3;
}
.ad-widget {
  border: solid 1px gray;
  border-radius: 5px;
  padding: 10px;
  background: #ccc;
}

Mixin で定義したスタイルセットが、@include した位置に展開されていることが分かりますね！

@mixin便利サンプル

プログラミング　scss

それでは@mixinの便利なサンプルをご紹介していきます♪

背景

何かと登場回数の多いbackgroundプロパティですが、それをmixinにすることで記述量が圧倒的に少なくなります。

最初に$PATH_IMGに画像のファイルまでのパスを設定しておくことで、他の箇所でもパスを省略することが出来たり、打ち間違いを防ぐことが出来ます。

呼び出し時には、引数に画像のファイル名を与えてあげます。

 css
$PATH_IMG: "/assets/img/";
@mixin background-image($fileName) {

background-image: url($PATH_IMG + $fileName);

background-repeat: no-repeat;

background-position: 50% 50%;

@content; 

}

また、@contentを使うことで、呼び出し時に他のbackgroundプロパティを追加することも出来ます。

親要素に対して中央寄せ

親要素に対して子要素を中央寄せにするmixinです。

引数に x, y, xy いずれかを与えることで、どのように中央寄せするかを指定することが出来ます。中央寄せの種類は以下3つです。

x：横方向中央寄せ
y：縦方向中央寄せ
xy：縦横方向中央寄せ

 css
@mixin center($direction) { position: absolute;

@if $direction==xy {

top: 50%; left: 50%;

transform: translate(-50%, -50%);

}

@else if $direction==x {

left: 50%;

transform: translateX(-50%); 

}

@else if $direction==y {

top: 50%;

transform: translateY(-50%);

} 

}

使用時には親要素にposition: rerativeをかけるのを忘れないようにしましょう。

clear-fix

floatを解除する時は、親要素に対してclear-fixのクラスを付与するのが一般的だと思いますが、それをmixinで行うことも出来ます。

mixinで解除するメリットとしては、マルチクラスにならないのでhtmlが見やすくなったり、sassだけでスタイルを管理出来る点です。

 css
@mixin cf {

&:after {

content: "";

display: block;

clear: both;

}

}

また、@contentを使うことで、呼び出し時に他のbackgroundプロパティを追加することも出来ます。

自動連番

自動で連番を付与できるcounter-incrementのmixinです。

第一引数には、カウンターの名前を与えてあげます。

第二引数と第三引数には、連番の前後に表示させたい値を与えてあげます。デフォルトでは空の値を与えているので、第一引数だけを与えて、第二、第三引数は省略することも可能です。

 css
@mixin counter($numName, $beforeText, $afterText) {

content: "#{$beforeText}" counter(num_ + $numName) "#{$afterText}";

counter-increment: num_ + $numName; 

}

使用時には連続する要素の親にcounter-resetをかけるのを忘れないようにしましょう。

グラデーション

2色で均等の割合で色が変化するシンプルなグラデーションのmixinです。

第3引数でグラデーションの方向を指定しており、デフォルトは縦方向です。

 css
@mixin gradient($startColor, $endColor, $orientation: ttob) {

background: $startColor;

@if $orientation==ttob {

background: -webkit-linear-gradient(top, #{$startColor} 0%, #{$endColor} 100%);

background: linear-gradient(to bottom, #{$startColor} 0%, #{$endColor} 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr=' #{$endColor}', GradientType=0);

}

@else if $orientation==ltor {

background: -webkit-linear-gradient(right, #{$startColor} 0%, #{$endColor} 100%);

background: linear-gradient(to right, #{$startColor} 0%, #{$endColor} 100%);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr=' #{$endColor}', GradientType=1);

}

}

疑似要素でアイコン

先程紹介したbackground-imageのmixinを少しカスタマイズしたものです。主に疑似要素で画像を使ったアイコンを作る際に使用する想定です。

こちらも画像のパスの一部に変数を使用することで保守制が向上します。

 css
@mixin icon($fileName, $width, $height) {

background: url($path_img + $fileName) no-repeat 50% 50%;

background-size: $width $height;

width: $width;

height: $height;

}

Media Queries

meadia queryも普通に記述するとなかなか手間なのでmixinにすることで格段に記述が楽になります。

引数にscreenのwidthを与えて使用します。引数に与えるwidthを変数にすることで、より運用しやすいコードになります。

 css
$BREACKPOINT_PC: 1080px;

$BREACKPOINT_TB: 920px;

$BREACKPOINT_SP: 640px;

@mixin max-screen($breakPoint) {

@media screen and (max-width: $breakPoint) {

@content;

}

}
@mixin min-screen($breakPoint) {

@media screen and (min-width: $breakPoint) {

@content;

}

}
@mixin screen($breakPoint_min, $breakPoint_max) {

@media screen and (min-width: $breakPoint_min) and (max-width: $breakPoint_max) {

@content;

}

}

hover

aタグなどのリンク系にhover時の動きを付ける際、transitionを何度も書くのが手間なのでmixinにしてみました。

このmixinは、ページ全体でhover時の動きがある程度共通の場合にとても役に立ちます。さらに、一部のリンクには違う動きをさせたい場合にも対応することが出来ます。

以下の場合、aタグに対して@include hoverで呼び出してあげれば、hover時に透明度が下がるようになります。

 css
@mixin hover($flag: true) {

@include min-screen(900px) {

transition: .2s;

&:hover {

transition: .3s;

@if $flag==true {

opacity: .5;

}

@content

}

}

}

@mixin：まとめ

本記事では、cssをより便利にする@mixinについてご紹介しました。

CSSはWebデザイナーやコーダーといったノンプログラマーでも、触る機会は多いですよね。
色んなパターンのCSSが出力できるため、出力されたCSS自体を意識することは少ないかもしれません。
しかし無駄なスタイルは効率性低下に繋がるので、ノンプログラマーさんでもなるべく気をつけたいところです。

それでは最後までお読みいただきありがとうございました！

本記事は以上です。