LESS CSS 의사 요소 선택기에서 앰퍼샌드(&)는 무엇을 합니까?

CSS 의사 요소 선택기에서 앰퍼샌드(&) 이해하기

CSS에서 이와 같은 코드를 접할 때 앰퍼샌드(& ) 문자:

<code class="css">.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
  }
  &amp;:after {
    clear: both;
  }
}</code>

그러나 이 구문은 CSS의 일부가 아니라는 점에 유의하는 것이 중요합니다. 대신 LESS라는 CSS 전처리기에 속합니다.

LESS를 사용하면 앰퍼샌드 문자를 사용하여 선택기 수정자를 중첩할 수 있습니다. 이를 통해 반복을 방지하여 간결하고 읽기 쉬운 코드를 작성할 수 있습니다. 예를 들어:

<code class="less">.clearfix { 
  &amp;:before {
    content: '';
  }
}</code>

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

<code class="css">.clearfix:before {
  content: '';
}</code>

앰퍼샌드는 중첩된 선택기가 .clearfix:before로 컴파일되도록 합니다. 앰퍼샌드가 없으면 .clearfix :before로 컴파일되어 잘못된 CSS 선택기가 발생하게 됩니다.

제공한 Twitter Bootstrap 예에서 앰퍼샌드는 의사 요소(::before)에 스타일을 적용하는 데 사용됩니다. 및 ::after)는 .clearfix 요소의 하위 항목으로 생성됩니다. 이를 통해 이러한 유사 요소를 간결하게 정의하고 CSS 내에서 모듈식 구조를 유지할 수 있습니다.

위 내용은 LESS CSS 의사 요소 선택기에서 앰퍼샌드(&)는 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!