Variables

Reuse defined properties, values and options across the elements

Overview

Variables in TorusKit are similar to CSS variables or in another programming languages, acting as placeholders for reusable values or options. They allow you to define a value once and reuse it throughout your styles, reducing repetition and making your code easier to maintain.

Variables are identified by a $ (local) or $$ (global) symbol followed by the variable name and contain values enclosed in parentheses (). These values can include simple measurements like 1px or complex option definitions such as duration: 1s, easing: ease-out. Here are the difference between local and global variables:

  • Local Variables: Defined with a single $ and available only within the element where they are declared.
  • Global Variables: Defined with $$, these can be declared on a parent element and accessed by all elements with [data-tor].

Syntax

Variables are defined with a $ (local) or $$ (global), followed by a name and value inside parentheses.

Local variables

Local variables are defined with a single $ and are scoped to the element where they are declared.

Global variable

Global variables use double $$ and are accessible to all [data-tor] elements across the page.

Using a variable

To use a variable, reference its name in your property definition:

  • $: Indicates the value is a variable.
  • variable-name: A unique name for the variable.
  • values: The properties or settings stored in the variable.

Examples

This examples show how to use variables to define reusable values or options, making your code cleaner, more consistent, and easier to manage across multiple properties.

Local variables

Simple variable

This example uses a local variable $distance to define a simple, reusable value of 2rem. The variable is then applied to multiple properties in the hover trigger, which makes both elements to translate the same distance.

Hover
  • translateX($distance) moves the element horizontally by 2rem.
  • translateY($distance) moves the element vertically by 2rem, too.

More complex variable

This example defines a common local variable $options with animation settings (duration: 1s, direction: alternate, iterations: infinite) and reuses it across multiple properties, simplifying the code by avoiding repetitive option definitions.

Hover

Global variables

This example demonstrates the use of a global variable $$options, defined on the parent element with shared animation settings (duration: 1s, direction: alternate, iterations: infinite). The child elements inherit and use this global variable to simplify animation definitions:


scale

rotate

opacity

By defining $$options globally, the need to repeat animation settings in each child element is eliminated, making the code cleaner and more maintainable