USS 변수 생성

USS 변수를 생성하여 다른 USS 프로퍼티에서 사용할 수 있습니다.USS 변수를 업데이트하면 해당 변수를 사용하는 모든 USS 프로퍼티가 업데이트됩니다.USS 변수의 기본값을 지정할 수도 있습니다.

USS 변수 생성 및 사용

USS 변수를 생성하려면 해당 이름 앞에 더블하이픈(--)을 붙이십시오.

--color-1: red;

다른 USS 규칙에서 USS 변수 값을 사용하려면 var()함수를 사용하여 호출하십시오.

var(--color-1);

변수를 업데이트하면 해당 변수를 사용하는 모든 USS 프로퍼티가 업데이트됩니다.

예를 들어 다음 USS 스니핏은 두 개의 컬러 변수를 선언하는 하나의 스타일 규칙과 이러한 변수를 사용하는 두 개의 스타일 규칙을 정의합니다.

:root {
  --color-1: blue;
  --color-2: yellow;
}

.paragraph-regular {
  color: var(--color-1);
  background: var(--color-2);
  padding: 2px;
  }

.paragraph-reverse {
  color: var(--color-2);
  background: var(--color-1);
  padding: 2px;
  }

컬러 구성표를 업데이트하려면 네 가지 컬러 값 대신 두 가지 변수 값을 변경하면 됩니다.

변수를 사용하면 여러 규칙(때로는 다른 스타일시트에 있음)이 동일한 값을 사용하는 복잡한 UI의 스타일을 보다 쉽게 관리할 수 있습니다.

USS 변수의 기본값 지정

var() 함수는 선택적 기본값을 허용합니다. UI 시스템은 변수를 확인할 수 없을 때 기본값을 사용합니다. 스타일시트에서 변수를 제거했지만, 해당 레퍼런스를 제거하는 것을 잊은 경우를 예로 들 수 있습니다.

변수에 대한 기본값을 지정하려면 변수 값 뒤에 쉼표(,)로 구분하여 추가하십시오.

다음 USS 스니핏은 --color-1 변수를 호출합니다.UI 시스템이 변수를 확인하지 못하면 빨간색(#FF0000)에 16진수 값을 사용합니다.

var(--color-1, #FF0000);

CSS 변수와의 차이점

변수는 CSS에서와 마찬가지로 USS에서도 대부분 동일한 방식으로 작동합니다.CSS 변수에 대한 자세한 내용은 MDN 문서를 참조하십시오.하지만 USS는 CSS의 일부 기능을 지원하지 않습니다.

USS는 아래와 같이 다른 함수 내부의 var() 함수를 지원하지 않습니다.

  background-color: rgb(var(--red), 0, 0);

USS는 변수에 대한 수학적 연산을 지원하지 않습니다.

추가 리소스

USS 커스텀 프로퍼티(변수)

USS 빌트인 변수 소개

매뉴얼

USS 변수 생성