Version: 2020.3
USS Selectors

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 Toolkit supports style sheets written in USS (Unity style sheet). USS files are text files inspired by Cascading Style Sheets (CSS) from HTML. The USS format is similar to CSS, but USS includes overrides and customizations to work better with 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 {

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 파일을 수정하면 스타일 변경 사항이 즉시 적용됩니다.

The process of style application is transparent to a developer using UI Toolkit. Style sheets are re-applied automatically when needed (hierarchy changes, stylesheet reload).

규칙을 통한 스타일 매칭

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 Toolkit uses the following criteria to match a visual element with its style rule:

  • 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 속성 등과 같은 유사점을 발견할 수 있을 것입니다.

USS Selectors