---
title: "Expressions"
description: "The expression forms and what they evaluate to."
---
import SC from '@slint/common-files/src/components/SC.astro';
import OnlyInSC from '@slint/common-files/src/components/OnlyInSC.astro';
import NotInSC from '@slint/common-files/src/components/NotInSC.astro';

<OnlyInSC>
An expression is a color literal, a length literal, an integer literal, an image literal,
a boolean value, an enumeration value, a struct literal,
an arithmetic, logical, unary, or conditional expression,
a property reference, or a field access. \{#sls.expr.forms}
</OnlyInSC>

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](../../property-types/strings/#string) with `\{ }` interpolation,
or a [color](#color-literals).
The other forms are a [reference](#references), an [operator or conditional expression](../operators/),
a [member access or index](../operators/#member-access-and-indexing), a function or callback call,
an array or struct literal, and a macro such as `@image-url` or `@tr`.

<SC>
Parentheses group a nested expression. \{#sls.expr.grouping}

## 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. \{#sls.expr.color.forms}

The digits specify the red, green, blue, and alpha channels, in this order.
When the alpha channel is absent, the color is fully opaque. \{#sls.expr.color.channels}

In the 3- and 4-digit forms, each digit specifies a channel with the digit duplicated:
`#18f` is the same color as `#1188ff`. \{#sls.expr.color.short-forms}

A color literal evaluates to a value of type `color`. \{#sls.expr.color.type}

## Length Literals

A length literal consists of a number directly followed by a unit, for example `120px`. \{#sls.expr.length.form}

```slint
export component Example inherits Window {
    Rectangle {
        width: 120px;
        height: 80px;
        background: #2a6e3f;
    }
}
```

</SC>

<OnlyInSC>
The number shall be integral: `10.5px` is an error. \{#sls.expr.length.integral}

`px` is the only unit.
A number literal with another unit is an error. \{#sls.expr.length.px-only}
</OnlyInSC>

The number may be fractional, as in `10.5px`.
Length units include `px`, `phx`, `cm`, `mm`, `in`, `pt`, and `rem`.

<SC>
A length literal evaluates to a value of type `length`. \{#sls.expr.length.type}

## Integer Literals

An integer literal is a whole number written without a unit, for example `42`. \{#sls.expr.int.form}

An integer literal evaluates to a value of type `int`. \{#sls.expr.int.type}

<OnlyInSC>
A number with a fractional part but no unit is an error. \{#sls.expr.int.fractional}
</OnlyInSC>

<SC>
## Image Literals

An image literal consists of `@image-url(`, a string literal in double
quotes, and `)`. \{#sls.expr.image.form}

```slint
export component Example inherits Window {
    in property <image> logo: @image-url("images/logo.png");
}
```

The string is the path of an image file: an absolute path, or a path
resolved relative to the directory of the `.slint` file that contains the
literal. \{#sls.expr.image.path}

An empty string evaluates to no image. \{#sls.expr.image.empty}

An image literal evaluates to a value of type `image`. \{#sls.expr.image.type}
</SC>

<NotInSC>
The path may also name a file on the compiler's include path, and an image
can also be loaded from a `data:` URI or a URL;
the [image type](../../property-types/images/) describes these forms and the
`nine-slice` argument.
</NotInSC>

<OnlyInSC>
The file shall exist, and hold a raster image in a format the compiler can
decode, such as PNG or JPEG.
An SVG image is an error: it has no pixels to decode until it is
rendered. \{#sls.expr.image.raster-only}

The string shall be a path: a `data:` URI or a URL is an
error. \{#sls.expr.image.path-only}

The `nine-slice` argument of full Slint is an
error. \{#sls.expr.image.no-nine-slice}
</OnlyInSC>

## References

```slint
export component Example inherits Window {
    in property <color> 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 `.`. \{#sls.expr.ref.form}

The element reference is `self` for the enclosing element, `parent` for its parent,
`root` for the component's root element, or an element `id`. \{#sls.expr.ref.element}

The predefined names `true` and `false` are references to the two values of type `bool`. \{#sls.expr.bool}

A name without an element reference follows the [lookup rules](../name-resolution/#lookup-rules). \{#sls.expr.ref.lookup}

The name shall refer to a property of the referenced element. \{#sls.expr.ref.target}

When reading, a property reference evaluates to the value of the referenced property,
and has that property's type. \{#sls.expr.ref.value}
</SC>

Without an element reference, a name may also resolve to a local variable, a callback, or a function.

A reference may also name an [enumeration](../structs-and-enums/#enums) value or a [global](../globals/)'s property.