Support for css3 methods such as darken, lighten etc

[techyrajeev]

1. In the example I saw a helper method was created for shadeColor. Do I need to create helper methods for other css in built features such as darken, lighten etc? Also If I am using pre-processor functions like sass.
2. Is there any way I can use sass features in styles?

[krasimir]

In the example I saw a helper method was created for shadeColor. Do I need to create helper methods for other css in built features such as darken, lighten etc? Also If I am using pre-processor functions like sass.

Yep. You have to create manually helpers like darken and lighten. The main idea of CSSX is to provide a basic CSS experience in JavaScript.

Is there any way I can use sass features in styles?

I don't think so. At least I don't know about integration between Sass and CSSX.

Feel free to check the plugin option. CSSX works with PostCSS.

Also have in mind that CSSX supports expressions so we can use any sort of JavaScript manupulations. For example:

var styles = <style>
    p {
    color: {{ LightenDarkenColor("#0000FF", 20) }};
  }
</style>

var sheet = cssx();
sheet.add(styles);


function LightenDarkenColor(col, amt) {
  var usePound = false;
  if (col[0] == "#") {
    col = col.slice(1);
    usePound = true;
  }
  var num = parseInt(col,16);
  var r = (num >> 16) + amt;
  if (r > 255) r = 255;
  else if  (r < 0) r = 0;
  var b = ((num >> 8) & 0x00FF) + amt;
  if (b > 255) b = 255;
  else if  (b < 0) b = 0;
  var g = (num & 0x0000FF) + amt;
  if (g > 255) g = 255;
  else if (g < 0) g = 0;
  return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

results in:

p {
  color: #1414ff;
}