はなゐろぐ

主に技術関係の覚え書きです。

簡単なカラムmixin

2018年10月11日

サムネイルやカードを並べるのによく使うやつです。

@mixin col(
  $column-count,
  // カラム数
  $gutter: 10px,
  // 間の余白
  $inverse: false,
  // true->右から左へ、false->左から右へ
  $selector: '> *' // 子要素のセレクタ
) {
  @include clearfix;
  $direction: if($inverse, right, left);

  #{$selector} {
    // 余白を一旦リセット
    margin-left: 0;
    margin-top: 0;
    float: $direction;
    @if $gutter != 0 {
      $margins: $gutter * ($column-count - 1);

      width: calc((100% - #{$margins}) / #{$column-count});
      // 左右の余白
      + *:not(:nth-child(#{$column-count}n + 1)) {
        margin-#{$direction}: #{$gutter};
      }
      // 上下の余白
      &:not(:nth-child(-n + #{$column-count})) {
        margin-top: #{$gutter};
      }
    } @else {
      width: calc(100% / #{$column-count});
    }
  }
}