不要盲目的在项目中使用LESS CSS

　　此篇文章发布于2011年，当时的想法与如今已有不一样，不建议继续阅读。
　　若是你还不知道LESS CSS是什么东西，能够看一下这篇文章，是我一朋友写给新人看的《CSS——LESS》
　　不能否认，LESS CSS是个强大的工具，它弥补了css没有变量、没法运算等一些“先天缺陷”，但它彷佛给我一种错觉，就是为了功能而实现功能。
　　好比它的引用功能

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#header{
    .rounded_corners;
}
#footer{
    .rounded_corners;
}

　　最终编译后会生成以下代码

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#header{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
#footer{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

　　它彷佛弥补上了css的一个缺陷，但我并没发现他这样作的目的是什么，我彻底能够直接这样一段

.rounded_corners{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

　　而后页面哪须要圆角，直接加上class="rounded_corners"，固然，它的引用是能够设置参数的，好比这样

.margin10(@size:10px){
    margin:@size;
}
.test{
    .margin10;
}

　　彷佛很高级的样子，参数能够控制，减小了重复代码的书写，可是否实用呢？我拿以前项目里的样式比较了下，发现能拎出来，经过参数设置具体样式的几乎没有，只有几个css3的属性用这个功能仍是比较OK，好比这段阴影样式

.box-shadow(@arguments){
    -webkit-box-shadow:@arguments;
    -moz-box-shadow:@arguments;
    box-shadow:@arguments;
}

　　由于只要是阴影，就少不了这三句，相似的还有圆角、透明等，就不一一列举了。
　　而后，说说最基本的变量吧，我就一直没想通css要变量有什么用

@w100:100px;
@h100:100px;
div{
    width:@w100;
    height:@h100;
}

　　可能会说，我定义好一个变量，在不一样的地方均可以直接调用，若是要修改，只需修改一次。但问题是，万一我只想改其中一个的样式，另外一个别动，或者就是两个同时都须要修改。
　　就好比我一个页面里有2块广告区域，原先宽高是同样的，如今我要其中一个区域变大，另外一个变小，这样我反而以为定义变量增多了个人工做量。
　　可能又会说，LESS CSS不是支持四则运算嘛，对，咱们能够这样子

@w100:100px;
@h100:100px;
div{
    width:@w100 + 50px;
    height:@h100 - 50px;
}

　　甚至还能够更2B青年一点

@w100:100px;
@h100:100px;
div{
    width:(@w100 + 50px) / 2 + 75px;
    height:@h100 - (100px / 2);
}

　　LESS CSS里的计算功能就像变量同样让我没法理解，别忘了，LESS CSS是要编译过你写的.less文件的，最终生成的仍是标准的css代码。换句话说，就是你再怎么定义变量，再怎么计算，最终它生成的仍是一个固定的数值，帮咱们减小的只是计算这个数值的时间，但我以为我花时间去写个运算，还不如心算一下。
　　固然了，LESS CSS也并不是一无可取，它的嵌套功能就让我眼前一亮

<div class="test">
    <div class="test1">
        <div></div>
    </div>
</div>

　　一般咱们要给上面这三个div写样式，无非用2种方法，一种就是定义class/id，一种就是给最外层定义个class/id，而后用继承去写。而LESS CSS给了咱们一种友好阅读的方式

.test{
    .margin10;
    @color:#4d926f;
    width:@w100 + 100px;height:100px;border:1px solid red;background:@color;
    &:hover,&.selected{background-color:#FFF}
    /*嵌套*/
    .test1{width:@w100 - 50px;height:100px;background-color:red;font-size:20px;
        /*多重嵌套*/
        div{width:100%;height:50px;background-color:#9F0;}
    }
    .test1:hover{background-color:@color}
}

　　相信这样的样式要查找起来，都会比较轻松，哪一层套哪一层都一清二楚，这是我感受它很赞的功能。
　　总的来讲，LESS CSS不是很适合用在项目中，它更适用于皮肤、模板等总体框架固定死的网站制做，好比论坛、空间。因此你们在使用LESS CSS请先考虑下这个工具是否适用，别盲目的使用，不但效率没提升，还增长了没必要要的工做量。
转载于猿2048:▶《不要盲目的在项目中使用LESS CSS》