less.css基础学习，陆续更新中

//基础
//概念:动态样式语言，有很多语言的特性：变量，函数，运算等

//变量：通过一个简单的@+字母，数字下划线等，但不能以数字开头,不能关键字，保留字等
//注意less.css是全局变量，除在函数内

//例子,创建赋值，然后计算等操作
@num:20px;
@numCount:@num+10px;

//调用
.div{
width:@numCount+70px;
height:10px*@num;
background-color: red;
//当要获取当前这个对象时，使用如下:
&{
padding:0 @num;
}
//作用域，当这个标记在另一个标记内的时候，通过嵌套方式，创建
nav:after{
content:@var;
display:block;
color:@_color;

}
}
//当编译完之后的结果如下:
//将变量定义成其他值
@font:'i is abc';
@var:@font;
@_color:#fff;

//当在文件中出现至少2个相同的变量时，会采用“按需加载方式”进行加载，如下

@font1:@font2;
@font2:5px;

a{
font-size:@font1;
}
@font1:@font2;
@font2:23px;

//执行顺序是这样的
//当遇到2个相同的变量时，会离它最近那个选择使用，这种机制与JS里面的访问函数的机制是类似的:从上到下，从左到右方式

//混合操作
//首先定义个通用的类(id也可以)，然后通过这个类在其他类中调用你写的属性内容

.borClass{
border:1px solid blue;
margin-top:@num;
}
#borClass{
padding:0 @num;
}
.div{

nav:after{
.borClass;
#borClass;
.Class1(10px);
.Class2;
.wrap;
}
}
//函数：重复使用，对于很多情况下需要使用相同的数据时，就可以创建一个函数体
//不带参数
.wrap(){
margin-left:@num
}
//参数
.Class1(@c){//注意:此处的@c是布局变量
padding:@c @num;
//计算
width:@c+@num

}

//默认值
//注意：当创建一个带默认参数时，在调用这个函数，是不需要加括号的
.Class2(@c:@num){
height:@num+30px;
}

编译后的.css如下

.div {
width: 100px;
height: 200px;
background-color: red;
padding: 0 20px;
}
.div nav:after {
content: 'i is abc';
display: block;
color: #ffffff;
}
a {
font-size: 23px;
}
.borClass {
border: 1px solid blue;
margin-top: 20px;
}
#borClass {
padding: 0 20px;
}
.div nav:after {
border: 1px solid blue;
margin-top: 20px;
padding: 0 20px;
padding: 10px 20px;
width: 30px;
height: 50px;
margin-left: 20px;
}

//编译less: http://koala-app.com/index-zh.html#download