less 样式嵌套、模块化、宏

火狐浏览器，谷歌浏览器（web环境中的页面才能正常打开）

直接引入less.js（也可以使用webpack工具对less进行打包）

<html>
	<head>
		<link rel="stylesheet/less" type="text/css" href="index.less">
	</head>
	<body>
		<h1>less</h1>
		<div>
			<div class="li">1</div>
			<div class="li">2</div>
			<div class="li">3</div>
			<div class="li">4</div>
		</div>
	</body>
	<script src="less-2.5.3.min.js" type="text/javascript"></script>
</html>

core.less

.color(@color;@padding;@margin) {
	background:#D8D8D8;
	color:@color;
	margin:@margin;
	padding:padding;
}
body {
	.color(#FFFF00;20px;20px);
}

index.less

@import "core.less";
.li{
	color:#FFFFFF;
	&:nth-child(4) {
		background:	#585858;
	}
	&:nth-child(2) {
		background:	#707070;
	}
	&:nth-child(3) {
		background:	#808080;
	}
	&:nth-child(1) {
		background: #B0B0B0;
	}
}

 

版权声明：本文为phone13144830339原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。