是否应该采用less编写CSS？

淘宝模板开发工具——sdk2.0中， 支持以less方式编写模块的CSS样式。再经过一些权衡之后，发现less对于编写模块的样式的时候，还是提供了N大的方便，所以，我觉得我应该采用less方式编写模块样式。

 

在创建less样式的时候，目前有这么一个规则：

存储公共的css样式：htdocs/模板/assets/stylesheets/common.less

模块的CSS样式：htdocs/模板/modules/模块/stylesheets/风格.less

 

对于公用CSS的理解：

如果懂点编程知识的话，就会知道，如果需要经常用到的一个运算方法，我们习惯把它定义成一个函数或方法来进行调用。这样就不知道重复的多次写这种代码。在大大减少代码量的同时，也为维护提供了更简单的途径。比如，我在 common.less做如下定义：

.clear { clear:both; height:0px; overflow:hidden; display:block; }

然后，我可以在模块的“风格.less”中，这样调用：

.line2 {
    .clear;   //此处调用common.less中的.clear的样式定义
    height:100px;
    overflow:visible;
    color:#f00;
}

 

如上，可以理解为.clear就是  { clear:both; height:0px; overflow:hidden; display:block; } 的代名词。

当然，从另一个角度来说，有一个难题，那就是“到底哪些应该写在common.less中？”，这可是另一个话题了 —— 如何提取整套模板中的公共样式？（下回有机会再写）

 

使用less的第二好处是，可以减少在编写模块CSS样式时的大量重复代码，先按标准CSS写法示例：

.tshop-pbsm-shop-nav-ch {margin:0px auto;}
.tshop-pbsm-shop-nav-ch .skin-box-bd {
    background:transparent;
    border-bottom:solid 4px #000;
}

.tshop-pbsm-shop-nav-ch .skin-box-bd .all-cats .all-cats-trigger a {
    background:none;
    width:160px;
}

以上是对导航栏样式的简单定义。   但是当你手工录入的时候，会发现  .tshop-psbm-shop-nav-ch写了3次，  .tshop-pbsm-shop-nav-ch .skin-box-bd 写了两次。而且在还是在只定义了少数样式的情况下，如果需要定义很多属性时，这个重复量真的可是达到一个“恐怖”级别了。

 

那么好，用less的写法来看看吧：

.tshop-pbsm-shop-nav-ch {
    margin:0px auto;
    .skin-box-bd {
        background:transparent;
        border-bottom:solid 4px #000;
        .all-cats .all-cats-trigger a {
            background:none;
            width:160px;
        }
    }
}

相比之下，是不是精简了很多？我个人称为这种写法为“嵌套式写法”。

 

总之，用less绝对可以减少我们的代码录入量。即使我们不会less的更多功能，但是我们一定要会“嵌套式写法”。