几个学习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');
}亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
