Property Shortcuts

In addition to the main syntax, the Simple class also provides an extensive list of property shortcuts. These are shortened representations of common CSS properties, designed to make your styles more concise and easier to write.

For example, instead of writing 'background-color': 'red', you can use the bgc shortcut:

{
  body: {
    bgc: 'red'
  }
}

Below are all the available shortcuts and their corresponding CSS properties:

Adding custom shortcuts

You can easily add your own shortcuts, by adding second parameter to constructor.

Here is the example:

Simple.shorts.aic = 'animation-iteration-count';
Simple.shorts.atf = 'animation-timing-function';
const styles = [
   {'.some':{
      aic:'3',
      atf:'linear'
   }}
]
const simple = new Simple(styles)
console.log(simple.stylesheet())

The output:

.some {
   animation-iteration-count:3;
   animation-timing-function:linear
}