市松模様生成mixin

市松模様なデザインが来る事が多くなってきたので、簡単に実現する為の mixin を書いてみました。

nth-child 必須です。

mixin

@mixin pattern-check($color1:'#fff', $color2:'#000', $target:'.hoge', $col:4) {
    #{$target} {
        background-color:#{$color1};
    }

    @if $col % 2 == 0 {
        @for $i from 0 through floor(($col - 1) / 2) {
            &:nth-child(#{$col * 2}n + #{($i * 2) + 1}) ,
            &:nth-child(#{$col * 2}n + #{($i * 2) + $col + 2}) {
                #{$target} {
                    background-color:#{$color2};
                }
            }
        }
    } @else {
        @for $i from 0 through floor(($col - 1) / 2) {
            @for $j from 0 through floor($col / 2) {
                &:nth-child(#{$col * 2}n + #{($col + 1) * $i + ($j * 2) + 1}) {
                    #{$target} {
                        background-color:#{$color2};
                    }
                }
            }
        }
    }
}

e.g.

ul.list > li.list-item * 5

.list {
  @include pattern-check('red','blue','.list-item',5);
  display: table;
}

.list-item {
  display: table-cell;
}

第1引数が一番最初の色。
第2引数がその次に来る色。
第3引数は色を適応するターゲット指定。
第4引数は一行に何列あるのかの指定。

という感じです。