확장 및 자리 표시자 선택자

@extend를 사용하면 한 선택자가 다른 선택자의 모든 스타일을 상속할 수 있습니다. 코드를 중복하는 대신 확장을 통해 컴파일된 CSS에 공유 규칙 집합을 만듭니다.

자리 표시자 선택자(%를 접두사로 사용)는 자체적으로는 컴파일되지 않고 확장될 때만 사용되는 스타일 블록을 정의합니다. 무언가가 확장하지 않는 한 CSS를 생성하지 않습니다.

실제 클래스를 확장하면 해당 클래스의 전체 선택자 문맥이 컴파일된 결과에 추가됩니다. 자리 표시자는 확장하는 선택자에 대해서만 선택자를 그룹으로 출력하므로 더 깔끔합니다.

여러 선택자가 같은 자리 표시자를 확장하면 사스는 이들을 쉼표로 구분된 하나의 규칙으로 그룹화합니다:

@extend에는 중요한 주의점이 있습니다:

• 미디어 쿼리 내부에서는 사용할 수 없음
• @extend가 연쇄되면 예상하지 못한 대규모 선택자 그룹이 생성될 수 있음
• 컴파일된 CSS를 원본 파일까지 추적하기가 더 어려워짐

비교하면 다음과 같습니다:

• @extend: CSS가 더 작아지지만(규칙 공유), 선택자 연쇄가 복잡하고 미디어 쿼리에서 제한됨
• @mixin: 선언이 중복되지만 더 예측 가능하고 미디어 쿼리 내부에서도 사용할 수 있음

최신 사스에서는 일반적으로 @extend보다 믹스인을 선호합니다. HTTP/2와 gzip 압축으로 선언 중복의 중요성이 줄어든 반면, 믹스인의 디버깅 용이성이 CSS 크기의 미미한 차이보다 더 중요하기 때문입니다.

@extend(자리 표시자와 함께)는 다음과 같은 경우에 적절합니다:

• 여러 선택자가 실제로 같은 의미적 상태를 공유하는 경우(예: 오류 상태)
• 미디어 쿼리 내부가 아닌 경우
• 기본 스타일이 안정적이고 명확하게 정의된 경우

자리 표시자는 여러 구성 요소가 상속하는 재설정과 같은 유틸리티 집합에 잘 맞습니다:

일부 스타일 가이드와 팀에서는 @extend의 복잡성과 이로 인해 발생할 수 있는 선택자 비대 때문에 이를 전면 금지합니다. 장단점을 파악하고 팀의 관례를 따르십시오.

@extend를 사용하면 선택자가 다른 선택자의 스타일을 상속하고, 컴파일된 CSS에서 선택자들이 그룹화됩니다. 자리 표시자(%name)는 확장될 때까지 아무것도 컴파일하지 않으므로 실제 클래스를 확장하는 것보다 깔끔합니다. 미디어 쿼리 내부에서는 @extend를 피하십시오. 최신 사스에서는 예측 가능성과 디버깅 용이성 때문에 일반적으로 @extend보다 믹스인을 선호합니다.