[scss] margin, padding 도우미 > IT 기술백서

[code]

// Spacing

@for $i from 0 to 16 {

  .pa-#{$i} {

    padding: #{$i * 4}px;

  }

  .pt-#{$i} {

    padding-top: #{$i * 4}px;

  }

  .pr-#{$i} {

    padding-right: #{$i * 4}px;

  }

  .pb-#{$i} {

    padding-bottom: #{$i * 4}px;

  }

  .pl-#{$i} {

    padding-left: #{$i * 4}px;

  }

  .ma-#{$i} {

    margin: #{$i * 4}px;

  }

  .mt-#{$i} {

    margin-top: #{$i * 4}px;

  }

  .mr-#{$i} {

    margin-right: #{$i * 4}px;

  }

  .mb-#{$i} {

    margin-bottom: #{$i * 4}px;

  }

  .ml-#{$i} {

    margin-left: #{$i * 4}px;

  }

}

[/code]

- 설명 -

X 의 범위: 1~16

ma-X : margin: Xpx;

mt-X: margin-top: Xpx;

mr-X: margin-right: Xpx;

mb-X: margin-bottom: Xpx;

ml-X: margin-left: Xpx;

pa-X : padding: Xpx;

pt-X: padding-top: Xpx;

pr-X: padding-right: Xpx;

pb-X: padding-bottom: Xpx;

pl-X: padding-left: Xpx;

사용예)

[code]

<div class="mb-5">

</div>

[/code]