less 初学 测试demo

1.配置Apache环境，

2.下载less包

3.新建less.less文件，引入到html页面的header

4.html引入less包,一定要放在less引入的下面

<link rel="stylesheet/less" type="text/css" href="style/less/less.less">
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>

5.编写html源码

<div id="header">
	<div class="left"></div>
    <div class="middle">
    	<div class="responsive"></div>
    </div>
    <div class="right"></div>
</div>

6.编写less源码

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,form, fieldset, legend, button, input, textarea,th, td {margin: 0;padding: 0;}
body,button, input, select, textarea{font: 12px/1.5 tahoma, arial;}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var{ font-style: normal; }
code, kbd, pre, samp { font-family: courier new, courier, monospace; }
small { font-size: 12px; }
ul, ol { list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
legend { color: #000; }
fieldset, img { border: 0; }
button, input, select, textarea { font-size: 100%; }
th{ font-weight:normal;}
.clears{clear:both;font-size:0;line-height:0;height:0;}
/*设置float属性*/
.float(@float){
	float:@float;
}
/*设置宽高*/
.all(@width:100%,@height:100%){
	width:@width;
	height:@height;
}
/*设置背景颜色*/
.bg(@bgcolor){
	background:@bgcolor;
}
/*设置margin的值*/
.margin(@top:0,@right:0,@bottom:0,@left:0){
	margin:@top @right @bottom @left;
}

#header{
	.all(100%,300px);
	.left{
		.all(200px,300px);
		.float(left);
		.bg(blue);
	}
	.middle{
		.margin(0,200px,0,200px);
		.responsive{
			.all(100%,300px);
			.bg(red);
			.float(left);
		}
	}
	.right{
		.all(200px,300px);
		.float(left);
		.bg(yellow);
	}
}
@media screen and (max-width:700px){
	#header{
		.left{
			.all(100%,100px);
		}
		.middle{
			.all(100%,100px);
			.margin;
			.responsive{
				.all(100%,100px);
			}
		}
		.right{
			.all(100%,100px);
		}
	}
}
.scrollarea{
	.all;
	.scroll{
		.all;
	}
	.bg_1{
		.bg(red);
	}
}

7.总结：

   第一次运行的时候，一直报xmlhttprequest的错误，通过询问同事才知道，需要放在Apache环境下，

   第一次完美运行时，瞬间感觉less很强大，很实用，

   接下来一定好好深入的研究，争取更少量的代码，完成更多的样式