USS Properties types

Built-in vs Custom properties

When using USS, you can specify values for built-in VisualElement properties or for custom properties in your UI code.

In addition of reading their values from USS files, built-in property values can be assigned to in C#, using the C# properties of VisualElement. Values assigned in C# override values from a Unity style sheet (USS).

You can extend USS with custom properties. Custom USS Properties require the -- prefix.

Property values

This section lists the supported types.

Length

UI Toolkit supports pixels (px) and percentages (%) as units of measurement for length. Pixel values are absolute, while percentages are usually relative to the element’s parent.

Examples:

• width:200px; expresses a width of 200 pixels.
• width:50%; expresses a width of half of the parent element’s width.

It is important to specify the unit of measurement. If you do not specify a unit of measurement, UI Toolkit assumes that the property value is expressed in pixels.

Note: 0 is a special value that doesn’t require a unit of measurement.

Numeric

Numeric values are expressed as either floating points or integer literals. For example, flex:1.0.

Keywords

Specific keywords are supported for some built-in properties. Keywords provide a descriptive name instead of a number. For example: position:absolute. All properties support the initial global keyword which resets a property to its default value. See supported properties for a list of keywords.

Color

UI Toolkit supports the following literal color values and functions:

• A Hexadecimal value: #FFFF00 (rgba one byte per channel), #0F0 (rgb)
• The RGB function: rgb(255, 255, 0)
• The RGBA function: rgba(255, 255, 0, 1.0)
• Color keywords: blue, transparent

Assets

You can reference Assets with either the resource() or url() functions. For example, specify background-image: resource("Images/img.png") to specify the img.png in the Images directory as the background image. Referenced Assets are resolved during import.

The resource() function accepts files located under either the Resources folder or the Editor Default Resources folder, with the following caveats:

• If the file is located under the Resources folder, do not include the file extension. For example: background-image: resource("Images/my-image").
• If the file is located under Editor Default Resources, you must include the file extension. For example: background-image: resource("Images/default-image.png").

Additionally, when loading Textures, the resource() offers a convienient way to deal with High DPI/Retina screens. If a Texture with an identical file name and a @2x suffix exists at the same location, Unity loads it automatically depending on the screen DPI. For example, if you use resource("myimage") in USS, Unity loads either Resources/myimage.png or Resources/myimage@2x.png.

The url() function expects the file path to be relative to either the project root or the folder containing the USS file. You must include the file extension. In the following examples, the USS file is located at Assets\Editor\USS and the thumb.png background image is located at Assets\Editor\Resources:

• Use this example for a relative path, based on the location of the USS file: url("../Resources/thumb.png");
• Use one of the following examples for an absolute path, based on the location of the project: url("/Assets/Editor/Resources/thumb.png"); or url("project:/Assets/Editor/Resources/thumb.png"); or url("project:///Assets/Editor/Resources/thumb.png"); For example: background-image: url("Images/my-image.png").

Strings

Use quotes to specify a string value. For example: --my-property: "foo".

• 2018–11–16 Page amended