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’s built-in style sheets define USS variables that set default values for the Editor interface. You can use these variables in your own style sheets to ensure that your custom Editor extensions match Unity style. For details, see Built-in Unity variables.

CSS와의 차이점

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

다른 함수에서 USS 변수 호출

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

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

Unity doesn’t support this use of var().

루트 선택자에서 변수 선언

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

In Unity, declaring variables in :root works for Editor windows and runtime panels, provided you attach the stylesheet to the root Visual Element of the panel or Editor window. It doesn’t work for Inspector 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은 컨테이너에서 상속되므로 해당 스타일은 컨테이너의 스타일에서 정의된 모든 변수를 호출할 수 있습니다.