SCSS 선택기에서 변수를 어떻게 사용할 수 있나요?

SCSS 선택기의 변수 사용

SCSS에서 동적 선택기를 생성하기 위해 변수를 활용하는 것은 유용한 기술이 될 수 있습니다. 그러나 귀하의 예와 같이 선택기에서 직접 변수를 사용하는 것은 구문에서 지원되지 않습니다.

선택기에서 변수를 효과적으로 사용하려면 선택기 자체 내에서 변수를 접두사 또는 접미사로 사용할 수 있습니다. 이를 통해 특정 클래스 이름을 동적으로 생성할 수 있습니다. 예를 들어 다음과 같이 코드를 수정할 수 있습니다.

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

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

이러한 수정을 통해 생성된 CSS에는 원하는 배경색이 있는 .grid10 클래스가 포함됩니다.

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

또한, 문자열 내의 변수를 사용하여 문자열 보간이 필요한 URL이나 기타 요소를 동적으로 생성할 수 있습니다. 예:

<code class="scss">$gutter: 10;
$filename: 'sans-serif';

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

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