커스텀 프로퍼티라고도 부르는 USS 변수는 다른 USS 규칙에서 재사용할 수 있는 값을 정의합니다. 모든 타입의 USS 프로퍼티에 대한 변수를 만들 수 있습니다.
USS 변수를 생성하려면 해당 이름 앞에 더블하이픈(--)을 붙이십시오.
--color-1: red;
다른 USS 규칙에서 USS 변수 값을 사용하려면 var()함수를 사용하여 호출하십시오.
var(--color-1);
| 참고: |
|---|
var()함수는 선택적 기본값도 허용합니다(아래의 기본값 지정 참조). |
변수를 정의한 후에는 많은 다른 USS 프로퍼티에서 사용할 수 있습니다. 업데이트하면 이 변수를 사용하는 모든 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);
USS에서 변수는 CSS에서와 거의 동일한 방식으로 작동합니다. CSS 변수에 대한 자세한 내용은 MDN 문서를 참조하십시오.
이해해야 할 몇 가지 사소한 차이점이 있습니다.
일부 웹 브라우저는 아래의 프로퍼티 선언처럼 다른 함수 내에서 var() 함수 사용을 지원합니다.
background-color: rgb(var(--red), 0, 0);
Unity는 이러한 var() 사용을 지원하지 않습니다.
일반적인 CSS 관행은 :root 유사 클래스 선택자에서 “전역” 변수를 선언하는 것입니다. 웹 페이지의 모든 요소가 :root에서 상속되므로 CSS 스타일시트의 모든 선택자는 그곳에서 선언된 변수를 호출할 수 있습니다.
Unity에서 :root에서의 변수 선언은 에디터 창과 런타임 패널에서 작동합니다. 단, 스타일시트를 패널 또는 에디터 창의 루트 VisualElement에 연결해야 합니다. 인스펙터 UI에서는 작동하지 않습니다.
인스펙터에서 :root 유사 클래스는 인스펙터 창의 루트 VisualElement에서만 활성화됩니다. 스타일시트를 연결하는 하위 트리는 인스펙터 계층 구조에서 훨씬 아래에 있습니다. 따라서 :root 선택자는 하위 트리의 어떠한 부분과도 매칭되지 않습니다.
커스텀 인스펙터에서 :root 선택자 대신 USS 클래스 선택자를 사용할 수 있습니다. 변수를 선언할 USS 클래스를 생성한 후 액세스할 수 있는 계층 구조 내 최상위 요소에 적용하십시오.
예를 들어 다음 USS 스니핏은 다음 클래스를 정의합니다.
.root는 변수를 선언합니다..label1은 변수를 호출합니다..root {
--color1: rgb(25, 255, 75);
}
.label1 {
color: var(--color1);
}
다음 UXML 스니핏은 단순한 컨테이너 요소를 생성한 후 루트 클래스를 할당합니다. 컨테이너에는 label1 클래스가 할당된 자식 요소인 Label이 있습니다.
UXML에서 다음과 같습니다.
<UXML xmlns="UnityEngine.UIElements">
<VisualElement class="root">
<!-- Including, for example... -->
<Label class="label1" text="Label text"/>
</VisualElement>
</UXML>
Label은 컨테이너에서 상속되므로 해당 스타일은 컨테이너의 스타일에서 정의된 모든 변수를 호출할 수 있습니다.