Values and types
Jess uses types as defined by CSS, with a few modifications and additions.
References
CSS value types
Keyword
- Type:
<keyword> - Example:
small,medium,large
String
This is called Quoted as a Jess node to disambiguate from the JavaScript String constructor.
- Type:
<string> - Example:
"A string"
Number
- Type:
<number> - Examples:
1,1.1,.1
Dimension
- Type:
<dimension> - Examples:
2px,100ms,10%
Color
- Type:
<color> - Example:
#FFF,red,rgb(100, 100, 100)
Url
A URL is a unique value that's different from a CSS function because it has special parsing rules. In addition, in Jess, URLs can be re-written to a different value based on compiler settings.
- Type:
<url> - Example:
url(./image.png)
List (space-separated)
- Type:
<number>+ - Example:
1 2 3
List (comma-separated)
- Type:
<number># - Example:
1, 2, 3
Curly list
A list passed as one value, wherever a comma would otherwise separate arguments: {1px, 2px}.
The braces are syntax, not part of the value, so a curly list is written as what it holds
(a: {1, 2} writes a: 1, 2) and a function or mixin reads it as one list argument
($length({1, 2, 3}) is 3). {} is the empty list, and a trailing comma makes a one-item comma list
({1,}). A list a variable holds is written as its items in a CSS call too (foo($l, 3) with
$l: {1, 2} is foo(1, 2, 3)). The empty list has no CSS spelling: writing it as a declaration value or
into a CSS call is an error.
- Type:
<list> - Example:
$ > shadow({0 1px 2px black, 0 0 4px red});
This is the CSS syntax for a comma-containing argument
(CSS Values 5 §3.1.1;
CSS Custom Functions and Mixins 1:
--max-plus-x({ 1px, 7px, 2px }, 3px)). In a plain CSS call, such as a custom function, Jess writes the
braces as you wrote them. The same list is written ~(1px, 2px) in Less and (1px, 2px) in Sass, and
all three parse to the same node. A map is a collection, #{ … }, never { … }.
Jess value types
Bool
- Type:
<boolean> - Example:
true,false
Nil
The value nil is conceptually similar to null in JavaScript. It's a value that represents the absence of a value, or sometimes returned by functions as a lack of a result. The reason it is distinct from null is because it can still have other Jess node properties and doesn't have a literal value of null when accessed by JavaScript.
- Type:
<nil> - Example:
nil
Collection
By design, a collection sits in a perfect syntax space between a JS object and a set of CSS rules. A collection holds data: key/value entries, where each key is a value matched by equality, and never a variable declaration or a rule. (A block that declares variables or contains rules is an anonymous mixin instead.) This is explained in the Namespaces, collections, and maps section.
- Type:
<collection> - Example:
#{
a: 1;
b: 2;
c: #{
d: 3;
e: 4;
f: 5;
}
}
General
General values keep source-like value text when Jess does not need a more specific node type.
- Type:
<general>
Type modifiers
Exact list length
A space-separated list of exactly 2 numbers.
- Type:
<number>+{2} - Example:
1 2
A comma-separated list of exactly 2 numbers.
- Type:
<number>#{2} - Example:
1, 2
List length range
A space-separated list of 2 to 4 numbers.
- Type:
<number>+{2, 4} - Example:
1 2 3
A comma-separated list of 2 to 4 numbers.
- Type:
<number>#{2, 4} - Example:
1, 2, 3
A value within a range of values
- Type:
10px..20px - Example:
15px