在Less中使用条件判断

　　好几个月都没写点什么东西了，被外派到Gov开发项目，老旧的系统让开发痛苦不堪，接口文档甚至是2011年的，感觉这几个月的时间都被浪费在做兼容处理上了，并且没学到什么东西，心里挺不是滋味。回到公司后才知道之前负责的Vue项目黄了，本来还想把微信的H5支付做一做，但服务器上的开发环境已经被撤掉了，就只好作罢。最近组里的人又离职了，只剩下我一个人，于是开始招人。。。各种琐事之后，新的项目开始，而我又回归老本行——切页面了。

　　对于切页面，我是比较烦的，因为始终找不到提高效率的方法，有时候似乎有些门路了，再开始另一个项目时又没有坚持下来。最近打算用Less把页面常用的样式提取出来，做成一个公共文件，方便复用。在做CSS箭头的时候遇到了一些小问题。我想通过如下形式来生成上下左右四个方向的箭头：

.arrow(up,color)
.arrow(down)
.arrow(left)
.arrow(right)

如果按照常规的逻辑，四种情况只要写四个if条件语句就行了，但Less中没有提供这种语法，查阅了一下文档，Less支持when关键字，这下思路就有了，先把公共样式命名为.arrowSet

.arrowSet(@pixel){
    width:0;
    height:0;
    overflow: hidden;
    border-width:@pixel;
}

然后针对四个方向的箭头写四个样式：

.arrowUp(@color){
    border-style:dashed dashed solid dashed;
    border-color:transparent transparent @color transparent; 
}
.arrowDown(@color){
    border-style:solid dashed dashed dashed;
    border-color:@color transparent transparent transparent; 
}
.arrowLeft(@color){
    border-style:dashed solid dashed dashed;
    border-color:transparent @color transparent transparent;
}
.arrowRight(@color){
    border-style:dashed dashed dashed solid;
    border-color:transparent transparent transparent @color;
}

接着就是使用条件判断来使用这四个样式：

.arrow(@direction,@color,@pixel:5px) when (@direction = up) {
    .arrowUp(@color);
    .arrowSet(@pixel);
}
.arrow(@direction,@color,@pixel:5px) when (@direction = down) {
    .arrowDown(@color);
    .arrowSet(@pixel);
}
.arrow(@direction,@color,@pixel:5px) when (@direction = left) {
    .arrowLeft(@color);
    .arrowSet(@pixel);
}
.arrow(@direction,@color,@pixel:5px) when (@direction = right) {
    .arrowRight(@color);
    .arrowSet(@pixel);
}

最后在调用的时候可以通过

div.d1{
    .arrow(right,red);
}
div.d2{
    .arrow(down,#000,10px);
}

这种方式。至于最终生成什么代码，就不用操心了，交给Less编译器去处理，这样或多或少提升了一点效率。

P.S. 有一些零散的知识点总觉得很简单，不用总结，到后来又不记得了还得到处找，所以我还是得时刻提醒自己，常常把一些想法和知识记录下来，不管质量高低，都是前进的证明。

在Less中使用条件判断

猜你喜欢