Less基础知识~~~实现css

首先献上我学习网址 http://www.bootcss.com/lesscss.html

就是通过less.js的调用，更好的实现css样式布局，更简易化。

最近看前端的职位要求需简单理解less之类的库，所以就先卖弄下学学。

 

<link rel="stylesheet/less" type="text/css" href="css/less.css" />
<script src="js/less.js" type="text/javascript" ></script>
<script type="text/javascript">
 less.watch();//客户端自动更新，也可以在在URL后面加上'#!watch'
</script>

 

<p class="pcon">颜色值</p>

<div class="tit"><h1>Less</h1><p>p标签定义 <a href="#">a标签样式</a></p></div>

<div class="border">上下左右边框</div>

<div class="box"><a href="#">调用继承属性</a></div>

 

@color:#f00;
@size:60px;
@weight:600;
@100px:100px;
@10px:-40px;
.pcon{color:@color;font-size:@size;font-weight:@weight;padding:@100px;margin:@10px;}

.tit{
    h1 {font-size:24px;color:#f0f;}
    p {font-size:14px;font-weight:600;
    a{font-size:30px;color:#333;&:hover {color:#F00;}} 
      }
}

.border{border:6px solid #999;padding:20px;margin-bottom:100px;}

.box a{font-size:@size;.border;color:@color;}