Expressions
An expression produces a value.
A literal is the simplest form: a number such as 42 or 3.14, a number with a unit such as 100px or 250ms,
the boolean true or false, a string with \{ } interpolation,
or a color.
The other forms are a reference, an operator or conditional expression,
a member access or index, a function or callback call,
an array or struct literal, and a macro such as @image-url or @tr.
Color Literals
Section titled “Color Literals”A color literal consists of # followed by 3, 4, 6, or 8 hexadecimal digits:
#rgb, #rgba, #rrggbb, or #rrggbbaa.
The digits are case-insensitive.
Any other number of digits is an error.
The digits specify the red, green, blue, and alpha channels, in this order. When the alpha channel is absent, the color is fully opaque.
In the 3- and 4-digit forms, each digit specifies a channel with the digit duplicated:
#18f is the same color as #1188ff.
A color literal evaluates to a value of type color.
Length Literals
Section titled “Length Literals”A length literal consists of a number directly followed by a unit, for example 120px.
export component Example inherits Window { Rectangle { width: 120px; height: 80px; background: #2a6e3f; }}The number may be fractional, as in 10.5px.
Length units include px, phx, cm, mm, in, pt, and rem.
A length literal evaluates to a value of type length.
References
Section titled “References”export component Example inherits Window { in property <color> tint; background: root.tint; Rectangle { background: root.tint; width: self.height; }}A property reference refers to a property.
It is a property name, optionally preceded by an element reference and a ..
The element reference is self for the enclosing element, parent for its parent,
root for the component’s root element, or an element id.
A name without an element reference follows the lookup rules:
it resolves to a local variable, an element id, or a property, callback, or function
reached by searching from the enclosing element outward to the root.
The name shall refer to a property of the referenced element.
When reading, a property reference evaluates to the value of the referenced property, and has that property’s type.
A reference may also name an enumeration value or a global’s property.
© 2026 SixtyFPS GmbH