SCSS의 선택기에서 변수를 어떻게 사용할 수 있습니까?

선택기의 변수 보간

SCSS에서 변수는 스타일시트 전체에서 참조할 수 있는 값을 저장합니다. 그러나 변수를 선택기로 직접 사용하면 특정 제한 사항이 발생합니다. 이 시나리오를 살펴보고 해결책을 찾아보겠습니다.

도전: 선택기에서 변수 사용

$gutter 변수가 10으로 설정되어 있고 이를 사용하려고 합니다. 선택기 .grid $gutter. 이 코드는 빨간색 배경의 .grid10 클래스를 생성하려고 시도합니다. 그러나 컴파일에 실패합니다.

해결책: #{$}로 보간

선택기에서 변수를 사용하려면 #{$}를 사용하여 보간을 사용해야 합니다. 통사론. 방법은 다음과 같습니다.

<code class="scss">$gutter: 10;

.grid#{$gutter} {
    background: red;
}</code>

$gutter 변수를 #{$} 내에 포함하여 해당 값을 선택기 문자열에 보간하여 .grid10을 생성합니다. 이렇게 하면 원하는 CSS가 생성됩니다.

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

URL과 같은 문자열에 사용되는 경우 보간은 유사하게 작동합니다.

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

추가 참고 사항:

• 보간은 클래스 또는 ID 이름 뒤와 같이 선택기 내 특정 컨텍스트에서만 사용할 수 있습니다.
• 더 복잡한 동적 선택기 시나리오가 필요한 경우 코드 재사용성을 위해 믹스인 사용을 고려하세요. .

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