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 the Custom Properties API. Custom Properties require the -- prefix.

Property values

This section lists the supported types.

Length

UIElements only supports the pixel (px) unit of measurement. If a unit of measurement is not specified, UIElements assumes that the property type is expressed in pixels. However, in future versions, when additional units are supported, the unit of measurement will be required. To avoid future compatibility issues, it is recommended that you specify px as the unit of measurement.

For example, a width of two hundred pixels should be expressed as width:200px;. Note that 0 is a special value that doesn’t require a unit of messurement.

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

UIElements 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)

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").

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").

For textures, if a file has a version with a @2x suffix, this file is automatically loaded for retina or High DPI screens.

Strings

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

---

• 2018–11–16 Page amended with limited editorial review