집 >웹 프론트엔드 >CSS 튜토리얼 >LESS와 결합되면 CSS 의사 요소에서 앰퍼샌드(&)가 어떤 역할을 합니까?

LESS와 결합되면 CSS 의사 요소에서 앰퍼샌드(&)가 어떤 역할을 합니까?

What does the ampersand (&) do in CSS pseudo-elements when combined with LESS?

CSS 의사 요소의 앰퍼샌드(&) 이해

CSS에서는 의사 요소를 사용하여 요소에 스타일을 추가할 수 있습니다. HTML의 내용이나 구조를 수정합니다. 의사 요소와 함께 사용할 경우 앰퍼샌드(&) 문자는 특정 용도로 사용됩니다.

Twitter Bootstrap에서 자주 볼 수 있는 다음 CSS 스니펫을 고려하세요.

.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
  }
  &amp;:after {
    clear: both;
  }
}

이 코드에서 , 앰퍼샌드(&)는 의사 요소 :before 및 :after 앞에 사용됩니다. 이는 의사 요소에 적용된 스타일이 ".clearfix" 클래스를 사용하여 상위 요소에 적용된 경우에만 적용 가능함을 나타냅니다.

이 구문은 CSS 고유의 구문이 아니라는 점에 유의하는 것이 중요합니다. CSS 전처리기인 LESS에서 유래되었습니다. LESS에서는 앰퍼샌드(&)를 사용하여 선택기 수정자의 중첩을 허용합니다. 예를 들어:

.clearfix { 
  &amp;:before {
    content: '';
  }
}

이 코드는 다음과 같이 컴파일됩니다.

.clearfix:before {
  content: '';
}

앰퍼샌드(&)가 있으면 중첩된 선택기가 ".clearfix:before"로 컴파일됩니다. 이것이 없으면 결과 코드는 ".clearfix :before"가 됩니다.

요약하자면, LESS에서 의사 요소와 함께 사용될 때 앰퍼샌드(&) 문자를 사용하면 선택기 수정자의 중첩이 가능해집니다. 특정 요소의 하위 항목에 스타일을 적용하는 편리한 방법을 제공합니다.

위 내용은 LESS와 결합되면 CSS 의사 요소에서 앰퍼샌드(&)가 어떤 역할을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：