SCSS 변수를 CSS 선택기 내에서 직접 사용할 수 있나요?

SCSS의 동적 선택기 구문

변수는 CSS 스타일시트를 매개변수화하는 편리한 방법을 제공하여 매우 동적이고 재사용 가능한 코드를 허용합니다. 그러나 질문이 생깁니다. CSS 선택기 내에서 변수를 활용할 수 있습니까?

제공된 예에서는 다음과 같이 선택기에서 변수 $gutter를 사용하려는 시도를 보여줍니다.

<code class="scss">.grid+$gutter {
    background: red;
}</code>

원하는 출력은 배경색이 빨간색인 클래스 선택기 .grid10입니다. 그러나 이 특정 구문은 SCSS에서 유효하지 않습니다.

원하는 기능을 달성하기 위해 SCSS는 #{} 자리 표시자와 관련된 대체 구문을 제공합니다.

<code class="scss">.grid#{$gutter} {
    background: red;
}</code>

이 경우 변수 $gutter는 #{} 구문을 사용하여 선택기에 삽입됩니다. 결과 CSS 출력은 다음과 같습니다.

<code class="css">.grid10 {
    background: red;
}</code>

또한 URL과 같은 문자열 컨텍스트 내에서 변수를 보간할 수 있습니다.

<code class="scss">background: url('/ui/all/fonts/#{$filename}.woff')</code>

이를 통해 URL 및 기타 문자열 기반의 동적 구성이 가능해졌습니다. 속성.

위 내용은 SCSS 변수를 CSS 선택기 내에서 직접 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!