CSS 의사 요소와 함께 사용될 때 LESS에서 앰퍼샌드(&)가 어떻게 작동합니까?

CSS 의사 요소의 앰퍼샌드: 간단한 방법

CSS에서 앰퍼샌드(&)는 일반적으로 의사 요소와 함께 사용됩니다. :before 및 :after 등이 있습니다. 그러나 Twitter Bootstrap에서 제공하는 예에서는 앰퍼샌드가 약간 다른 방식으로 사용됩니다.

문제의 구문은 다음과 같습니다.

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

자세히 살펴보면 다음과 같다는 것을 알 수 있습니다. 순수한 CSS가 아니라 널리 사용되는 CSS 전처리기인 LESS입니다. LESS에서는 앰퍼샌드를 사용하여 선택기 중첩이 가능합니다. 의사 요소 앞에 상위 선택기(&)를 붙여서 다음을 달성할 수 있습니다.

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

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

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

앰퍼샌드가 없으면 선택기는 컴파일됩니다. .clearfix :before로, 이는 유효한 CSS 구문이 아닙니다. 따라서 LESS에서는 앰퍼샌드를 사용하여 선택기 수정자를 중첩하여 코드를 더욱 간결하고 읽기 쉽게 만듭니다.

위 내용은 CSS 의사 요소와 함께 사용될 때 LESS에서 앰퍼샌드(&)가 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!