SASS의 값과 같지 않은 변수를 설정하는 방법은 무엇입니까?

SASS(Syntactically Awesome Style Sheets)는 CSS의 기능을 향상시키는 데 사용되는 개발자들 사이에서 매우 인기 있는 전처리기 스크립팅 언어입니다. SASS를 통해 개발자는 CSS에서 사용할 수 없는 변수, 중첩, 믹스인 및 기타 고급 기능을 사용할 수 있습니다.

SASS 사용의 주요 기능 중 하나는 웹 애플리케이션 스타일시트 전체에서 재사용할 수 있는 값에 대한 자리 표시자에 불과한 변수를 선언하는 기능입니다. 변수는 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만들어 개발자가 여러 값을 한 번에 업데이트할 수 있도록 하여 개발자의 시간과 노력을 절약하는 데 도움이 됩니다.

때때로 변수를 null로 설정하고 싶을 수도 있는데, 이는 다른 언어에서는 변수를 null 또는 정의되지 않음으로 설정하는 것을 의미합니다. 이는 자리 표시자 변수를 만들고 나중에 애플리케이션에서 값을 할당할 때 유용합니다. 이번 글에서는 SASS에서 어떤 변수와도 같지 않은 변수를 설정하는 방법을 배웁니다.

전제조건

HTML에서 SASS를 실행하려면 IDE에 SASS 컴파일러가 설치되어 있는지 확인하고(VS Code와 마찬가지로) 다음 명령을 사용하여 SASS 컴파일러를 다운로드하고 설치하세요. -

이렇게 하면 SASS 컴파일러가 시스템에 전체적으로 설치됩니다. 다음으로, SASS 코드를 포함할 확장자가 .scss인 새 파일을 만듭니다.

그런 다음 SASS 파일을 HTML 파일로 가져옵니다. HTML 파일에서 헤드 섹션의 'link' 태그를 사용하여 SASS 파일에 대한 링크를 추가합니다. 링크의 rel 속성은 "stylesheet"로 설정되어야 하며 해당 href 속성은 SASS 파일 경로로 설정되어야 합니다.

SASS의 어떤 것과도 같지 않도록 변수를 설정하는 다양한 방법

어떤 값과도 같지 않은 변수를 설정하려면 null 키워드, unset 함수 또는 #{} 보간 방법을 사용하는 등 여러 가지 방법이 있습니다. 이 모든 방법을 하나씩 자세히 논의해 보겠습니다.

방법 1: Null 키워드 사용

SASS에서는 null 키워드를 사용하여 값이 없음을 나타냅니다. 변수가 null로 설정되면 변수에 값이 할당되지 않았음을 의미합니다. 이는 변수를 선언하고 싶지만 즉시 값을 할당하고 싶지 않을 때 유용합니다.

문법

SASS의 어떤 것과도 같지 않도록 변수를 설정하려면 아래와 같이 null 키워드를 사용하세요.

또는 이미 null로 설정된 변수에 할당하여 변수를 null로 설정할 수도 있습니다

예

null 키워드를 사용하여 변수를 아무것도 설정하지 않는 방법에 대한 전체 예를 살펴보겠습니다.

HTML 코드

SASS 코드

아래는 null과 동일한 값으로 $newVar 변수를 선언하는 SASS 코드입니다.

컴파일된 CSS 코드

아래는 SASS 컴파일러의 도움으로 위의 SASS 코드를 컴파일한 후 생성된 컴파일 코드입니다. 문서의 변경 사항을 보려면 해당 HTML 파일의

방법 2: Unset 기능을 사용하세요

SASS에서 변수를 비워 두는 또 다른 방법은 unset 함수를 사용하는 것입니다. unset 함수는 메모리에서 변수를 제거하여 효과적으로 null로 설정합니다. 다음은 unset 함수를 사용하여 변수를 null로 설정하는 방법의 예입니다.

문법

위 구문에서 $newVar에는 먼저 값 15가 할당됩니다. 그런 다음 unset 함수를 사용하여 메모리에서 $newVar를 제거하고 효과적으로 null로 설정합니다.

예

unset 함수를 사용하여 변수를 None으로 설정하는 방법에 대한 전체 예를 살펴보겠습니다.

HTML 코드

SASS 코드

아래는 각각 15와 12의 값을 갖는 두 개의 변수 $newVar1 및 $newVar2를 선언하는 SASS 코드입니다. 이제 unset 함수를 사용하여 $newVar1 및 $newVar2를 메모리에서 제거하고 효과적으로 null로 설정합니다.

컴파일된 CSS 코드

아래는 SASS 컴파일러의 도움으로 위의 SASS 코드를 컴파일한 후 생성된 컴파일 코드입니다. 문서의 변경 사항을 보려면 해당 HTML 파일의

방법 3: #{} 보간 사용

#{} 보간 구문은 컴파일 타임에 평가되므로 컴파일된 CSS에서 $newVar의 결과 값은 빈 문자열이 됩니다. 상황에 따라 이는 바람직하지 않은 동작일 수 있으므로 해당하는 경우 이 기술을 주의해서 사용하세요.

문법

위 구문에서 $newVar는 내부에 공백이 있는 #{} 보간 구문을 사용하여 생성된 빈 문자열로 설정됩니다. 이 기술은 변수를 null 대신 빈 문자열로 설정해야 할 때 유용합니다.

예

보간법을 사용하여 변수를 None으로 설정하는 예를 살펴보겠습니다.

HTML 코드

SASS 코드

아래는 $newVar 변수를 선언하고 보간 구문을 사용하여 빈 문자열로 설정하는 SASS 코드입니다.

$newVar: #{" "};

body {
   padding: $newVar;
   margin: $newVar;
}

编译的 CSS 代码

下面是在 SASS 编译器的帮助下编译上述 SASS 代码后生成的编译代码。要查看文档中的更改，请确保在相应 HTML 文件中的