几个学习Less的网站：（主体内容都差不多）

http://www.bootcss.com/p/lesscss/

http://www.lesscss.net/

http://www.css88.com/doc/less/features/


关于Less的安装方法有很多介绍，这里出于学习方便，使用Koala工具

今天主要学习的是Less中的变量，与其他语言中的变量一样，Less中的变量允许我们单独定义一系列的通用样式，然后在需要的时候调用，给代码维护也带来了方便。


需要注意的是，由于Less中的变量只能定义一次，实际上相当于是一个常量。


Less代码：

@charset"UTF-8";@nice-blue:#5b83ad;//这是一个变量@light-blue:@nice-blue+#111;/*这也是一个变量*/


CSS代码编译：

@charset"UTF-8";/*这也是一个变量*/


这里需要指出的就是Less中有关注释的两种不同用法，注释方法和Javascript中一样，所不同的是以//注释的注释内容不会编译成CSS内容，而以/**/注释的内容会自动编译成CSS的编译内容。


HTML代码：

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><linkrel="stylesheet"href="css/style.css"></head><body><divid="header">我就是我，颜色不一样的水果</div><pclass="text">MynameisLiLei!</p><divid="menu"></div><divid="img"></div></body></html>


Less代码

@nice-blue:#5b83ad;@aWidth:200px;@aHeight:200px;//引用定义好的变量#header{color:@light-blue;}#menu{width:@aWidth;height:@aHeight;background:@nice-blue+#f00;}


CSS代码

#header{color:#6c94be;}#menu{width:200px;height:200px;background:#5b83ad;}


这里需要特别提出对文件路径的引入，变量是怎么写的


Less代码

@p_w_picpaths:'../p_w_picpaths';#img{width:@aWidth+300;height:@aHeight+300;background:url('@{p_w_picpaths}/1.jpg');}


CSS代码

#img{width:500px;height:500px;background:url('../p_w_picpaths/1.jpg');}