Properties get some special treatment during JSS processing.
Underlines in properties ...
... are converted to -. This makes it possible to avoid quotes in some cases.
Sample:
background_color: "red"
produces:
background-color: red;
Note that background-color:"red" would produce a JavaScript error because - is not allowed in property names. Use an underscore or quote the property.
Comma separated list ...
... is interpreted as "multiple properties with the same value".
Sample:
"top,left,right": 10
produces:
top: 10px;
left: 10px;
right: 10px;
Properties beginning with & ...
... are interpreted as "variants" of the parent property.
Sample:
a: {
}"&.selected": {
color: "red"
}
produces:
a.selected {
color: red;
}
while
a: {
".selected": {}color "blue"
}
produces:
a .selected{
color: blue;
}
Notice the space between "a" and ".selected" in the last CSS defintion. <a class="selected">...</a> will be displayed in red while <a><div class="selected">...</div></a> will be displayed in blue.
Properties ending with _ or - and objects as value ...
... will generate concatenated CSS property names for all properties of the value objects properties.
Sample:
background_: {
color: "red",
image: "url(...)"
}
produces:
background-color: red;
background-image: url(...);
Special Properties
The JSS processor currently has special treatments for the following properties:
- box-shadow
- border-radius
- border-radius-topleft
- border-radius-topright
- border-radius-bottomleft
- border-radius-bottomright
- transform
- transition
In addition to output the property and its value those properties will produce special property names for Webkit and Mozilla and Internetexplorer.
Sample:
border-radius-bottomright:5
produces
border-radius-bottomright: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-right-radius: 5px;
-ms-border-bottom-right-radius: 5px;