(SCSS)extend, 그리고 extend의 한계

특정 선택자에 다른 선택자의 css를 그대로 가져와야 하는 경우가 종종 있다.
이럴 때 extend 기능을 사용할 수 있다.

/* 
@extend 클래스명;
*/

.box1 {
    width: 100px;
    height: 100px;
    padding: 10px;
    background: red;
}

.box2 {
    @extend .box1;
    background: blue;
}

css에서는 아래처럼 나타난다.

.box1, .box2 {
  width: 100px;
  height: 100px;
  padding: 10px;
  background: red;
}

.box2 {
  background: blue;
}

클래스 명을 통해 가져오는 것이 아닌, 공통된 속성을 따로 선언하여 가져와 사용할 수도 있다.
공통된 속성을 따로 선언한 것을 %placeholder라고 한다.
그리고 %placeholder는 사용하지 않는 한 css로 출력되지 않는다.

/*
@extend %placeholder명;
*/

%red-box {
    background: red;
    color: #fff;
    font-size: 20px;
}

.first-box {
    @extend %red-box;
    width: 100px;
    height: 100px;
}

.second-box {
    @extend %red-box;
    width: 200px;
    height: 200px;
}

css에서는 아래처럼 나타난다.

.first-box, .second-box {
  background: red;
  color: #fff;
  font-size: 20px;
}

.first-box {
  width: 100px;
  height: 100px;
}

.second-box {
  width: 200px;
  height: 200px;
}

extend의 한계

extend는 다양하게 적용할 수 있지만 한계가 있다.
자식 선택자와 인접 선택자는 extend 할 수 없다.

또한 @media 내에서 영역 밖에 있는 클래스나 %placeholder를 extend 할 수 없다.

그리고 컴파일 된 결과를 보면 extend를 사용하면 ,로 구분되는 다중 선택자가 만들어진다.
내 현재 선택자가 어디에 첨부될 것인지, 원치 않는 부작용이 초래되지는 않는지 잘 고려해야 한다.

연관성 없는 값들이 한 군데에 묶이게 되고, 소스 순서가 얽혀서 혼란을 줄 수도 있다.
따라서 extend는 특정 상황이 아니라면 되도록 권장되지 않으며, mixin을 사용하는 것이 좋다.