Unity style sheets (USS)

각 VisualElement에는 요소의 크기를 설정하는 스타일 프로퍼티와 화면에 요소를 그리는 방식(예: backgroundColor 또는 borderColor)이 포함되어 있습니다.

Style properties are either set in C# or from a style sheet. Style properties have their own data structure (IStyle interface).

UI 툴킷은 USS(Unity 스타일시트)로 작성된 스타일시트를 지원합니다. USS 파일은 HTML의 캐스케이딩 스타일시트(CSS)에서 영감을 받은 텍스트 파일입니다. USS 포맷은 CSS 포맷과 유사하지만, USS에는 Unity 작업을 향상하는 오버라이드와 커스터마이징 옵션이 포함되어 있습니다.

이 섹션에서는 USS, USS 구문, 그리고 CSS와의 차이점에 대해 설명합니다.

For a quick reference of supported USS properties, see the USS properties reference.

Unity 스타일시트의 정의

Unity 스타일시트(USS)의 기본 빌딩 블록은 다음과 같습니다.

• USS is a text file recognized as an asset. The text file must have the .uss extension.
• USS only supports style rules.
• Style rules are composed of a selector and a declaration block.
• 선택자는 스타일 규칙의 적용을 받는 시각적 요소를 식별합니다.
• 중괄호로 묶인 선언 블록에는 하나 이상의 스타일 선언이 포함됩니다. 각 스타일 선언은 프로퍼티와 값으로 구성됩니다. 각 스타일 선언은 세미콜론으로 끝납니다.
• 각 스타일 프로퍼티의 값은 리터럴이며, 파싱 시 타겟 프로퍼티 이름과 일치해야 합니다.

스타일 규칙의 일반적인 구문은 다음과 같습니다.

selector {
  property1:value;
  property2:value;
}

USS를 시각적 요소와 연결

You can attach a Unity style sheet (USS) to any visual element. Style rules apply to the visual element and all its descendants. Style sheets are also re-applied automatically when necessary.

Load StyleSheet objects with standard Unity APIs such as AssetDatabase.Load() or Resources.Load(). Use the VisualElement.styleSheets.Add() method to attach style sheets to visual elements.

EditorWindow가 실행되는 동안 USS 파일을 수정하면 스타일 변경 사항이 즉시 적용됩니다.

스타일 적용 프로세스는 UI 툴킷을 사용하는 개발자에게 투명하게 공개됩니다. 스타일시트는 필요한 경우(예: 계층 구조 변경, 스타일시트 재로드) 자동으로 다시 적용됩니다.

규칙을 통한 스타일 매칭

When you define a style sheet, you can apply it to a Visual Tree. Selectors match against elements to resolve which properties apply from the USS file. If a selector matches an element, the style declarations apply to the element.

예를 들어 다음의 규칙은 모든 Button 오브젝트와 매칭됩니다.

Button {
  width: 200px;
}

VisualElement 매칭

UI 툴킷은 다음 기준을 사용하여 시각적 요소와 스타일 규칙을 매칭합니다.

• Its C# class name (always the most derived class).
• A name property that’s a string.
• A class list represented as a set of strings.
• 비주얼 트리에서 VisualElement의 조상과 포지션

이러한 특성들이 스타일시트의 선택자에서 사용될 수 있습니다.

CSS에 익숙하다면 HTML 태그 이름, id 속성 및 class 속성 등과 같은 유사점을 발견할 수 있을 것입니다.