[SASS] 반복문을 사용한 padding , margin 세팅

테일윈드를 사용하면 절대로 쓸 일이 없는 구문이긴 하지만 테일윈드나 다른 프레임워크를 설정하기 어려워서 하나 만들어 보았습니다.

 

Padding

//숫자를 200 -> 1000 하면 1000까지 가능
@for $i from 0 through 200 {
    .pd-#{$i} {
        padding: #{$i}px !important;
    }

    .pt-#{$i} {
        padding-top: #{$i}px !important;
    }

    .pr-#{$i} {
        padding-right: #{$i}px !important;
    }

    .pb-#{$i} {
        padding-bottom: #{$i}px !important;
    }

    .pl-#{$i} {
        padding-left: #{$i}px !important;
    }
}

 

Margin

//숫자를 200 -> 1000 하면 1000까지 가능 (조절가능)
@for $i from 0 through 200 {
    .md-#{$i} {
        margin: #{$i}px !important;
    }

    .mt-#{$i} {
        margin-top: #{$i}px !important;
    }

    .mr-#{$i} {
        margin-right: #{$i}px !important;
    }

    .mb-#{$i} {
        margin-bottom: #{$i}px !important;
    }

    .ml-#{$i} {
        margin-left: #{$i}px !important;
    }
}