Order of file references

[brgrz]

In the grid.less file the flawless-grid and useful-mixins are imported after the variables specification which results in

variable @gridsystem-width is undefined on line 12 in file 'stylesheets/grid.less': [11]: @min-width: 400px; // minimum width of the grid (any css unit) Default = 400px [12]: @max-width: @gridsystem-width; // this is the maximum width of the grid (any css unit) Default = @gridsystem-width. NOTE when @total-width is set to 100% this can be used to constrain the grid to any size. ------------^ [13]: @width:95%; // Just ensures the grid never gets smaller than X% and fits nicely at small screen sizes. Default = 95%

when using DotLess compiler.

[laughingwithu]

I don't use dot.less but I have reordered the file so that flawless-grid and useful-mixins are called first and then the variables are specified. Let me know if this fixes the issue.

[brgrz]

Because the flawless-grid requires the first three variables in grid.less those have to come first, then the two import and then the min-wdith,max-width and width variables (because max-width uses gridsystem-width). That's the only way it works for me with dotless.

////////////////////////
// Flawless Semantics //  by Sean Steindl aka laughingwithu
///////////////////////

// Defaults that you can freely override. @gutter-method can be either 'margin' or 'padding'.
@columns: 12; // specifies the number of columns in the grid: Default = 12
@column-width: 60; // this formula works out the width of columns in the grid. Default = 30
@gutter-width: 20; // The gap between elements in the grid (any css unit) Default = 60

///////////////////
// LOAD THE GRID //
///////////////////

@import "grid/flawless-grid.less"; // loads the grid 
@import "grid/useful-mixins.less"; // loads several useful mixins and calculations required by semantic.gs

// Variables specific to the .widths() mixin
@min-width: 400px; // minimum width of the grid (any css unit) Default = 400px
@max-width: @gridsystem-width; // this is the maximum width of the grid (any css unit) Default = @gridsystem-width. NOTE when @total-width is set to 100% this can be used to constrain the grid to any size.
@width:95%; // Just ensures the grid never gets smaller than X% and fits nicely at small screen sizes. Default = 95%

[laughingwithu]

I believe this issue will be fixed in 1.1.2 but will need confirmation that it has been for dot.less. Will be closing it for now, but if it is still an issue will reopen it.