LESS！你不想了解一下吗？

"你没爱上我，是因为你不了解我" ，LESS绝对配到上这句话。如果你是前端开发者强烈建议你尝试使用LESS，绝对会让你写css的工作事半功倍。

我已然爱上了这种方式写css，现在写项目早已经不在css文件中写样式了，而是通过LESS生成一个css文件，书写、维护都在LESS中。下面我为大家隆重推荐这种LESS编码方式。

什么是LESS

LESS是样式动态语言，将css赋予动态语言的特性，如变量、继承、运算、函数。能够让开发者像写动态程序语言一样写css样式。本质上，LESS 包含一套自定义的语法及一个解析器，用户可以根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件，这个跟我们之前介绍的markdown有点类似。使用LESS目的只有一个就是方便书写和管理我们的CSS文件。

学习LESS

LESS是书写和管理css文件的一种拓展，语法本身并没有摈弃css，完全可以在LESS文件中直接书写css，所以学习并使用LESS是一件非常容易的事情。

下面四点是boostrap官网LESS教程中介绍的，掌握这四点足以：

1.变量

变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

LESS代码:

// ESS代码
@color: #4D926F;//改一个经常会变化的样式，且很多地方使用了它就不需要一个个去更改了

#header {
  color: @color;
}
h2 {
  color: @color;
}

编译后的css代码:

#header {
  color: #4D926F;
}
h2 {
  color: #4D926F;
}

2.混合

混合可以将一个定义好的class A轻松的引入到另一个class。我们还可以带参数地调用，就像使用函数一样。

LESS代码：

//可以把一些公共的属性进行封装，既减少了代码量也方便维护
.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

编译后的css代码

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

3.嵌套规则

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

LESS代码：

//这是写css最常用到的一种，有效避免了css命名冲突问题。单凭这一点都足够秒杀你在css文件中管理你的css代码。
#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

编译后的css样式:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

4.函数 & 运算 运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。 LESS中的函数一一映射了JavaScript代码 ，如果你愿意的话可以操作属性值。

//可想而知，css的属性值都是静态的，无法实现属性之间这种复杂的关系。而less轻而易举的做到了。
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

编译后的css代码：

#header {
  color: #333;
  border-left: 1px;
  border-right: 2px;
}
#footer { 
  color: #114411;
  border-color: #7d2717;
}

这四种用法来源于bootstrap官网对less的介绍。基本掌握这些就能够提供css样式的开发效率了。

我的项目LESS实践

以我当前的这个项目——‘求索网’为例，这个项目的css都是通过LESS生成和管理的。

工具使用：

我平常写项目使用的是Hbuilder编辑器，有对应的插件点击安装就可以。安装好插件之后自己创建一个less文件就可以了。首次保存时会自动生成css文件，然后每次修改less文件时都会同步修改less文件。

上图所示每一个css都会对应一个LESS文件，在页面中使用时候直接引入css文件就可以，不需要引用LESS文件。当然你要直接使用less文件也没问题，前提是你必须引入less.js作为less执行less编译工作，这里就不做介绍了，本人不推荐直接引用less文件的做法。

代码部分展示：

index头部代码：

#top{
    width: 100%;
    .content{
        width: 1200px;
        height: 40px;
        padding: 10px 0px 20px 0px;
        margin: 0 auto;
    }
    .log{
        width: 350px;
        height: 40px;
        float: left;
        a.a_img{
            display: inline-block;
            width: 150px;
            height: 40px;
            float: left;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .desc{
            font: 400 14px/14px "微软雅黑";
            color:#BBB5B5;
            height: 30px;
            padding: 10px;
            float: left;
            position: relative;
            .line{
                display: block;
                height: 32px;
                border-left: 2px solid #EEEEEE;
                position: absolute;
                top: 6px;
                left: 0px;
            }
            span{
                display: block;
            }
        }
    }
    .menu{
        height: 40px;
        float: right;
        ul{
            li{
                float: left;
                padding-left: 15px;
                font: 400 15px/40px "微软雅黑";          
            }
        }
    }
}

这段代码仅仅是应用了less嵌套规则。结构清晰，不用担心命名冲突，不用考虑选择器的优先级问题。在阅读，书写，和维护上都提升了很多。

好了，LESS就介绍到这里。在写项目时尝试用一次，相信你一定和我一样会爱上这种编码风格的。