Introduction to USS built-in variables

USS built-in variables specify default values for Editor and runtime UI. You can use these variables in your own USS to match your custom interfaces with Unity style.

The name of each built-in variable indicates how and where the variable is used. A variable name consists of one or more parts, separated by hyphens. Each part consists of one or more words separated by underscores.

--unity-{group}-{role_and_control}-{sub_element}-{pseudo_state_sequence}

Each part of the name shows the types of USS rules that use the variable.

• Group: The kind of data the variable represents.
• Role/Control: A conceptual grouping for the elements the variable affects.
• Sub-Element: An element or control the variable affects.
• Pseudo States: Lists the states Unity uses the variable for.

例えば、変数名は以下のようになります。

--unity-colors-button-text-hover

Unity が変数をどのように使用するかについては、以下の通りです。

	値	意味
Group	colors	Represents color data.
Role/Control	button	Affects buttons.
Sub-Element	text	Affects text. Its group is colors, so it affects text color.
Pseudo-States	hover	Applies to elements when the mouse pointer hovers over them.

This USS built-in variable changes the color of button text when a user hovers over the button.

Group

The group specifies what kind of data the variable represents. Each group has several possible sub-elements.

The variable names have the following groups:

Group	Used for
colors	background-color や border-color などの色のプロパティ。
metrics	寸法や形状を制御するプロパティ。例えば、 border-radius、border-width、margin、padding
icons	標準的な Unity のアイコン画像。

Role and Control

Role and Control (ロールとコントロール) は、概念的に要素をグループ化する 2 つの方法です。

• Role refers to a group of elements that have the same purpose, regardless of what type each element is. For example, the error role includes all elements that display error messages to users.
• Control refers to a group of elements of the same type, regardless of what they do. For example, buttons includes all buttons in the Editor.

Each variable has either a role or a control.

The variable names have the following roles and controls:

Roles

Role	説明
default	文字色、背景、余白などのデフォルトのスタイル設定。
alternated_rows	表形式のデータを交互に行の色を変えて表示する要素。例えば、リストビューのリストアイテムなど。
error	エラーの状態をユーザーに伝えるための要素。
highlight	UI のハイライト部分。例えば、テキストの選択部分や、ツリービューでの選択項目など。
link	UI のパーツ (通常はテキスト) でクリックできるリンク。これは、クリックされていない状態です。
play_mode	エディターが再生モードのときに表示される要素。
visited_link	UI のパーツ (通常はテキスト) でクリックできるリンク。これは、クリックされていない状態です。
warning	ユーザーに警告メッセージを伝えるための要素。

Controls

制御	説明
app_toolbar	Unity のメインツールバー
app_toolbar_button	Unity のメインツールバーのボタン
box	Editor UI で要素をグループ化するためのボックス
button	ツールバーを除く UI のボタン
dropdown	ドロップダウンリストやメニュー
helpbox	ヘルプ情報を表示するボックス
input_field	テキストや数値を入力するフィールド
label	エディター UI のテキストラベル
object_field	オブジェクトの値に使用されるフィールド。例えば、ゲームオブジェクトやアセットのプロパティ値など。
popup	ポップアップメニューなどのポップアップコントロール
preview	プレビューを表示するためのビュー。例えば、メッシュやテクスチャなどのアセットのプレビューを表示します。
scrollbar_groove	ユーザーがスクロールバーのつまみをドラッグするスクロールバーの背景要素
scrollbar_thumb	スクロールバーのドラッグ可能なハンドル要素
slider_groove	ユーザーがスライダーのつまみをドラッグする際のスライダーの背景要素
slider_thumb	スライダーのドラッグ可能なハンドル要素
slider_thumb_halo	ユーザーがスライダーのサムをドラッグしたときに、サムの周囲に表示されるオーバーレイ
tab	タブコントロールのタブアイテム
toolbar	Unity のメインツールバー (app_toolbar) 以外のエディターツールバー
toolbar_button	エディターツールバーのボタン
window	エディターウィンドウ

Sub-Element

The sub-element is the part of an element that the variable affects. Together with a variable’s group, the sub-element shows what kind of data the variable represents.

例えば、変数名に colors グループと text サブ要素が付いている場合です。これは、Unity がテキストの色に影響を与えるスタイルでその変数を使用することを意味します。

The variable names have the following sub-elements:

Group	Sub-element	説明
colors
	background	要素の背景色
	border	要素の境界色
	border_accent	要素の内側の境界線の色を表します。たとえば、Inspector ウィンドウには、ツートンカラーの境界線があります。
	text	テキストを表示する要素の文字色
metrics
	margin_{left, top, right, bottom}	要素のマージン値
	padding_{left, top, right, bottom}	要素のパディング値
	border_{left, top, right, bottom}_width	要素のボーダー幅の値
	border_{left_top, left_bottom, right_top, right_bottom}_radius	要素の境界線の半径値
	width, height	要素の幅と高さの値

Pseudo-States

Pseudo-State (疑似状態) シーケンスは、Unity が変数を使用する UI 状態のリストです。

例えば、変数名に hover という疑似状態が付いている場合です。これは、ユーザーが要素にポインターを重ねるときに要素に影響を与えるスタイルの変数を Unity が使用するという意味です。

例えば、--unity-colors-toolbar_button-text-hover

一つの変数名に複数の疑似状態を持たせることができます。複数の疑似状態は、アンダースコア _ で区切られたアルファベット順に表示されます。

例えば、 --unity-colors-toolbar_button-text-focus_selected

Unity の変数名には、以下の疑似状態のすべての組み合わせが可能です。

Pseudo-state	説明
(なし)	通常の状態
checked	チェックボックスタイプのコントロールがオンです。
disabled	コントロールがオフです。
focus	コントロールにフォーカスがあります。
hover	ユーザーがコントロールにカーソルを重ねています。
inactive	A control doesn’t have focus
pressed	コントロールが押されました。
selected	コントロールが選択されました。

その他の参考資料

• Create USS variables
• USS built-in variable reference