在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. 有一些零散的知識點總覺得很簡單，不用總結，到后來又不記得了還得到處找，所以我還是得時刻提醒自己，常常把一些想法和知識記錄下來，不管質量高低，都是前進的證明。