Custom CSS attributes while using LESS?

Question

I have been using SASS for a while now, and one thing I really like is how I can use it for my FlashBuilder projects also, namely that is supports custom CSS attributes, like 'embedAsCFF' and 'unicodeRange'.

I'm trying out LESS for the first time, and it will not let me compile to CSS while using these two custom attributes:

    embedAsCFF: true;
    unicodeRange: U+0021, U+0023-U+0026, U+0028-U+002a, U+002c, U+002e-U+0039, U+0040-U+005d, U+0061-U+007d;

I receive a 'Less Compilation Error: Syntax Error...'

Any LESS users know how I need to add in support for these custom attributes? Thanks in advance.

Answer 1

Update: This issue will be resolved in the release of LESS 1.4.2

Not a Custom Name but a Format Issue

It appears on my experimenting that the issue is really the fact that you are using capital letters in the property names (not that they are custom attributes themselves). Capital letters are apparently not supported by LESS. In other words, these work:

embedascff: true;
embed-as-cff: true;
unicoderange: U+0021; //etc.
unicode-range: U+0021; //etc. 

But this does not:

Color: red;

I have not for certain isolated where in the actual LESS code itself this might be fixed (if it can be fixed for the way LESS handles the property rules). I suspect the cause is in the parser.js file lines 1578-1584 (as of this writing), which are:

property: function () {
  var name;

  if (name = $(/^(\*?-?[_a-z0-9-]+)\s*:/)) {
    return name[1];
  }
}

This seems to be filtering out allowing for capital letters. I don't know what the consequences would be if that regular expression was changed to allow for them.