공통 속성에 다른 값 적용_SCSS MIXIN

리팩토링해야 될 사항

관련 이미지

 

다음과 같이 동일한 Feed Style 속성 값을 지니고 있지만 안에 들어가는 이미지의 Layout만이 다른 두 UI 요소가 있다.

전자의 Feed에는 단일 이미지만이 들어가는 반면에 후자의 Feed에는 Grid Layout 형식으로 총 4장의 이미지가 들어간다.

 

들어가는 이미지의 갯수가 다르기 때문에 이미지의 크기와 더불어 세부 속성 값을 달리 해주어야 되기 때문에 처음에는 아래와 같이

각 Feed 속성 값에 Style 값을 주었다.

.moviePosterQuarter { // Grid 형식의 Feed
    width: 95%;
    height: 95%;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
 }
 
 ( ... )
 
 .moviePoster { // 단일 형식의 Feed
    width: 100%;
    height: 84%;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
 }

이렇게 Style 값을 설정해 준 뒤에 생각해보니, 두 Feed 내 이미지 속성 값에서 달라지는 건 width 값과 height 값 뿐이라는걸 깨달았다.

지금은  그 대상이 두 개의 요소가 속성 뿐이지만 프로젝트 내에서 이런 경우가 많아지면 코드가 비효율적이게 될 거라는 생각에 리팩토링을 해보기로 했다.

 

문제는 이 두 값만을 동적으로 변하게 해주고 다른 속성은 공통 분모로 어떻게 묶어줄 수 있는가? 였는데 이에 대한 해답은 그리 어렵지 않았다.

 

SCSS MIXIN

https://sass-lang.com/documentation/at-rules/mixin

Sass: @mixin and @include

They can be used to encapsulate styles that can be dropped into a single style rule; they can contain style rules of their own that can be nested in other rules or included at the top level of the stylesheet; or they can just serve to modify variables.

 

SCSS MIXIN 속성을 사용하여 코드 내에서 공통으로 쓰이는 Style 속성을 정의하고 Include 구문을 사용하여 해당 값을 불러와서 쓰기로 하였다.

 

동적으로 변하는 width값과 height값을 인자로 설정해준 뒤에 

@mixin moviePosterMix($width: 0, $height: 0) {
  width: $width;
  height: $height;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

해당 함수를 Include 구문을 통해 인자값을 넣어 호출하도록 코드를 바꾸었더니 좀 더 명확해지고 간결해 졌다.

.moviePosterQuarter {
      @include moviePosterMix(95%, 95%);
}
    
	(...)
    
.moviePoster {
      @include moviePosterMix(100%, 84%);
}