几个学习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代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="header">我就是我,颜色不一样的水果</div> <p class="text">My name is Li Lei!</p> <div id="menu"></div> <div id="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'); }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。