SCSS와 함께 CSS 선택기의 변수를 어떻게 사용할 수 있나요?

SCSS에서 CSS 선택기에 변수 사용

SCSS에서 변수는 동적 값을 저장하고 스타일시트 전체에서 재사용하기 위한 강력한 도구입니다. 그러나 CSS 선택기에서 직접 변수를 사용하는 것은 간단하지 않습니다.

$gutter 변수가 10으로 설정되어 있다고 가정합니다. 선택기에서 이를 사용하여 $ 값을 기반으로 클래스 이름을 동적으로 생성할 수 있습니다. 거터.

문제:

다음과 같이 선택기에서 직접 변수를 사용하려고 하면:

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

다음과 같은 결과가 발생합니다. 잘못된 CSS 클래스입니다. 출력은 예상대로 .grid10이 아닙니다.

해결책:

CSS 선택기에서 변수를 사용하려면 #{$var-name}을 사용해야 합니다. 통사론. 아래 코드는 $gutter 변수를 사용하여 클래스 이름을 생성하는 방법을 보여줍니다.

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

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

이렇게 하면 다음 CSS가 생성됩니다.

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

변수 이름.

추가 참고:

#{$var-name} 구문은 URL과 같은 문자열에 변수를 포함하는 데에도 사용할 수 있습니다.

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

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