There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Processing...
This may take a few seconds.

var

Syntax

var: (name) (value/expression) [session-storage|local-storage] [every (time)] [after (time)][, (name)...];

name = The name of the variable to declare or re-assign.

value/expression = The value of the variable. This is written in native JavaScript and must be a JavaScript expression.

session-storage = optional - only use this option when the variable is first declared - this also places the regular variable into session storage (see this page for more details of what session storage is: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage). Whenever the regular variable changes, it automatically updates in session storage too. Think of session storage as the place where the variable lives. It can be used as a reactive variable too.

local-storage = optional - only use this option when the variable is first declared - this also places the regular variable into local storage (see this page for more details of what local storage is: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage). Whenever the regular variable changes, it automatically updates in local storage too. Think of local storage as the place where the variable lives. It can be used as a reactive variable too.

 

The value can be a JavaScript string, number, boolean (true or false), array or object.

JavaScript expressions in the variable value can just be written as straight JavaScript.

Make sure that if you are assigning anything to a variable that converts to a string, such as {@data-myString}, that it is always wrapped in quotes, otherwise it will fail the JavaScript expression evaluation! (eg. var: "{@data-myString}";)

All ACSS variables on the right-hand side of the equation must be typed in their curly brackets and double-quotes if necessary. Note this is a change from version 2.4.0 and this has been implemented to speed up performance by being able to recognise items on the right-hand side quickly as being Active CSS variables.

Eg. taken and tampered with from the Tic Tac Toe example page:

var: player "X",
gameState ['', '', '', '', '', '', '', '', ''],
roundWon false,
roundDraw false,
 bondFilm "mostly all of them" after 1s,
clothes "unsympathetically thrown on with style and cufflinks",
dunnoWhatThisDoes ("{player}" == 'X') ? 'O' : 'X',
winners [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
Using ++ or --

From 2.4.0 these operators are supported, so as well as this:

var: count 0;
var: count {count} + 1;
var: count {count} - 1;

you can now also do this:

var: count 0;
var: count++;
var: count--;

See the Regular variables page for more information on their use.

A note on local-storage and session-storage

If a variable is referenced (eg. render: "{myVariable}") but hasn't been declared in ACSS with the var command, then local and session storage will be scanned automatically and if the variable is there then it will be grabbed from there for use. It will then be used like a regular variable, and will automatically be updated in local or session storage. That will be where the variable "lives".

To stop this automatic behaviour, simply declare the variable before use with the var command, but without local-storage or session-storage options.

But it isn't very difficult to use. If it's in local or session storage, you don't need to do anything other than just use it like a regular variable. If you need to declare it as a local or session storage right at the beginning, use the local-storage or session-storage options.

If you need to check whether or not it exists before you freshly declare it, you can do something like this, which declares the variables for local storage, but only if it can't be found anyway (remember - ACSS will look in local storage or session storage and use it from there if it can):

body:not-if-defined(myString):preInit {
    var: myString "starting value" local-storage;
}

body:not-if-defined(myObject):preInit { var: myObject {} local-storage;
}