Use variables to define common values to be used across the stylesheet and so they can be exposed for sharing and theming. These variables are used only during build-time and have no impact on the resulting runtime code.
If you wish to use dynamic variables, and to change their values during runtime, see css custom properties (vars) for further details.
Variables are scoped to the specific stylesheet and do not conflict with variables from another stylesheet.
Use the syntax
:vars to define variables, and apply them with a
Any var defined in a stylesheet is exported as a named export and can be imported by other stylesheets.
Imported variables are not exported from the stylesheet that has imported them. They can be imported only from the stylesheet in which they are declared.
You can set the value of a variable using another variable.
You can use Stylable custom types when defining a variable to group multiple values under a shared context. This gives you a better way to define and manage variables in your stylesheet.
Stylable does this by utilizing a type function in the variable definition and passing additional arguments to the
By default, Stylable exposes two types of variables that are available globally and do not require a special import:
stMap function to provide an interface similar to a map. You can group variables by context and retrieve them by key.
Its definition is comprised of key/value pairs with a space as a delimiter between them, and a comma as a separator between pairs.
stArray function to provide an interface which is similar to an array. This enables you to group variables by context and retrieve them by their index.
Its definition is comprised of values that are zero-based and comma separated.
Stylable also offers a custom variable type,
stBorder, that must be imported from the
stBorder accepts three arguments,
color in that order. When using the type, you can either invoke the entire border definition (by not passing an additional argument), or specific parts of it, according to their key.
stBorder is just the first of future custom variable types that will be available in Stylable.