TOPWEB

【SCSS】mixinで効率化　CSSコーディング

WEB

CSSを書いているときに「このスタイル何度も出てくるな」とか、「あれ？このショートコードってどう書くんだっけ？」って事ありませんか？

僕は結構あるんですよね。そして、いつも面倒だなーと思っています（笑）

なので僕はmixinを使って簡単に、そして早く書くことを心がけています。

ということで、今日はmixinの使い方や、実際にどんな感じで使っているのかを紹介していきます！

ところでmixinって何？

mixinとはSCSS（SASS）の機能の一部です。
簡単に説明すると、CSSのスタイルセットを予め用意して何度も呼び出して使い回せるとっても便利な機能です。

SCSSについてこちらの記事もご覧ください。

gulpで時短　CSSを効率的に書く
3ステップ gulpの設定と使い方

mixinの使い方

たとえば…

@mixin mixin_name{
  font-weight:bold;
  font-size:20px;
  color:red;
}

こんなmixinがあったとします。

mixin_nameというmixinセットにいくつかプロパティがあります。（mixin名は何でも良いです）

複数箇所でこのスタイルを使いたいなーってとき、ありますよね。

そんなときは@includeで呼び出します。

h2{
  @include mixin_name;
}

これで@mixin mixin_nameで設定したプロパティ群が使用できます。
同様に、他のセレクタでもこのように使えます。

引数を設定してもっと便利に使う

同じようなスタイルでも一部変えたいんだよなーって事もありますよね？
上記の例で言えば、「フォントサイズのみ変えたい」というような場合。

そんなときは引数を設定します。

@mixin mixin_name($size:20px){
  font-weight:bold;
  font-size:$size;
  color:red;
}

$size:20pxの「:」以降は、引数の初期値です。上記の例だと、引数を指定しない場合は20pxが適用されます。

このmixinの使用は

h1{
  @include mixin_name(24px); /* 引数に24px入れた */
}

と、引数に変更したいフォントサイズを入れればOKです。

mixin使用例

僕が使っているmixinの使用例です。

Fontawesome

CSSの疑似要素でFontawesomeを使うときに使用しています。

mixin

@mixin fontawesome($uni,$pos,$weight:900,$color:null,$margin:null){
  &::#{$pos}{
    font-family: "Font Awesome 5 Free";
    content: unquote("\"") + unquote(str-insert($uni, "\\", 1)) + unquote("\"");
    // font-weight
    font-weight:$weight;
    // before/after,margin
    @if $pos == before{
      @if $margin != null{
        margin-right:$margin;
      }
    }
    @if $pos == after{
      @if $margin != null{
        margin-left:$margin;
      }
    }
    // color
    @if $color != null{
      color: $color; 
    }
    @content;
  }
}

使う

h1{
  @include fontawesome (f105, before, 900, $color:#333, $margin:5px);
}

引数説明

引数説明記述例
$uniFontawesome unicodef105など
$pos疑似要素の前後どちらに入れるかbefore,after
$weightアイコンのweight900,400
$colorアイコンカラー#000など
$marginアイコンのマージン20pxなど

$uniでFontawesomeのuniコードを指定。
$posで疑似要素の前後どちらにアイコンを入れる指定。
$weightでFontawesomeのアイコンがSolidかRegularのどちらか指定。
$marginでアイコンと要素のmarginを指定。

また、上記のようにmixinではif文for文なども使えます。切り分けなど、かなり自由に設定することが可能です。

background

backgroundのショートコードって面倒なんですよね。設定が多くて。

これもmixin化してしまいます。

mixin

@mixin background($path:null,$pos:center,$size:cover,$repeat:no-repeat) { 
  @if $path == null{
    background:$pos / $size $repeat;
  }@else{
    background:url("#{$path}") $pos / $size $repeat;
  }
}

使う

div{
  @include background($path:"img/sample.png",$pos:center,$size:cover,$repeat:no-repeat);
}

引数説明

引数説明記述例
$path画像のパス“img/sample.png”など
$pos画像の配置方法center,left top など
$size画像サイズcover,contain,px指定など
$repeat画像のリピートno-repeat,repeat

linear-gradient

CSSでグラデーションをデザインすることがあるんですが、これまた面倒なんです。

これもmixin化してしまいましょう！

mixin

@mixin gradient($startColor, $endColor, $angle: ttob) {
    @if $angle == ttob {
        background-color: linear-gradient(to bottom, $startColor 0%,  $endColor 100%);
    } @else if $angle == ltor {
        background-color: linear-gradient(to right, $startColor 0%,  $endColor 100%);
  }
}

使う

div{
  @include gradient(#fff, #000, $angle: ttob);
}

引数説明

引数説明記述例
$startColorグラデーション開始色カラーコード
$endColorグラデーション終了色カラーコード
$angleグラデーションの方向ttob（上から下）,ltor（左から右）

まとめ

以上、一部を紹介しましたが、実はmixinを作るのって結構手間なんです（汗）
しかし、それ以上の効率化が見込めると思っています。

僕は上記のmixin群を別ファイルにしてSCSSで読み込んで使っています。
つまり、いろんなプロジェクトで使い回せるんです。

最初だけ面倒かもしれませんが、その後はかなり楽にCSSを書くことができると思っています。

便利なmixin、使ってみてはいかがでしょうか。

はてブ シェア

最新記事