StyleSheetExtension : how to extend bootstrap classes with LESS

Help / Discuss
1

I created an XWiki.StyleSheetExtension object with the following LESS code, which works just fine. Applying myClass to an element does indeed apply the CSS styles defined by the classes myClass1 and myClass2 :

.myClass1 {
  /* some CSS style */
}

.myClass2 {
  /* some more CSS style */
}

.myClass {
  &:extend(.myClass1, .myClass2);
}

Now, I’d like to create a class that extends the bootstrap classes table-bordered, table-striped, table-condensed and table-hover. Something like :

.myClass {
  &:extend(.table-bordered, .table-striped, .table-condensed, .table-hover);
}

I quite often apply those 4 classes to tables, so I’d like to have a more concise way to do this, e.g. I’d like to have to apply only 1 class (myClass) instead of all 4.

But it doesn’t work. I guess LESS doesn’t know where to find those classes (which are defined in skins/flamingo/less/bootstrap/tables.less).

Any idea how to make it work ?

2

I think that is not possible.
But with Javascript I think you can do the following:

First delete a style expression (or simple a class) - regardless of where it was defined from.

This can be done by something like

       function deleteCSS(selektor) {
        console.log("seachCSS: selektor=",selektor);
          var rules = {};
          for (var i = 0; i < document.styleSheets.length; ++i) {
              var cssRules = document.styleSheets[i].cssRules;
              for (var j = 0; j < cssRules.length; ++j)
                  if (cssRules[j]) {
                      if (cssRules[j].selectorText) {
                          var sel = cssRules[j].selectorText.toString();
                          if (sel == selektor) {
                              console.log("****************************rule to delete found, old: ", document.styleSheets[i].cssRules[j]);
                              document.styleSheets[i].deleteRule(j);
                              return
                          }
                      }
                  }
          }
          return 
       }

and redefine the rule.

3

So, basically that means that LESS &:extend() function can only extend classes defined within the same StyleSheetExtension.

4

Answering my own question.
In fact &:extend() isn’t necessary at all. After a few trials and errors, I managed to achieve my goal in a very simple way, using mixins :

.myClass {
  .table-bordered();
  .table-striped();
  .table-condensed();
  .table-hover();
}

Applying myClass to a table now applies all 4 bootstrap classes at once. Easy !