scss 固定PX値マージンによる泛用グリッド

Posted 2021-05-18

/*
#styleguide
.grid

固定px値マージンによる汎用グリッド
```
<ul class="grid grid-col-3 grid-margin-20">
  <li class="grid-item">
    insert something
  </li>
  <li class="grid-item">
    insert something
  </li>
  <li class="grid-item">
    insert something
  </li>
</ul>
```
*/

.grid {
    $this: &;

    @include cf();

    &-item {
        display: block;
        float: left;
    }

    @for $i from 1 to 12 {
        &-col-#{$i} {
            #{$this}-item {
                width: 100%/$i;
            }
        }
    }

    @mixin margin($px) {
        margin: 0 (-$px/2);

        #{$this}-item {
            padding: 0 ($px/2);
            margin-bottom: $px;
        }
    }

    @for $i from 1 to 100 {
        &-margin-#{$i}px {
            @include margin($i + 0px);
        }
    }
}