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

IT 기술백서

Web/APP/IT 전반에 대한 기술 연구소

css | [scss] margin, padding 도우미

본문

[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]

댓글 0개

등록된 댓글이 없습니다.

Menu