Stylable Variables
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.
important
Variables are scoped to the specific stylesheet and do not conflict with variables from another stylesheet.
#
Use in stylesheetUse the syntax :vars
to define variables, and apply them with a value()
:
#
Import variablesAny var defined in a stylesheet is exported as a named export and can be imported by other stylesheets.
important
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.
#
Compose variablesYou can set the value of a variable using another variable.
#
Advanced variable typesYou 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 value()
function.
#
Stylable native variable typesBy default, Stylable exposes two types of variables that are available globally and do not require a special import:
stMap
stArray
#
stMapUse the 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.
#
stArrayUse the 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.
#
Custom variable typeStylable also offers a custom variable type, stBorder
, that must be imported from the @stylable/custom-value
package.
stBorder
accepts three arguments, size
, style
and 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.
note
stBorder
is just the first of future custom variable types that will be available in Stylable.