less是什么?
css预处理器。升级版的css。
有什么优点？
赋予了动态语言需要具备的变量函数if for之类的把。
那怎么使用运行less代码啊?
第一：
先引入less.css与less.js运行，然后是要预编译。
在那里预编译？
记住哈，编译之前是先.less文件的。
然后编译后改成.css文件哈(考拉软件是识别less文件的哈，编译转换成css文件就行了哈。)
开源中国 : tool.oschina.net/less
这个网站上编译。
或者是在下载考拉软件来编译哈.
考拉客户端: koala-app.com/index-zh.ht…
然后直接把编译完成的文件.放在.css文件中，然后是运行就行了.
注释：
多行注释会被编译，凡是编译的什么.less都会出现在编译完成后的css文件中。
单行注释不会被编译，所以不会出现在编译完成后的.css文件中。
再次提醒一下，先less文件，编译后才成为css文件的哈，不是less文件编译不了的啊！！！！！
变量:
这里的less语法的变量与jsphp什么的变量差不多的啊。
格式:@变量名:值;
定义的哈。
怎么使用?
@变量名;
变量与变量之间可以像话赋值。
@h:@w;
5.和js一样less中的变量也有全局变量和局部变量
定义在{}外面的就是全局的变量, 什么地方都可以使用
定义在{}里面的就是局部变量, 只能在{}中使用
注意定: less中的变量是延迟加载的, 写到后面也能在前面使用
6.和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响
和js一样在访问变量时会采用就近原则
我举个例子吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*编译前的less文件*/
/*@h:400px;
@w:300px;
@c:red;
.box1
{
width: @w;
height: @h;
background: @c;
margin-bottom: 20px;
}
.box2
{
width: @w;
height: @h;
background: @c;
}*/
/*编译后的css文件*/
.box1 {
width: 300px;
height: 400px;
background: #ff0000;
margin-bottom: 20px;
}
.box2 {
width: 300px;
height: 400px;
background: #ff0000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
