Less学习（1）

写在开头的话：

月余前被问起会不会Less，当时就有想学这个css框架的念头，而在昨天，在前端乱炖上看到一篇LessCss的开篇介绍，忽然就有了一股立马去学的冲动，回到家后找了几篇文章看了下，初感觉比较容易入门，变量混合参数的写法都很容易让人接受。至于嵌套，目前而言，我个人并不喜欢这种写法。追梦说谷歌正在用c++写他们自己的Sass(据说类似Less的一种css框架)，更加让我坚定了学这个框架的想法。今天只看了文档的小半部分，明天空的话就继续喽。希望以后能在项目中用到吧，不过目前我们公司的话，希望不大，哈哈。

一、变量
定义

 @color:#e11921;

使用

a:hover{
　　color:@color;
}

编译后的结果：

 a:hover {  color: #e11921;}

注意点：
（1）变量的定义无需提前，也就是说，定义可以放在使用之后。比如：

 a:hover{
   color:@color;
 }
 @color:#e11921;

编译后的结果：

 a:hover {
   color: #e11921;
 }

（2）变量的作用域

 @bg:#cccccc;
 .wrap{
   @bg:#e5e5e5;
   .box{
     background-color:@bg;
   }
 }
 .module{
   background-color:@bg
 }

编译后的结果为：

 .wrap .box {
   background-color: #e5e5e5;
 }
 .module {
   background-color: #cccccc;
 }

二、混合
我们可以定义一些通用的属性集.class,然后在其他的地方引入这些属性集

 .btn{
   display:inline-block;
   border:1px solid #e5e5e5;
   text-align:center;
 }

 .btn-b{
   width:62px;
   height:22px;
   line-height:22px;
   .btn;
 }

编译后的结果为：

 .btn {
   display: inline-block;
   border: 1px solid #e5e5e5;
   text-align: center;
 }
 .btn-b {
   width: 62px;
   height: 22px;
   line-height: 22px;
   display: inline-block;
   border: 1px solid #e5e5e5;
   text-align: center;
 }

注意点：变量也会被混合，带入到新的作用域。（暂）

三、带参数的混合
（我觉得这个功能很适合用于css3，比如渐变啊什么的，浏览器私有前缀是繁琐的存在= =还有就是一组类似的样式了，比如不同尺寸的相似按钮）
继续拿.btn作例子：

 .btn(@width:64px,@height:22px){
     display:inline-block;
     width:@width;
     height:@height;
     line-height:@height;
     text-align:center;
     background-color:#f4f4f4;
     color:#333;
     border:1px solid #ccc;
     border-radius:5px;
 }

 #submit{
   .btn(80px,28px);
 }

编译后的结果为：

 #submit {
   display: inline-block;
   width: 80px;
   height: 28px;
   line-height: 28px;
   text-align: center;
   background-color: #f4f4f4;
   color: #333;
   border: 1px solid #ccc;
   border-radius: 5px;
 }

如果不想把.btn暴露到css中去，只在Less的混合中使用，可以不要设定参数（这里是我疑惑的地方，上个例子中编译的结果也并没有暴露.btn啊）：如

 .btn(){
     display:inline-block;
     width:64px;
     height:20px;
     line-height:32px;
     text-align:center;
     background-color:#f4f4f4;
     color:#333;
     border:1px solid #ccc;
     border-radius:5px;
 }
 #cancel{
   .btn;
 }

编译后的结果为：

 #cancel {
   display: inline-block;
   width: 64px;
   height: 20px;
   line-height: 32px;
   text-align: center;
   background-color: #f4f4f4;
   color: #333;
   border: 1px solid #ccc;
   border-radius: 5px;
 }

注意点：
（1）多参数的混合，参数之间除使用逗号分隔外，还可以使用分号（官方推荐），因为分号有双重含义：它既可以表示混合的参数，也可以表示一个参数中一组值的分隔符。当参数分隔符中逗号和分号都存在时，则分号作为分隔符。
（2）同名不同参数的混合，看下面这个例子：

 .mixin(@color) {
     color-1: @color;
 }
 .mixin(@color; @padding:2) {
     color-2: @color;
     padding-2: @padding;
 }
 .mixin(@color; @padding; @margin: 2) {
     color-3: @color;
     padding-3: @padding;
     margin: @margin @margin @margin @margin;
 }

第一个mixin强制要求第一个参数
第二个mixin强制要求第一个参数，第二个参数为可选
第三个mixin强制要求前2个参数，第三个为可选

因此当调用时：

 .some .selector div {
     .mixin(#008000);
 }

编辑结果为：

 .some .selector div {
   color-1: #008000;
   color-2: #008000;
   padding-2:;
 }

四 @arguments变量
@arguments包含了你传进去的所有变量，所以它会适合用在一些符合的属性，比如border margin padding box-shadow等等。
我们拿border作为例子（因为写的最多）

 .border(@width:1px;@style:solid;@color:#e11921){
   border:@arguments;
 }
 #border{
   .border(2px,dashed,#f00);
 }

编译结果为：

#border {
  border: 2px dashed #ff0000;
}

好吧，我发现这个例子有点鸡肋，还是换成box-shadow吧

 .box-shadow(@x:1;@y:1;@blur:2;@color:#eee){
   box-shadow:@arguments;
   -webkit-box-shadow:@arguments;
   -moz-box-shadow:@arguments;
   -ms-box-shaow:@arguments;
 }
 #box{
 .box-shadow(2px;2px;4px;rgba(0,0,0,0.6));
 }

编译结果为：

 #box {
   box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
   -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
   -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
   -ms-box-shaow: 2px 2px 4px rgba(0, 0, 0, 0.6);
 }

五：参数高级用法：

 .mixin (...) {        // 接受 0-N 个参数 （...我猜测是任意个数的意思）
 .mixin () {           // 不接受任何参数
 .mixin (@a: 1) {      // 接受 0-1 个参数
 .mixin (@a: 1, ...) { // 接受 0-N 个参数
 .mixin (@a, ...) {    // 接受 1-N 个参数（参数a没有默认值，表示强制要求这个参数）

 .mixin (@a, @rest...) {
     // @rest 表示 @a 之后的参数
     // @arguments 表示所有参数
 }

六：！important

 .box{
   width:100px;
   height:100px;
 }
 #facebox{
   .box !important;
   background-color:#edd;
 }

编译后的结果为：

 .box {
   width: 100px;
   height: 100px;
 }
 #facebox {
   width: 100px !important;
   height: 100px !important;
   background-color: #edd;
 }