SASS(SCSS)를 이용하여 margin / padding 을 조절할 수 있는 class 자동생성하기

 

GUI 작업을 진행하면서 간격에 대한 정의는 CSS에 정의하는 게 가장 좋다고 생각합니다. 하지만 유지보수와 CSS로 대응이 어려울 때, 개발 화면에서 직접 수정이 필요할 때 등 다양한 상황이 발생할 수 있는데 이럴 때 유용하게 사용할 수 있는 게 클래스로 간격을 만들어서 사용하는 것입니다. 

 

• as-is

<div style="margin-top:10px; padding-top:10px;"/>

• to-be

<div class="mt10 pt10"/>

코드도 간결해졌고 클래스명도 직관적이기 때문에 CSS를 잘 모르는 개발자분들과 협업을 진행할때도 유용하게 사용할 수 있습니다.

 

 

/****************************************
* Padding, Margin 정의
* p는 padding, m은 margin을 나타냄.
* t는 상단 b는 하단 l은 왼쪽 r은 오른쪽의 방향
* ex :
* pt10 => padding-top:10px
* mb22 => margin-bottom: 22px
*****************************************/

/**
  px값 List를 만들어주는 함수입니다.
*/
@function size($start, $end) {
  $size : ();
  @for $i from $start through $end {
    $value : $i + 0;
      $size : append($size, $value);
  }
  @return $size;
}

/**
값이 0일때는 0으로, 그 외에는 'px'을 붙여줍니다.
ex) 0 => 0, 10 => 10px
*/
@function getPx($value) {
  @if $value == 0 {
    @return $value !important;
  } @else {
    @return $value + 0px !important;
  }
}

/**
px 값입니다.
0 ~ 100px 까지 조정하게 만들었습니다.
*/
$size : size(0, 100);

/**
margin과 padding의 각 위치를 지정해주는 map 입니다.
key는 class이름 생성시 쓰이며 value는 상세 속성 정의시 쓰입니다.
*/
$position : ('l':'left', 'r':'right', 't':'top', 'b':'bottom');

/**
margin과 padding 생성을 위한 map입니다.
key는 class이름 생성시 쓰이며 value는 상세 속성 정의시 쓰입니다.
*/
$nameMap : ('m':'margin', 'p':'padding');
/**
실제 css class를 만들어주는 mixin입니다.
nameMap, position, size를 혼합하여 아래와 같은 형식으로 만들어줍니다.

ex>
m0 : { margin : 0; }
mt1 : { margin-top : 1px; }
pb22 : {padding-bottom:22px}
*/
@mixin generate($nameMap : (), $position : (), $size : ()) {
  @each $preKey, $preValue in $nameMap {
    @each $px in $size {
      .#{$preKey}#{$px} {
        #{$preValue} : getPx($px);
       }
       @each $sufKey, $sufValue in $position {
         .#{$preKey}#{$sufKey}#{$px} {
            #{$preValue}-#{$sufValue} : getPx($px);
          }
       }
    }
  }
}


@include generate($nameMap, $position, $size);

 

모두 즐거운 코딩 하세요~

 

참조 : https://jistol.github.io/frontend/2017/11/09/sass-margin-padding/