私がよく利用している、便利なSCSS @mixin 3選

Maromaroでよく利用している、便利なSCSS @mixinをご紹介します！
たくさん紹介してもなので、絞り込んだ３選です。
SCSS初心者、あまりmixinを利用していない方は是非ご覧ください！

下記はすべて、@mixinの部分をscssファイルの上部などにコピーして、お使いください。
@include “mixinの名前()”で利用できますよ！

定番！　clearfix

floatしたらclearfixですよね！
HTMLタグにclearfixなんてクラスをつけてたら格好悪いですよ！

@mixin clearfix {
  &:after {
    content: ".";
    display: block; 
    clear: both;
    height: 0;
    visibility: hidden;
  } 
}

使い方

.hoge_ul{
  @include clearfix();  //この部分
  li{
   float: left;
  }
}

横方向に要素が並ぶ、１行レイアウトが簡単にできるtable_layout

例えば、グローバルナビゲーションや、２カラム、３カラムなどのレイアウトってよくありますよね。
しかも回り込みしたくない！　そんな場合に便利です。

flexでも良いのですが、どうもIEで悪さしたりするので、実績のあるtableレイアウトを採用しています。

//テーブルレイアウト
//@include table_layout(10);で使う
//margin はレイアウト同士の空き
@mixin table_layout($margin: 0, $width: 100%) {
  display: table;
  margin: 0 auto;
  width: #{$width};
  border-collapse: collapse;
  > *{
    display: table-cell;
    vertical-align: top;
    padding: 0 #{$margin / 2}px;
    &:first-child{
      padding-left: 0;
    }
    &:last-child{
      padding-right: 0;
    }
  }
}

使い方

@include table_layoutした要素をtableとし、直近の子要素をtable-cellにします。

<nav class="nav">
  <p><a href="#">列１</a></p>
  <p><a href="#">列2</a></p>
  <p><a href="#">列3</a></p>
</nav>

.nav{
  //この場合、要素の空きが10pxで、テーブル自体の幅が100%になります。
  @include table_layout(10, 100%);
　> *{
    width: 33.333%; //このように幅をいれなければ、成り行きになります。
  }
}

※マージンとしていますが、実際はpaddingです。

floatを利用した、x列レイアウト

高さを揃える必要がない場合に便利な、floatを利用したmixinです。
高さを揃える場合にも、別途heightLineなどを組み合わせると良いです。

//@include float_layout(マージンpx,列数,横幅,均等幅);で使う
@mixin float_layout($margin: 0, $col: 2, $width: 100,$auto_adjust: true) {
  @include clearfix();
  margin: 0 -#{$margin / 2}px;
  width: #{$width};
  > *{
    float: left;
    vertical-align: top;
    margin: 0 #{$margin / 2}px #{$margin}px;
    @if($auto_adjust){
      width: calc(#{ 100 / $col * 1% } - #{$margin}px);
    }
    
    &:nth-child(#{$col}n){
      margin-right: 0;
    }
    &:nth-child(#{$col}n+1){
      clear: left;
    }
  }
}

使い方

<ul class="list01">
  <li><a href="#">テスト１</a></li>
  <li><a href="#">テスト2</a></li>
  <li><a href="#">テスト3</a></li>
  <li><a href="#">テスト4</a></li>
  <li><a href="#">テスト5</a></li>
  <li><a href="#">テスト6</a></li>
<ul>

.list01{
  //この場合、要素間が10pxで、３列表示、幅が100%になります。
  //最後のtrueは要素の左右の空きを自動で相殺してピッタリフィットしてくれます。
  @include float_layout(10, 3, 100%, true);
}

以上です。

よく使う処理ってCSSでもあると思います。
そういうものを@mixinしておくと便利ですよ！