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;