mixins.less kolumny

Mały przykład jak wygenerować kolumny dla RWD

.generate-col-med(@columns, @prefix, @current: 1) when (@current =< @columns) {
  .col-@{prefix}-@{current} {
    width: (@current/@columns*100%);
  }
  .generate-col-med(@columns, @prefix, (@current + 1));
}

aby później wygenerować kolumny należy wywołać .generate-col-med

.generate-col-med(12, xm);

12 to numeracja spana, xm - nazwa która jest doklejona do stylu.

Poniżej podaję jak jest wygenerowany ostatecznie styl:

.col-xm-1 {
  width: 8.33333333%;
}
.col-xm-2 {
  width: 16.66666667%;
}
.col-xm-3 {
  width: 25%;
}
.col-xm-4 {
  width: 33.33333333%;
}
.col-xm-5 {
  width: 41.66666667%;
}
.col-xm-6 {
  width: 50%;
}
.col-xm-7 {
  width: 58.33333333%;
}
.col-xm-8 {
  width: 66.66666667%;
}
.col-xm-9 {
  width: 75%;
}
.col-xm-10 {
  width: 83.33333333%;
}
.col-xm-11 {
  width: 91.66666667%;
}
.col-xm-12 {
  width: 100%;
}

Teraz tylko sklejenie wszystkiego w całość np:

<div class="row">
    <span class="col-xm-2">pierwszy</span>
    <span class="col-xm-10">drugi</span>
</div>

.row^*

.row {
	*zoom: 1;
	width: 100%;
	overflow: hidden;
	&:before,
	&:after {
		content: " ";
		display: table;
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}

Oczywiście .generate-col-med można rozbudować o odstępy między kolumnami (dodać marginesy) ale to już na inny post 😉