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

커스텀 프로퍼티라고도 부르는 USS 변수는 다른 USS 규칙에서 재사용할 수 있는 값을 정의합니다. 모든 타입의 USS 프로퍼티에 대한 변수를 만들 수 있습니다.

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

--color-1: red;

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

var(--color-1);

변수를 정의한 후에는 많은 다른 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);

빌트인 Unity 변수

Unity의 빌트인 스타일시트는 에디터 인터페이스의 기본값을 설정하는 USS 변수를 정의합니다. 자체 스타일시트에서 이러한 변수를 사용하여 커스텀 에디터 확장이 Unity 스타일과 일치하는지 확인할 수 있습니다. 자세한 내용은 빌트인 Unity 변수를 참조하십시오.

CSS와의 차이점

USS에서 변수는 CSS에서와 거의 동일한 방식으로 작동합니다. CSS 변수에 대한 자세한 내용은 MDN 문서를 참조하십시오.

이해해야 할 몇 가지 사소한 차이점이 있습니다.

다른 함수에서 USS 변수 호출

일부 웹 브라우저는 아래의 프로퍼티 선언처럼 다른 함수 내에서 var() 함수 사용을 지원합니다.

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

Unity는 이러한 var() 사용을 지원하지 않습니다.

루트 선택자에서 변수 선언

일반적인 CSS 관행은 :root 유사 클래스 선택자에서 “전역” 변수를 선언하는 것입니다. 웹 페이지의 모든 요소가 :root에서 상속되므로 CSS 스타일시트의 모든 선택자는 그곳에서 선언된 변수를 호출할 수 있습니다.

Unity에서 :root에서의 변수 선언은 에디터 창과 런타임 패널에서 작동합니다. 단, 스타일시트를 패널 또는 에디터 창의 루트 VisualElement에 연결해야 합니다. 인스펙터 UI에서는 작동하지 않습니다.

인스펙터에서 :root 유사 클래스는 인스펙터 창의 루트 VisualElement에서만 활성화됩니다. 스타일시트를 연결하는 하위 트리는 인스펙터 계층 구조에서 훨씬 아래에 있습니다. 따라서 :root 선택자는 하위 트리의 어떠한 부분과도 매칭되지 않습니다.

커스텀 인스펙터 UI에 대한 :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은 컨테이너에서 상속되므로 해당 스타일은 컨테이너의 스타일에서 정의된 모든 변수를 호출할 수 있습니다.