前些天玩前端一开始使用的是css直接进行编写的，由于编写习惯原因，显得很臃肿，了解对比过前端插件后，选择使用 “less” 来写样式，码量立竿见影就下来了，当然过程当中进行了多次封装优化；
首先说一下对变量的初步认识，只是简单的对值的处理做了一些常量规划，刚写时的编码是下面这种：
@def-cell-row-width:200px;
@def-cell-column-height:40px;
width-1, width-2, width-3, width-4, width-5{
width: @def-cell-row-width;
}
height-1, height-2, height-3, height-4, height-5{
width: @def-cell-row-width;
}
写完发现，width-、height- 都是有迹可循的，在less里面会不会有更好的写法，通过面向百度、群友、朋友处得知，是可以写一写简单的循环的，于是编码变成了下面这种：
@def-cell-row-width:200px;
@def-cell-column-height:40px;
.for-cell-row-width(@count, @index:1) when (@index <= @count){
.width-@{index}{
width: @def-cell-row-width;
}
.for-cell-row-width(@count, @index + 1);
}
.for-cell-column-height(@count, @index:1) when (@index <= @count){
.height-@{index}{
height: @def-cell-column-height;
line-height: @def-cell-column-height;
}
.for-cell-column-height(@count, @index + 1);
}
//调用
.for-cell-row-width(5);
.for-cell-column-height(5);
这个时候发现其实已经好很多了，之后只要了解一下引用、继承方面的写法，一些前端样式类似的写法都可以放到工具库里面，为自己节约不少无用编码量，通过查阅了解到less（scss具体是哪个版本出来的没有了解）有一个Mixins的写法，可以把公用逻辑抽出来，复用性会更好一点；
划重点，Mixins没研究明白，自己想通过Mixins的特性把函数整合成一个，没能成功，不过，也同样把公共逻辑抽离了，目前的编码优化成了下面这种：
@cell-row-width:{
width: @def-cell-row-width;;
}
@cell-column-height:{
height: @def-cell-column-height;
line-height: @def-cell-column-height;
}
.for-class(@_, @target, @count, @index:1) when (@index <= @count){
.@{_}@{index}{
@target()
}
.for-class(@_, @target, @count, @index + 1);
}
.for-class(width-, @cell-row-width, 5);
.for-class(height-, @cell-column-height, 5);
这个还不是最想要的结果，但目前的知识储备，只能写到这个程度了，最后贴一下自己想达到的编码效果：
.for-class(@_, @count, @index:1) when (@index <= @count){
.@{_}@{index}{
@_()
}
.for-class(@_, @count, @index + 1);
}
.for-class(width-,5);
.for-class(height-, 5);
最后这种写法目前是报错的，自己也尝试过查找动态拼接个可执行函数出来，但没有找到相关资料，可能是找的方法不对吧，有知道的朋友可以指点一下；
这就是目前刚开始使用less的一段记录，手写一下小结，同时也加深了一些对它使用上的理解，最后贴一下全量的less 文件内容(包含过程中的一些写法)：
@def-cell-row-width:200px;
@def-cell-column-height:40px;
/*.for-cell-row-width(@count, @index:1) when (@index <= @count){
.width-@{index}{
width: @def-cell-row-width;
}
.for-cell-row-width(@count, @index + 1);
}
.for-cell-column-height(@count, @index:1) when (@index <= @count){
.height-@{index}{
height: @def-cell-column-height;
line-height: @def-cell-column-height;
}
.for-cell-column-height(@count, @index + 1);
}*/
@cell-row-width:{
width: @def-cell-row-width;;
}
@cell-column-height:{
height: @def-cell-column-height;
line-height: @def-cell-column-height;
}
.for-class(@_, @target, @count, @index:1) when (@index <= @count){
.@{_}@{index}{
@target()
}
.for-class(@_, @target, @count, @index+1);
}
NclTable{
display: inline-block;
font-size: 14px;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
cell {
text-align: center;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
&[index]{
width: 200px;
}
}
/*width-1, width-2, width-3, width-4, width-5{
width: @def-cell-row-width;
}
height-1, height-2, height-3, height-4, height-5{
width: @def-cell-row-width;
}
.for-cell-row-width(5);
.for-cell-column-height(5);*/
.for-class(width-, @cell-row-width,5);
.for-class(height-, @cell-column-height,5);
row {
display: flex;
height: 40px;
background: #CFC;
}
}
结束语
成事不在于力量的大小，而在于能坚持多久。——约翰逊
