サムネイルやカードを並べるのによく使うやつです。
@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});
}
}
}