CODEWITHSUNDEEP
gridless
Kasara
Kasara

Reputation: 275

less css grid settup

I'm creating less grid sistem and i dont know how to optimise grid.less If i chouse @gridColumns: 14; i need to add new lines in grid.less, maybe there is anothes option to automate this?

Variables.less

@gridColumns: 12;
@gridWidth: 62.5em;
@gridGutterWidth: 1.8em;

@grid.less

.l-1         { .grid(1); }
.l-2         { .grid(2); }
.l-3         { .grid(3); }
.l-4         { .grid(4); }
.l-5         { .grid(5); }
.l-6         { .grid(6); }
.l-7         { .grid(7); }
.l-8         { .grid(8); }
.l-9         { .grid(9); }
.l-10        { .grid(10); }
.l-11        { .grid(11); }
.l-12        { .grid(12); }

@mixins.less

.grid(@num) {
width: (100% / @gridColumns) * @num;
position: relative;}

Upvotes: 2

Views: 453

Answers (1)

Bogdan Rybak
Bogdan Rybak

Reputation: 2117

The only sensible way of doing it using LESS is using a recursive mixin like Twitter Bootstrap.

.spanX (@index) when (@index > 0) {
  .span@{index} { .span(@index); }
  .spanX(@index - 1);
}
.spanX (0) {}

.span (@columns) {
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

Upvotes: 1

Related Questions