SASS의 @extend 지시어는 무엇입니까?

SASS를 사용하면 개발자는 더 읽기 쉬운 코드를 작성하고 더 나은 방식으로 작업할 수 있습니다. 개발자가 일반 CSS보다 더 나은 코드를 작성할 수 있도록 기능을 제공하는 @media, @content, @include, @mixin, @extend 등과 같은 여러 지시문이 포함되어 있습니다.

이 튜토리얼에서는 SASS의 @directives에 대해 알아봅니다. @extend 지시문을 사용하면 개발자가 CSS 코드를 확장할 수 있습니다. 그러나 믹스인은 CSS 코드를 확장하고 중복을 방지합니다. @extend 지시문을 사용하면 코드 중복을 피할 수도 있습니다.

예를 들어 애플리케이션의 글꼴에 공통 CSS가 있고 모든 곳에서 다른 글꼴 크기가 필요한 경우 글꼴 스타일을 확장하고 사용자 정의 글꼴 크기를 추가할 수 있습니다. 이렇게 하면 중복 코드를 작성할 필요가 없습니다.

또한 개발자는 @extend 지시문을 사용하여 CSS에서 상속을 구현할 수 있으며, 이는 예제를 통해 배우게 됩니다.

문법

사용자는 다음 구문에 따라 SASS에서 @extend 지시문을 사용할 수 있습니다.

으아아아

위 구문에서는 "선택기"의 선언 블록에 공통 CSS를 작성할 수 있습니다. 그런 다음 "Another_CSS_Selector" 내부에서 선택기를 확장하고 자체 코드를 추가할 수 있습니다.

예제 1(@extend 지시문의 기본 사용)

아래 예에서는 "카드" 클래스 이름을 가진 HTML 요소에 대한 몇 가지 스타일을 정의했습니다. 그런 다음 "small_card" 및 "large_Card" 요소에 대한 CSS를 정의합니다. 우리는 "카드" 선택기의 CSS를 확장하기 위해 두 선택기 모두에서 @extend 지시문을 사용했습니다. 또한 "small_card" 및 "large_card" 선택기에 너비, 높이 등과 같은 몇 가지 추가 CSS를 포함했습니다.

으아아아

출력

아래 출력에서 ​​"card" 선택기의 스타일이 "small_card" 및 "large_card" 선택기에 적용되는 것을 확인할 수 있습니다. 추가 CSS도 두 선택기에 별도로 적용됩니다.

으아아아

예 2(@extend 지시문을 사용한 상속 체인)

아래 예에서는 @extend 지시어를 사용하여 상속 체인을 만드는 방법을 보여줍니다. 여기서는 ".first" 선택기 내에 CSS를 추가했습니다. 그런 다음 ".second" 선택기 내부에 ".first" 선택기를 확장하고 추가 CSS를 추가했습니다.

다음으로 ".third" 선택기 내부의 ".second" 선택기와 ".fourth" 선택기 내부의 ".third" 선택기를 확장합니다. 여기에서는 다양한 CSS 선택기를 사용하여 상속 체인을 만들었습니다.

으아아아

출력

아래 출력은 @extend 지시어를 사용하여 상속 체인을 생성할 때 CSS 코드가 다양한 CSS 선택기에 어떻게 적용되는지 보여줍니다.

으아아아

예 3(@extend 지시문을 사용한 다중 상속)

이 예에서는 @extend 지시문을 사용하여 다중 상속을 사용하는 방법을 보여줍니다. 다중 상속은 단일 선택기가 여러 선택기를 확장한다는 의미입니다.

여기서 ".container" 및 ".main" CSS 선택기를 정의하고 일부 CSS를 추가했습니다. 그런 다음 ".element" CSS 선택기 내에서 ".container" 및 ".main" 선택기를 확장합니다.

으아아아

출력

으아아아

예 4(@media 지시어 내에서 @extend 지시어 사용)

아래 예에서는 @media 지시어 내에 @extend 지시어를 사용하고 있습니다. 그러나 SASS 컴파일러는 해당 선택기 내의 @media 지시어 외부에 정의된 CSS 선택기를 확장할 때마다 오류를 발생시킵니다.

여기에서는 @media 지시문의 ".button" CSS 선택기를 사용하여 ".small_button" CSS 선택기를 확장했습니다. 사용자는 여기에서 두 선택기가 모두 @media 지시문 내에 있음을 확인할 수 있습니다.

으아아아

출력

으아아아

예 5(자리 표시자 선택기)

이름에서 알 수 있듯이 선택기 이름 앞에 (%) 기호를 추가하여 자리 표시자 선택기를 만들 수 있습니다. SASS 코드를 컴파일할 때 자리 표시자 선택기는 출력 코드에 나타나지 않지만 해당 스타일은 확장 위치에 추가됩니다.

예를 들어 여기서는 "%container" 자리 표시자 선택기를 정의합니다. 그런 다음 "small_container" 및 "medium_container" 내부의 컨테이너 선택기를 확장했습니다.

출력에서 "container" 선택기가 포함되어 있지 않지만 "small_container" 및 "large_container"에 "container" 자리 표시자 코드가 포함되어 있음을 확인할 수 있습니다.

으아아아

출력

으아아아

사용자는 이 튜토리얼에서 @extend 지시문을 사용하는 방법을 배웠습니다. 기본적으로 이를 사용하여 스타일시트를 확장하고 코드 중복을 피할 수 있습니다. 또한 @extend 지시문을 사용하여 CSS에서 상속 체인을 만들 수 있습니다.

위 내용은 SASS의 @extend 지시어는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!