[SCSS] 믹스인으로 마진 패딩 클래스 만들기 mixin margin and padding classes

믹스인으로 마진 패딩 클래시스를 만들어두면 유용하게 쓸수있다.

@mixin

$max: 180; // 생성할 최대값 지정

@mixin margin-classes {
  @for $i from 0 through $max { // 0부터 i까지 증가. max인 180까지 생성
    $margin: $i * 1px !important;
    .ma#{$i} {
      margin: $margin;
    }
    .ml#{$i} {
      margin-left: $margin;
    }
    .mr#{$i} {
      margin-right: $margin;
    }
    .mt#{$i} {
      margin-top: $margin;
    }
    .mb#{$i} {
      margin-bottom: $margin;
    }
    .mx#{$i} {
      margin-left: $margin;
      margin-right: $margin;
    }
    .my#{$i} {
      margin-top: $margin;
      margin-bottom: $margin;
    }
  }
}

@include margin-classes;


@mixin padding-classes {
  @for $i from 0 through $max {
    $padding: $i * 1px !important;
    .pa#{$i} {
      padding: $padding;
    }
    .pl#{$i} {
      padding-left: $padding;
    }
    .pr#{$i} {
      padding-right: $padding;
    }
    .pt#{$i} {
      padding-top: $padding;
    }
    .pb#{$i} {
      padding-bottom: $padding;
    }
    .px#{$i} {
      padding-left: $padding;
      padding-right: $padding;
    }
    .py#{$i} {
      padding-top: $padding;
      padding-bottom: $padding;
    }
  }
}
@include padding-classes;

 

사용하기

 <div class="py20 px14"></div>

클래스 명칭은 자유롭게 설정하면 된다.