Sass의 @extend를 통한 상속의 이점-CSS 튜토리얼-php.cn

Sass의 @extend를 통한 상속의 이점 키 테이크 아웃

Sass의 @extend 기능은 클래스가 서로를 서로 공유하여 CSS 스타일 시트의 구성을 단순화하고 대규모 웹 사이트를 효과적으로 쉽게 스타일링 할 수 있도록합니다.

@extend 기능은 CSS 스타일 시트의 복제를 줄이고 HTML 클래스를 깨끗하게 만들고 개발자의 시간과 노력을 절약하고 CSS 구조를보다 체계적이고 유지 관리하기 쉽게 만듭니다.

그러나 @extend를 사용할 때는 CSS 파일 크기와 부주의하게 사용되면 충격 성능을 크게 증가시킬 수 있으므로주의를 기울입니다. 상속 클래스가 상속되는 물체와 직접 관련 될 때만 사용해야합니다. Sass는 CSS에 대한 귀중한 확장으로, 더 깨끗하고, 잘 구조적이며, 개발 및 유지 관리가 더 쉬울 수 있습니다. 이전에 시도하지 않은 사람들에게는 권장되지만 잠재적 인 함정을 피하기 위해 신중하게 사용해야합니다.

CSS 스타일 시트 구성은 대규모 웹 사이트를 효과적으로 스타일링하는 데 중요해졌지만 프로젝트의 스타일 시트는 개발함에 따라 점점 더 복잡하고 유지하기가 어려워지고 있습니다. 이것은 Sass가 모든 것을 더 간단하게 만들기 위해 들어오는 곳입니다.

Sass를 아직 탐험하지 않은 사람들에게는 CSS의 확장입니다. 표현식, 변수, 중첩, Mixins (Sass의 함수 이름), 상속 등과 같은 기본 CS에는 존재하지 않는 기능을 제공합니다. 이 기사에서는 @extend를 사용하여 Sass의 상속에 대한 개요를 제공 할 것입니다. 이 기능이 제공하는 이점과 내 프로젝트에서 사용할 때의 경험을 다룰 것입니다. @extend는 오용 할 수 있으며 Sitepoint의 Hugo Giraudel은 Sass @extend를 피해야하는 이유에 대한 기사를 썼습니다. @extend는 논쟁의 여지가있는 주제가 될 수 있습니다.
Atoz : Sass 편지로 Sass 편지를 배우십시오
이 과정을보십시오 이 과정을보십시오 다음 예에서는 SCSS 구문을 사용하겠습니다. 이것은 Sass의 추가 기능과 함께 CSS의 모든 기능과 구조를 포함하는 구문입니다. @extend는 무엇입니까? @extend는 클래스가 서로 속성을 공유 할 수있는 SASS의 기능입니다. SASS의 클래스 @ExtEnd 셀렉터는 선택기가 확장중인 클래스 옆에 셀렉터를 포함시켜 쉼표로 분리 된 목록을 초래합니다.
. 구문은 다음과 같습니다

사용량 @extend를 사용하는 것은 다음과 같습니다
이것은 다음과 같이 컴파일됩니다

위의 예에서 .foo 및 .bar를 정의했습니다.

.bar는 속성 배경색을 추가하여 .foo를 확장합니다

기본 사항을 알면 이제 @extend의 일부 사용 사례를 살펴 보겠습니다. @extend 사용 사용 <: :> 사용 사례 1 : 복제 클래스 간의 속성 복제는 CSS를 구성 할 때 피하기가 어렵습니다. 이렇게하면 스타일 시트를 더 복잡하게 만들 수 있습니다. 예를 들면 :

위의 예에서 볼 수 있듯이 .breakfast, .lunch 및 .dinner에는 동일한 값으로 속성 색상, 테두리, 박스 쉐이드, 마진 및 패딩이 포함되어 있습니다. 이 속성은 복제되어 코드가 지저분 해 보이도록하므로 @extend로 다시 작성해 봅시다.

위의 재 작성 된 CSS에서 Sass를 사용하여 마크 업을 CSS 만 더 깨끗해지는 데 도움이된다는 것을 알 수 있습니다.

. Codepen에서 sitepoint (@SitePoint)에 의해 SCSS의 Pen Pen Duplication을 참조하십시오. 사례 2 : html 에서 여러 클래스를 이동시킵니다 한 클래스에 다른 클래스의 모든 스타일이 있어야하는 페이지를 디자인 할 때 종종 사례가 있습니다. 우리는 종종 HTML에서 여러 클래스 이름을 사용 하여이 사건을 처리합니다. 우리의 CSS는 그렇게 보일 것입니다 :

그 css에 대한 우리의 HTML :

위의 예에는

에 두 개의 클래스가 있습니다. 우리가 여러 수업을 받았다면 이것이 얼마나 지저분한 지 상상해보십시오 :

위의 HTML 코드는 상당히 복잡해질 수 있습니다. 일부 웹 개발자는 이런 식으로 선호하지만 Sass 스타일의 상속을 선호합니다.

우리의 HTML과 함께 이제는 다음과 같습니다.

이번에는 하나의 클래스 만 있으면됩니다. 클래스에 대해 정의 된 모든 스타일은 클래스 .strawberry-candy에도 적용됩니다. 이제 HTML 코드가 더 깨끗 해집니다. Codepen에서 sitepoint (@sitepoint)의 @extend와 함께 HTML에서 여러 클래스를 옮기는 펜을 참조하십시오. 사례 3 : 복잡한 선택기 확장 클래스 선택기만이 확장 할 수있는 유일한 것은 아닙니다. 또한 복잡한 선택기를 A : Hover, .parentClass.childclass 등과 같은 단일 요소로 확장 할 수도 있습니다. 예를 들면 :

<span><span>@extend .class-name;</span></span>

로그인 후 복사

이것은 다음과 같이 컴파일됩니다

그런 다음 우리는 다음과 같이 html에서 사용할 수 있습니다.

Codepen에서 sitepoint (@sitepoint)의 @extend로 복잡한 선택기를 확장하는 펜을 참조하십시오. @extend의 장점 위의 예를 살펴보면 @extend를 통해 상속의 몇 가지 장점을 볼 수 있습니다. 여기에는 다음이 포함됩니다 클리너 html 클래스 두 번째 사례 연구에서 볼 수 있듯이, 한 요소에 많은 클래스를 사용하면 문제가 발생하면 근본 원인을 결정하기가 어려울 수 있습니다. HTML 태그의 구조도 그다지 멋지고 깨끗해 보이지 않습니다.

좋은 제품을 만들 때 내 관점에서 볼 때, 우리는 최종 사용자의 관점뿐만 아니라 개발 전략의 품질도 고려합니다. 따라서 @extend는 각 HTML 요소 내에서 클래스를 깨끗하게 구조화하는 데 도움이됩니다. CSS의 복제 감소 웹 개발에서 우리는 항상 CSS 스타일 내에 약간의 복제가 있습니다. 따라서 서면 CSS 소스 코드를 재사용하는 것이 매우 필요할 수 있습니다. @extend는 CSS가 적절하고 깨끗할 때 우리가 재사용하는 데 도움이 될 수 있습니다. 시간과 노력을 절약 앞에서 언급 한 두 가지 장점으로 개발자는 개발 중에 시간과 노력을 절약 할 수 있습니다. 개발자는 다양한 요소에 대한 CSS를 재사용하여 CSS 문제의 근본 원인을 찾는 데 필요한 노력을 줄이고 CSS 구조를 멋지고 깨끗하게 만들 수 있습니다. 그러나 @extend를 사용하는 것은 위험이 없습니다. 위의 장점은 @extend를 신중하게 사용하는 경우에만 적용됩니다. 반대 효과를 유발하는 과도하게 사용될 수 있습니다.

. @extend의 위험 나는 내 프로젝트에 @extend를 적용했으며 @extend를 사용할 때는주의를 기울여야합니다. 조심해야합니다.

@extend는 CSS 파일 크기를 크게 증가시키고주의없이 사용될 때 CSS의 성능에 영향을 줄 수 있습니다. 나는 이런 상황에서 고통을 겪었고 Sass의 @extend 사용을 리팩트하는 데 많은 시간을 보냈습니다. 다음은 처음 @extend를 잘못 사용했는지에 대한 예입니다.

예 :

는 다음과 같이 컴파일됩니다

이 예에서 .base-css는이를 기반으로 한 많은 상속 클래스가있는 클래스입니다. 예제를 살펴보면 상속 클래스가 서로 관련이 없음을 알 수 있습니다. 내 버튼에는 .btn이 있고 바닥 글에는 .pooter가 있습니다. .base-css에서 상속되는 100 개의 클래스가 있으면 .base-css 특성을 가진 선택기가 증가합니다. 이것은 크고 불필요하게 CSS 최종 결과를 복잡하게 만듭니다. 또한 이는 각 선택기의 속성을 확인하는 것이 더 어렵습니다.

내 Sass를 다시 입력 한 후, 상속 클래스가 상속하는 객체와 직접 관련 될 때만 @extend 만 사용해야한다는 것을 깨달았습니다. 많은 관련이없는 요소에 대한 담요 규칙이 아니라 물체 나 스타일의 변형이어야합니다. 위의 예제와 같은 상속을 위해서는 스타일을 어린이 요소로 계단식으로 만들기 위해 CSS의 기존 기능에 의존해야합니다.

는 다음과 같이 컴파일됩니다

<span><span>@extend .class-name;</span></span>

로그인 후 복사

우리는 위의 예가 훨씬 더 정확하고 합리적임을 알 수 있습니다. 우리는 @extend를 객체 유형의 변형으로 인해 서로 상속 해야하는 클래스에만 적용하여 범위를 줄였습니다. 예를 들어, 위의 스타일은 모두 다른 유형의 버튼과 관련이 있습니다.

결론

Sass는 CSS를 개선하여 CSS를 깨끗하고 구조적이며 조직적이며 개발 및 유지 관리가 쉽게 만들 수있는 귀중한 확장입니다. 전에 Sass를 시도하지 않은 경우 적극 권장합니다. Sass의 기본 사항에 더 편한 느낌이 들면 Sass의 @extend에 대해 아무도 말하지 않은 것에 대한 Hugo Giraudel의 itepoint 기사를 읽는 것이 좋습니다. 또한 Sitepoint의 Sass Reference에서 전체 Sass 참조 안내서가 있습니다. 이 게시물의 첫 번째 버전에서 오류를 선택한 의견으로 Steve와 Ezekiel에게 감사합니다. 이후 업데이트되었습니다. sass Sass에서 @extend를 사용하는 데있어 주요 장점은 무엇입니까?

Sass에서 @extend를 사용하는 주요 장점은 코드 재사용 가능성을 허용하여 클리너 및 유지 관리 가능한 코드로 이어집니다. 클래스가 다른 클래스의 스타일을 상속받을 수 있도록하여 반복적 인 코드를 작성해야 할 필요성을 줄일 수 있습니다. 이것은 코드를 더 읽기 쉽게 만들뿐만 아니라 파일 크기를 줄여서 웹 페이지의로드 시간을 향상시킬 수 있습니다.

@extend는 sass의 @mixin과 어떻게 다릅니 까? Sass의 @Extend 및 @Mixin은 코드 재사용 성을 허용하며 다른 방식으로 작동합니다. @extend를 사용하면 선택기가 다른 선택기의 스타일을 상속받을 수있는 반면 @Mixin에는 스타일 시트 전체에서 재사용 할 수있는 스타일 블록이 포함되어 있습니다. 주요 차이점은 @extend가 동일한 스타일로 선택기를 그룹화하기 때문에 CSS 출력을 적게 생성하는 반면 @Mixin은 포함 할 때마다 스타일을 복제 할 때 더 많은 CSS 출력을 초래할 수 있다는 것입니다. Sass에서 복잡한 선택기와 함께 @Extend? 그러나 @extend는 동일한 파일에있는 선택기와 만 작동한다는 점에 유의해야합니다. 다른 파일에 정의 된 선택기 또는 @mixin 또는 함수로 생성 된 파일에 정의 된 선택기와 함께 작동하지 않습니다.

Sass의 미디어 쿼리 내부에서 @extend를 사용할 때 오류가 발생하는 이유는 무엇입니까? Sass의 중첩 규칙 내에서 @extend를 사용할 수 있습니까? 예, Sass의 중첩 규칙 내에서 @extend를 사용할 수 있습니다. 그러나 확장 선택기는 중첩 규칙이 아닌 스타일 시트의 최상위 레벨에 삽입됩니다. SASS는 모든 셀렉터가 문서의 최상위 레벨에 있어야한다는 CSS 규칙을 따르기 때문입니다.

"SASS에서"확장 지시문 만 사용될 수 있습니다 "오류를 피할 수 있습니까? 🎜>이 오류는 SASS의 규칙에 따라 @extend를 사용하려고 할 때 발생합니다. 이 오류를 피하려면 규칙 세트 내에서 @extend를 사용하고 있는지 확인하십시오. 예를 들어,“@extend .class;”를 쓰는 대신“.new class {@extend .class; }”.

Sass에서 의사 클래스와 함께 @extend를 사용할 수 있습니까?

예, Sass의 의사 클래스와 함께 @extend를 사용할 수 있습니다. 그러나 @extend는 의사 클래스 자체가 아니라 의사 클래스의 스타일 만 확장 할 것이라는 점에 유의해야합니다. 이것은 "@extend : hover;"를 사용하는 경우 선택기에 호버 효과를 추가하지 않지만 대신 : 호버 의사 클래스의 스타일을 확장합니다. Sass에서 일하지 않습니까?

@extend가 Sass에서 작동하지 않는 몇 가지 이유가있을 수 있습니다. 한 가지 일반적인 이유는 확장하려는 선택기가 동일한 파일에 존재하지 않기 때문입니다. 또 다른 이유는 Sass에서는 허용되지 않는 미디어 쿼리 또는 중첩 규칙 내에서 선택기를 확장하려고하기 때문일 수 있습니다. @extend가 작동하지 않는 경우이 지점을 확인하십시오.

Sass의 여러 클래스와 함께 @extend를 사용할 수 있습니까?