sass
확장 / 상속

통사론

• @extend .<className>
• @extend .<className>, .<className>
• @extend .<className> !optional
• @extend .<className>, .<className> !optional

매개 변수

비고

클래스 확장하기

.message
  color: white

.message-important
  @extend .message
  background-color: red

이것은 모든 스타일을 .message 에서 취하여 .message-important 추가합니다. 다음 CSS를 생성합니다.

.message, .message-important {
  color: white;
}

.message-important {
  background-color: red;
}

여러 클래스에서 확장

.message
  color: white

.important
  background-color: red

.message-important
  @extend .message, .important

위의 코드에서 @extend 는 한 줄에 여러 클래스의 코드를 .message-important 에 추가하는 데 사용 @extend 다음과 같이 한 줄에 하나의 확장을 사용할 수 있습니다.

.message-important
    @extend .message
    @extend .important

이 방법들 중 하나는 다음 CSS를 생성합니다 :

.message, .message-important {
  color: white;
}

.important, .message-important {
  background-color: red;
}

체인 확장

.message
  color: white
  background: black

.message-important
  @extend .message
  font-weight: bold

.message-error
  @extend .message-important
  font-style: italic

이 코드 발생 .message-error 로부터 연장 .message-important , 그것은 모두에서 코드를 포함한다는 것을 의미 .message-important 과 .message 이후 .method-important 로부터 연장 .message . 그 결과 다음 CSS가 생성됩니다.

.message, .message-important, .message-error {
  color: white;
  background: black;
}

.message-important, .message-error {
  font-weight: bold;
}

.message-error {
  font-style: italic;
}

면책 조항 : 확장하려는 클래스가 코드에서 한 번만 발생하는지 확인하십시오. 그렇지 않으면 Sass가 복잡하고 복잡한 CSS를 생성 할 수 있습니다.

선택적 확장

경우에 따라 @extend 를 선택적으로 사용하고 코드에 지정된 클래스가 필요하지 않도록 할 수 있습니다.

.message-important
  @extend .message !optional
  background: red

그러면 다음 CSS가 생성됩니다.

.message-important {
  background: red;
}

면책 조항 :이 기능은 개발 중에 모든 코드를 아직 작성하지 않았고 오류를 원하지 않을 때 유용하지만 예상치 못한 결과가 발생할 수 있으므로 프로덕션 환경에서 제거해야합니다.

자리 표시 자

때로는 다른 규칙 집합 내부로만 확장 할 수있는 클래스를 만들 수 있습니다. 즉, 컴파일 된 CSS 파일은 필요한 것보다 커집니다. 자리 표시 자 선택자는이 문제를 해결합니다.

자리 표시 자 선택기는 클래스 선택기와 비슷하지만 클래스에 사용 된 (.) 대신 퍼센트 기호 (%)를 사용합니다. 그들은 컴파일 된 CSS에 나타나지 않을 것입니다.

%button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
} 

.error-button {
    @extend %button;
    background-color: #FF0000;
}

.success-button {
    @extend %button;
    background-color: #00FF00;
}

다음 CSS로 컴파일됩니다.

.error-button, .success-button {
    border: 5px solid black;
    border-radius: 5px;
    margin: 0;
}

.error-button {
    background-color: #FF0000;
}

.success-button {
    background-color: #00FF00;
}

상위 확장

일반적으로 부모를 다음과 같이 확장하려고합니다.

.parent {
  style: value;

  @extend &;
}

상위 항목을 확장 할 수 없다는 오류가 발생합니다. 이는 의미가 있지만 해결 방법이 있습니다. 상위 셀렉터를 변수에 저장하기 만하면됩니다.

.parent {
  $parent: &;
  style: value;
  @extend #{&};
}

위의 예에서이 작업을 수행하면 아무런 이점이 없지만 포함 된 mixin에서 부모 스타일을 감쌀 수 있습니다.