less学习----less变量
一、什么是less
less是css的扩展。他扩展了变量、mixin、函数等功能，使得css代码写的更有效率、更爽（哈哈），本篇主要先介绍less的变量
二、less的变量
相信在写css的时候，你总会发现，你某些属性的值一直都是重复的，例如系统的背景颜色、logo的地址等等，
因此通过less 的变量，你可以将重复的值用一个变量保存起来，然后就直接用！！！
语法： @+变量名
例子：
@base-color:#ff0000;
.one {
background-color:@base-color;
color:#ffffff;
}
然后将其转化为css则为：
.one {
background-color:#ff0000;
color:#ffffff;
}
呀，没错，就只是直接替换而已，是不是很简单，
当然了，less变量不仅可以用来表示属性的值，还可以用来表示选择器、属性名称、URL等
首先是选择器：
@my-select : one ;
.@{my-select} {
background-color:red;
}
//编译后如下：
.one { background-color:red; }
实际上还是直接将变量替换成类名而已啦，只是在使用时需要注意格式为：@{变量}
属性名称:
@property :color
.one {
@{property}:white;
background-@{property}:red;
}
//编译后
.one {
color:white;
background-color:red;
}
属性名称也是同理，同时你还会注意到，变量可以替换到属性名称的一部分，background-color就是这样子啦
URL：
@url: "./styles"
.one {
background:url(@{url}/img/1.jpg)
}
//css引用
@import "@{url}/themes/font.less"
我们可以通过将路径的地址存储到变量中，可以直接替换掉图片或者css引用中的路径
在使用变量时，不仅可以存储上述各项信息，同时也可以用来存储变量名，是的，用变量来存储变量名（老套娃了，哈哈）
@a : "b";
@b : #ff0000;
.one {
background-color:@@a;
}
//编译后
.one {
background-color:#ff0000;
}
这样子看是不是很有趣多了。
下面讲述变量的特性（划起来，要考的）
变量是延迟加载的，无需提前声明
怎么理解呢，通过例子来最好理解了
@my-width : 100px;
@a : 10px;
.one {
width:@a;
}
.one {
width:@a;
}
@my-width : 100px;
@a : 10px;
上边两种写法都是可以通过，都能读取到变量的值
接着第二个是，有关于变量的作用范围，emm，就是在哪个括号就包括在哪里
.one {
width:@my-width;
@a:10px;
}
.two {
width:@a;//这里这里，找不到a变量
}
@my-width : 100px;
了解了变量的作用范围后，我们来看下一个，若变量在内外都定义了呢
@my-width : 100px;
.one {
width:@my-width;
@my-width:10px;
}
//编译后
.one {
width:10px;
}
less会从内到外去寻找变量，若里面找的到，那么就不考虑外边了，若里面没有，则向外找，有就替换，没有，那就继续往外，直至找不到
附上下一篇：less的嵌套规则
关于less的变量介绍就这么多了，本文是个人在学习中的笔记整理，那么是从哪里学的，当然是看文档，哈哈
