_spacer.styl

gistfile1.styl

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// _spacer.scssより
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

/*
 Spacer

  margin, paddingの汎用クラスをカカッとつくる。
  空白の因数x倍率


  ### Syntax
  ```
  `.[nth($spacer-prefix,1)][$spacer-size]--[nth($spacer-position-name,1)`
  --> `.m10--t {margin-top:10px !important}`
  ```

  ### 接頭語
  * `m` -- margin
  * `p` -- padding


  ### Size (倍率)
  0, 1, 2, 3, 4


  ### Modifier
  * `_t` -- top
  * `_r` -- right
  * `_b` -- bottom
  * `_l` -- left
  * `_v` -- vertical(top, bottom)
  * `_h` -- horizontal(left, right)

  Markup:
  <div class="m1" style="background:gray">Btn</div>
  <div class="m2_l" style="background:gray">Btn</div>
  <div class="m3_r" style="background:gray">Btn</div>
  <div class="p1 m1" style="background:gray">Btn</div>
  <div class="p2_t m1" style="background:gray">Btn</div>
  <div class="p3_b m2" style="background:gray">Btn</div>

Styleguide 9
*/

$default-spacer-base = $default-space-grid
$default-spacer-prefix = ''
$default-spacer-type = (m margin) (p padding)
$default-spacer-size = 1 2 3 4 5 0
$default-spacer-position-name = (t top) (r right) (b bottom) (l left) (v top bottom) (h left right)

for $type in $default-spacer-type
  for $size in $default-spacer-size
    .{$default-spacer-prefix}{$type[0]}{$size} //m0
      if $size == 0
        {$type[1]}:s('%s !important', ($default-spacer-base * $size))
      else
        {$type[1]}:s('%s !important', ($default-spacer-base * $size))
    for $name in $default-spacer-position-name
      .{$default-spacer-prefix}{$type[0]}{$size}_{$name[0]}
        for $i in (1...length($name))
          if $size == 0
            {$type[1]}-{$name[$i]}:s('%s !important', ($default-spacer-base * $size))
          else
            {$type[1]}-{$name[$i]}:s('%s !important', ($default-spacer-base * $size))