CSS LESS的终极网格

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS LESS的终极网格相关的知识，希望对你有一定的参考价值。

/*--- variables ---*/
@gridMaxWidth: 960;
@gridMaxCols: 16;
@gutter: 20;
@oneCol: (@gridMaxWidth - (@gutter * (@gridMaxCols - 1))) / @gridMaxCols;

/*--- mixins ---*/
#grid {
	.span-width(@num: 1) {
		width: (@oneCol * @num) + (@gutter * (@num - 1));
	}

	.indent(@num: 1) when (@num &gt; 0) {
		margin-left: (@oneCol * @num) + (@gutter * (@num + 1));
	}

	.indent(@num: 1) when (@num &lt; 0) {
		margin-left: (@oneCol * @num) + (@gutter * (@num - 1));
	}
}

/*--- base layout styles ---*/
.row {
	.cf(); // clearfix
	margin: 0 0 0 -@gutter;
	padding: 0;
}

.col {
	display: block;
	padding: 0;
	float: left;
	margin-left: @gutter;
}

/*--- generate grid classes ---*/
.loop(@gridMaxCols, span, 'gridSpan');
.loop(@gridMaxCols - 1, push, 'gridPush');
.loop(@gridMaxCols - 1, pull, 'gridPull');

以上是关于CSS LESS的终极网格的主要内容，如果未能解决你的问题，请参考以下文章