LESS에서 확장을 사용하는 것은 무엇입니까?

LESS에서 "확장"은 한 선택기에서 다른 선택기로 스타일을 상속할 수 있는 기능입니다. 선택기에서 "확장"을 사용하면 해당 선택기의 스타일이 일치하는 다른 선택기와 병합됩니다.

다음 예를 통해 이해해 봅시다. 이렇게 하면 LESS의 "확장" 기능 사용법을 더 명확하게 이해할 수 있습니다.

문법

사용자는 다음 구문에 따라 LESS에서 "확장" 기능을 사용할 수 있습니다.

으아악

위 구문에서 ".selector1"은 스타일을 상속할 선택자이고 ".selector2"는 상속할 선택자입니다. "extend"를 사용할 때 "&" 기호를 사용하여 중첩된 선택기를 만들 수도 있습니다.

Less에서 "확장" 기능을 사용하는 다양한 방법

다음은 LESS의 "확장" 기능을 사용하여 CSS 코드를 단순화하고 최적화할 수 있는 몇 가지 기술입니다.

선택기에 확장 기능 추가

확장자는 선택기에 연결되므로 연결된 선택기를 다른 선택기와 병합할 수 있습니다. 이는 선택기 매개변수가 있는 일반 의사 클래스와 같습니다.

다음은 몇 가지 예입니다 -

• 기존 선택기 다음에 선택기를 확장하세요 −

으아악

• 기존 선택기 사이에 공백을 사용하고 확장하세요. -

으아악

• 다음과 같이 동일한 규칙 세트의 여러 선택기에 확장을 사용할 수도 있습니다. −

으아악

확장된 내부 규칙 세트

또한 규칙 세트에서 "확장"을 사용하여 한 선택기의 속성을 다른 선택기로 확장할 수도 있습니다. 예를 들어 −

으아악

확장된 중첩 선택기

"확장"을 사용할 때 "&" 기호를 사용하여 중첩된 선택기를 만들 수 있습니다.

아래 예에서는 "extend"를 사용하여 중첩된 선택기 ".selector1.nested"를 ".selector2"로 확장합니다. 이를 통해 ".selector2"에서 ".selector1" 및 ".nested" 스타일을 상속할 수 있습니다.

으아악

확장과 정확히 일치

CSS 확장을 사용할 때 선택기 간에 정확히 일치하는 항목을 찾는다는 점을 이해하는 것이 중요합니다. 즉, 의미가 동일하더라도 선택자의 형식이 동일해야 일치됩니다.

예를 들어 다음 CSS 코드에서는 -

으아악

“모두” 확장

Less에서 확장 매개변수의 마지막 부분으로 all 키워드를 사용할 수 있습니다. 이는 Less가 선택기를 다른 선택기의 일부로 일치시키도록 지시합니다. 그러면 원래 선택기와 일치하는 부분을 포함하는 새 선택기가 생성되고 확장 기능으로 대체됩니다.

예시입니다 −

으아악

예 1

아래 예에서는 클래스 이름이 .button인 버튼에 대한 기본 스타일을 정의한 다음 "확장" 기능을 사용하여 기본 스타일을 확장하여 기본 및 위험 버튼에 대한 스타일을 정의함으로써 특정 스타일을 정의합니다.

.primary-button 및 .danger-button 클래스는 .button 클래스에 정의된 모든 스타일을 상속하므로 코드 중복을 줄이는 데 도움이 됩니다. 또한 각 클래스는 고유한 사용자 정의 스타일을 추가하여 다양한 버튼 스타일을 만듭니다.

출력에서 사용자는 .button에 정의된 스타일이 .primary-button 및 .danger-button에 상속되고 각 카테고리에 정의된 사용자 정의 스타일이 적용되는 것을 확인할 수 있습니다.

으아악

출력

으아악

예 2

아래 예에서는 클래스 이름이 .card인 카드의 기본 스타일을 정의합니다. 그런 다음 "확장" 기능을 사용하여 큰 카드, 머리글이 있는 카드, 바닥글이 있는 카드, 머리글과 바닥글이 모두 있는 카드에 대한 특정 스타일을 정의합니다.

출력에서 사용자는 .card에 정의된 스타일이 다른 클래스에 의해 상속되고 필요에 따라 사용자 정의되는 것을 관찰할 수 있습니다.

으아악

출력

으아악

사용자는 LESS에서 "확장" 기능을 사용하는 구문과 "확장"을 사용하여 CSS 코드를 단순화하고 최적화하는 다양한 기술을 배웠습니다. 이 기능을 활용하고 CSS 코드 최적화를 위한 모범 사례를 사용함으로써 사용자는 유사한 스타일에 대한 중복 코드 작성을 방지하고 CSS 코드를 보다 체계적으로 유지할 수 있습니다.

위 내용은 LESS에서 확장을 사용하는 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!