Does anyone here have any thoughts on why mixins.less from Twitter Bootstrap won’t compile using my additions below? Any thoughts would be appreciated! Thanks!
//in variables.less
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
//in mixins.less
.childSpanX(@parentIndex, @childIndex: 1) when (@parentIndex > @childIndex)
{
(~”> .span@{childIndex}”)
{
.childSpan(@parentIndex, @childIndex);
}
.childSpanX(@parentIndex, @childIndex + 1); // recurse
}
// fallback
.childSpanX(0) {}
.parentSpanX(@parentIndex) when (@parentIndex > 0)
{
(~”.span@{parentIndex} > .row-fluid”)
{
.childSpanX(@parentIndex, 1); //call child fcn
}
.parentSpanX(@parentIndex – 1); // recurse
}
// fallback to “break” the loop and avoid errors for no-match
.parentSpanX(0) {}
// output fcn
.childSpan (@parentColumns, @childColumns)
{
@parentSpanPixelWidth: (@gridColumnWidth * @parentColumns) + (@gridGutterWidth * (@parentColumns – 1));
@childSpanPixelWidth: (@gridColumnWidth * @childColumns) + (@gridGutterWidth * (@childColumns – 1));
width: percentage(@childSpanPixelWidth / @parentSpanPixelWidth);
}
…
.parentSpanX (@gridColumns);
// the goal of this is to output:
.span12 > .row-fluid > .span1 {
width: x%;
}
.span12 > .row-fluid > .span2 {
width: xx%;
}
…
.span12 > .row-fluid > .span11 {
width: xxxxxxxx%;
}
.span11 > .row-fluid > .span1 {
width: x%;
}
.span11 > .row-fluid > .span2 {
width: xx%;
}
// and so on…
