Unable to use :extend on column classes

[iansoper]

When I try to use less :extend function with column classes that are generated by gridiron (ex: .col-md-6), the extend is ignored and the column declaration in the css doesn't have the element I'm trying to extend it to.

Example Input

/* this class is created by gridrion */
.col-md-6 {
   width: 50%;
}

div {
   &:extend(.col-md-6 all)
}

/* Should output this: */

.col-md-6, div {
    width: 50%;
}

/* Instead it outputs this: */

.col-md-6 {

}

[kevinmartin]

Hi @iansoper,

This seems to be a limitation in LESS (as explained in the references below). Try inverting it as explain here.

.col-md-6:extend(div) {}

The other solution is to compile GridIron first, rename the GridIron file(s) with a .less extension, then import those compiled GridIron files into your project. This is also explained in one of the references.

References:

• http://lesscss.org/features/#extend-feature-selector-interpolation-with-extend
• Extend dynamically-generated selectors less/less.js#1539
• Extend dynamically generated selectors (summary). less/less.js#2200
• :extend to extend dynamically generated classes? less/less.js#1325
• Can't extend a nested class (concatenated selector) less/less.js#1597

[iansoper]

Thanks @kevinmartin very helpful. I'll probably just precompile gridiron.