欢迎来到LESS 牛人笔记

LESS学习笔记

此博客为本人初学Less所整理的Less常用内容,一是为了备忘供以后查询/参考，二是为了加强巩固所学内容，
众博友亦可参考，如有不足之处还望指教。

Less 简介

LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单，LESS 在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本，就像它的名称所说的那样，LESS 可以让我们用更少的代码做更多的事情。

Less变量

• 变量声明,赋值及引用:Less 用‘@’符号声明变量，代码如下：

        @border-color : #b5bcc7; //声明一个名为border-color 的变量 ，并 赋值为#b5bcc7
        .mystyle tableBorder{ 
          border : 1px solid @border-color;   //引用变量  （用@符号加变量名引用）
        }

Less作用域

      @border-color : #b5bcc7;
      .mystyle tableBorder{ 
          @border-width:1px;//此变量只能在该语句块中使用
          border : @border-width solid @border-color; 
        }
      .mystyle2 tableBorder{
          border : 1px solid @border-color; //此变量可以引用
       }

Less嵌套

提示：less嵌套写法类似html代码的嵌套，比较容易理解与接受，请看下面代码

---

• HTML嵌套代码片段

 <div id="home"> 
    <div id="top">top</div> 
    <div id="center"> 
        <div id="left">left</div> 
         <div id="right">right</div> 
      </div> 
</div>

• Less嵌套代码片段

 #home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
          width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
          width : 40%; 
        } 
    } 
 }

• 编译后css代码片段

#home { 
  color: blue; 
  width: 600px; 
  height: 500px; 
  border: outset; 
 } 
 #home #top { 
  border: outset; 
  width: 90%; 
 } 
 #home #center { 
  border: outset; 
  height: 300px; 
  width: 90%; 
 } 
 #home #center #left { 
  border: outset; 
  float: left; 
  width: 40%; 
 } 
 #home #center #right { 
  border: outset; 
  float: left; 
  width: 40%; 
 }

Less运算及函数

在我们的 CSS 中充斥着大量的数值型的 value，比如 color、padding、margin 等，这些数值之间在某些情况下是有着一定关系的，用less可以进行运算：
提示：简单举例说明，更多详情，请看less相关文档，可以通过博文最后链接查看

• Less代码片段：

@init: #111111; 
 @transition: @init*2; //颜色的计算
 .switchColor { 
 color: @transition; 
 }

• Less编译后Css片段

 .switchColor { 
  color: #222222; 
 }

Less混合（mixin）

Less中混合可以理解为一种继承（样式的继承），混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样，看代码：

• 简单案例

 @backgroundColor:gray;
.box{
    width:300px;
    height:300px;
    background-color: @backgroundColor;
    .border;//.box引用.border 中的样式
}
.border{
    border:5px solid black;
}

….编译之后Css

.box{
    width:300px;
    height:300px;
    background-color: gray;
    border:5px solid black;
}

(^_^)看了上面的例子，是不是觉的SoEasy 啊，别急 后面还有更牛叉的呢，继续往下看 (@^_^@)

• 带参数混合

.border(@width:5px){
     border:@width solid red;
}
.box{
  width:100px;
  height:100px;
  background-color:@backgroundColor;
  .border(5px);//传递参数
}

……编译后

.box{
  width:100px;
  height:100px;
  background-color:gray;
  border:5px solid red
}

Less匹配

画三角看匹配

//css画三角形代码段(向上的)
.sanjiao{
   width:0;
   height:0;
   overflow:hidden;//处理IE6问题
   border-width:10px;
   border-color: transparent transparent red transparent;
   border-style: dashed dashed solid dashed;
}
//用less匹配写 (向上案例)
.pipei(top,@width:5px,@color:red,@style:solid){
     border-width:@width;
     border-color:transparent transparent @color transparent ;
     border-style: dashed dashed @style dashed;
}
//向下案例
.pipei(bottom,@width:5px,@color:red,@style:solid){
     border-width:@width;
     border-color:@color transparent transparent  transparent ;
     border-style: @style dashed dashed  dashed;
}
//向右案例
.pipei(bottom,@width:5px,@color:red,@style:solid){
     border-width:@width;
     border-color: transparent transparent  transparent @color;
     border-style:  dashed dashed  dashed @style;
}
//向左案例
.pipei(bottom,@width:5px,@color:red,@style:solid){
     border-width:@width;
     border-color: transparent @color transparent  transparent ;
     border-style:  dashed @style dashed  dashed ;
}
//每次调用自动带公共部分样式 @_  符号引用
.pipei(@_,@width:5px,@color:red,@style:solid){
    width:0;
    height:0;
    overflow:hidden;//处理IE6问题
}

//Css调用匹配(向上)
.sanjiao{
   .pipei(top,10px,green,solid);
}
//编译后css
.sanjiao{
   width:0;
   height:0;
   overflow:hidden;
   border-width:10px;
   border-color:transparent transparent green transparent;
   border-style:dashed dashed solid dashed;
}
//css调用匹配（向左）
.sanjiao{
  .pipei(left,10px,green,solid);
}
//编译后代码
.sanjiao{
   width:0;
   height:0;
   overflow:hidden;
   border-width:10px;
   border-color:transparent green transparent transparent;
   border-style:dashed solid dashed dashed;
}

Less注释

Less 可以用/**/ 注释 和 // 注释
/**/注释编译后在css 文件中可见，//注释 在编译后 css 文件中不可见，（常用 // 在less中注释）

Less导入

Less 可以用 @import 导入 Less 或 Css

@import "library"; // library.less
@import "typo.css";//也可在之前指定导入内容  （css）"typo.css"

Less避免编译

在less 使用过程中有一些函数 或计算公式需要浏览器编译，而不需要less编译器编译， Less 用‘~’ 符号指定 避免less编译器编译的代码，用‘~’ 符号指定的代码编译后在css文件中原样输出，交给浏览器去编译，从而满足我们的需求。如：

  //less 代码
   .example{
      width:calc(300px - 30px) //calc是CSS3的一个属性，让浏览器去计算的。
   }
   //编译后css代码
    .example{
      width:calc(270px)//这里less编译器已经编译过了，但这并不是我们需要的，我们是想让浏览器去编译，    别急，有办法，请看(*_*)
   }
   //修改less 代码
   .example{
      width:~'calc(300px-70px);'//该代码回原样输出导css  width:calc(300px-70px)
    }
***{@@}聪明的你不用多说，明白了吧！！！！【@@】***

Less父选择器

Less 父选择器一般使用在嵌套中
有HTML如下：

<ul clsss='list'>
   <li><a>example</a><span>哈哈哈</span></li>
   <li><a>example</a><span>哈哈哈</span></li>
   <li><a>example</a><span>哈哈哈</span></li>
</ul>
//less
.list{
   padding:5px ;
   margin:30 atuo;
   li{
     padding:3px 0 3px 0;
     height:10px;
     line-height:10px;
   }
   a{
     color:blur;
     &:hover{  //此出的 & 符号就代表父选择器  a
        color:red;
     }
  }
}

附

• 本人在学习过程中使用的Less 编译器
  **KOALA chinese name is 考拉 ，是伟大的国人开发的Less 编译器，了解KOALA

上面的内容基本上列出了 less 在开发中常用内容 ，无论是初学小白还是有些经验的油条 都可参考！！！！！！，还是那句话，【如有不对的地方请各位指正】