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(User Interface) Allows a user to interact with your application. More info
See in Glossary code.

In addition of reading their values from USS files, you can assign built-in property values 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 pixelsThe smallest unit in a computer image. Pixel size depends on your screen resolution. Pixel lighting is calculated at every screen pixel. More info
See in Glossary (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’s 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 project assets such as fonts and textures from your USS files. For example, you might reference a texture to use as the background image for an element.

To reference an asset, you can use either the url() function or the resource() function. Referenced Assets are resolved when the style sheet is imported.

For example, the style declaration below uses the resource() function to reference a texture asset named img.png in the Images directory, and specify it as the background image.

`background-image: resource("Images/img.png");

Unity recommends using url() function in most cases. However, the resource() function supports automatically loading different versions of image assets for different screen densities.

Referencing assets with the url function

When you reference an asset with the url() function, the path you specify can be relative or absolute:

• Relative paths must be relative to the folder that contains the USS file that references the asset.
• Absolute paths are relative to the project.

The path must include the file extension.

For example, let’s say your project has a USS folder that contains all of your style sheets, and a Resources folder that contains all of your image assets.

Assets
  └─ Editor
      └─ Resources
      └─ USS

To reference an image named thumb.png, you can use one of the following paths:

Relative path	Absolute path
url("../Resources/thumb.png")	url("/Assets/Editor/Resources/thumb.png") url("project:/Assets/Editor/Resources/thumb.png") url("project:///Assets/Editor/Resources/thumb.png")

Referencing assets with the resource function

The resource() function can reference assets in Unity’s resource folders (Resources and Editor Default Resources). You reference an asset by name.

• If the file is in the Editor Default Resources Resources folder, you must include the file extension.
• If the file is in the Resources folder, you must not include the file extension.

For example:

Path to file	Reference syntax
Assets/Resources/Images/my-image.png	resource("Images/my-image")
Assets/Editor Default Resources/Images/my-image.png	resource("Images/default-image.png")

Referencing image assets for High DPI/Retina screens

If you need to support screens with different screen densities (DPI), the resource() function allows you to load the correct versions of texture assets automatically.

You have to:

• Make sure that the high DPI versions of your textures have a @2x suffix in their file names. For example the high DPI version of myimage.png should be myimage@2x.png
• Place the regular and high DPI versions of the texture assets in the same project folder.

When Unity loads the asset, it automatically chooses the correct version for the current screen DPI.

For example, if you use resource("myimage") in USS, Unity loads either Resources/myimage.png or Resources/myimage@2x.png.

Strings

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