invalid Grid row margin

[janwidmer]

I am using the bootstrap-less-port with Webpack and Less version 3.10.1.

My custom grid setup looks like this:

@import "~bootstrap-less-port/less/_functions";
@import "~bootstrap-less-port/less/_variables";
@import "~bootstrap-less-port/less/mixins/_breakpoints";
@import "~bootstrap-less-port/less/mixins/_grid-framework";
@import "~bootstrap-less-port/less/mixins/_grid";

@import "~bootstrap-less-port/less/_grid";
@import "~bootstrap-less-port/less/utilities/_display";
@import "~bootstrap-less-port/less/utilities/_flex";

@grid-columns:                12;
@grid-gutter-width:          30px;

That works so far, but the generated css for the .row class looks like this:

It seems, that the problem is the - which is outside of the parenthesis in the file mixins/_grid.less in this code:

#make-row(@gutter: @grid-gutter-width) {
	display: flex;
	flex-wrap: wrap;
	margin-right: -(@gutter / 2);
	margin-left: -(@gutter / 2);
}

As soon as moving it inside the parenthesis, the calculation is done correctly during compiling of the less code.

Any idea, am I doing something wrong with my custom setup?

[seanCodes]

Can you verify that you’re compiling your Less with the math option set to always? (More info on the option here.)

always is supposed to be the default but I’d like to see what happens if you set it explicitly, just to rule it out as the cause.

[janwidmer]

Just figured it out the same time you answered :-)

My webpack less-loader had the option strictMath: true, set. Therefore it compiled the row styles like I described it above..

Would maybe be worth a hint that math values other than always could lead to unexpected behaviour..?

[seanCodes]

Glad to hear you got it figured out!

Yes, I'll update the readme and call that out as a requirement.

Did you set the strictMath option in the less-loader yourself or was the loader set up that way by default?

[janwidmer]

ok cool..

I looked at the example here: https://github.com/webpack-contrib/less-loader#examples and did not question the strictMath parameter..