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의 스타일을 보다 쉽게 관리할 수 있습니다.
var() 함수는 선택적 기본값을 허용합니다. UI 시스템은 변수를 확인할 수 없을 때 기본값을 사용합니다. 스타일시트에서 변수를 제거했지만, 해당 레퍼런스를 제거하는 것을 잊은 경우를 예로 들 수 있습니다.
변수에 대한 기본값을 지정하려면 변수 값 뒤에 쉼표(,)로 구분하여 추가하십시오.
다음 USS 스니핏은 --color-1 변수를 호출합니다.UI 시스템이 변수를 확인하지 못하면 빨간색(#FF0000)에 16진수 값을 사용합니다.
var(--color-1, #FF0000);
변수는 CSS에서와 마찬가지로 USS에서도 대부분 동일한 방식으로 작동합니다.CSS 변수에 대한 자세한 내용은 MDN 문서를 참조하십시오.하지만 USS는 CSS의 일부 기능을 지원하지 않습니다.
var() 함수를 지원하지 않습니다. background-color: rgb(var(--red), 0, 0);