USS properties data types

When using Unity style sheet (USS), you can specify values for VisualElement properties in USS files. You can also assign property values in C#, using the C# properties of VisualElement. Values assigned in C# override values from a USS file.

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

This page introduces the supported data types.

USS data types define values and keywords accepted by USS properties.

Property	Description
<length>	Represents a distance value.
<number>	Represents either an integer or a number with a fractional component.
<integer>	Represents a whole number.
<color>	Represents a color. You can define a color with a #hexadecimal code, the rgb() or rgba() function, or a color keyword (for example, blue or transparent).
<resource>	Represents an asset in a Resources folder.
<url>	Represents an asset specified by a path. You can express it as either a relative path or an absolute path.
<length>{1,4}	Represents one to four options for properties that are sharthand for -top-, -bottom-, -left-, and -right- properties, such as padding-top, or border-top-width.
	1 length	Applies to all four properties.
	2 lengths	The first applies to -top- and -bottom-. The second applies to -left- and -right-.
	3 lengths	The first applies to -top-. The second applies to -left and -right-. The third is applied to -bottom-.
	4 lengths	Applies in this order : -top-, -right, -bottom-, -left-

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(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary 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 USS 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.

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

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

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