我可以創建自己的函數來爲LESS分配一個變量嗎？

Question

我創造我的LESS文件2個變量

@navSpritePath: '/i/data-board/navigation/navigation-sprite.gif'; 
@navSpritePath2x: ~`@{navSpritePath}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`; 

有沒有辦法來抽象的分配@ navSpritePath2x讓我傳遞到執行的功能，並返回字符串的路徑？

LESS有數學和顏色的輔助函數。我想創建自己的所以它看起來像：

@navSpritePath: '/i/data-board/navigation/navigation-sprite.gif'; 
@navSpritePath2x: createPath2x(@navSpritePath); 

///sudo code - does not work 
.createPath2x (@path){ 
    ~`@{path}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`; 
} 

Answer 1

如果你想能夠變化變量名navSpritePath2x將接收分配，那麼我不相信這是可能事半功倍。

但是，如果你只是想抽象那變量名稱爲一個mixin，那麼這是可能的。有了這樣的，它可以用來像這樣（作爲一個例子）：

LESS

@navSpritePathOne: '/i/data-board/navigation/navigation-sprite1.gif'; 
@navSpritePathTwo: '/i/data-board/navigation/navigation-sprite2.gif'; 

.createPath2x(@path){ 
    @navSpritePath2x: `@{path}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`; 
} 

.test { 
    background-image: url(@navSpritePathOne); 
    .high-density & { 
     .createPath2x(@navSpritePathOne); 
     background-image: url(@navSpritePath2x); 
    } 
} 

.test2 { 
    background-image: url(@navSpritePathTwo); 
    .high-density & { 
     .createPath2x(@navSpritePathTwo); 
     background-image: url(@navSpritePath2x); 
    } 
} 

CSS輸出

.test { 
    background-image: url('/i/data-board/navigation/navigation-sprite1.gif'); 
} 
.high-density .test { 
    background-image: url("/i/data-board/navigation/navigation-sprite1@2x.gif"); 
} 
.test2 { 
    background-image: url('/i/data-board/navigation/navigation-sprite2.gif'); 
} 
.high-density .test2 { 
    background-image: url("/i/data-board/navigation/navigation-sprite2@2x.gif"); 
} 

當然，如果你總是要使用它只是設置一組類似的屬性（比如說，與background-image有關），那麼你可以把它全部放到mixin中，這樣你就不必重複代碼：

更少 LESS

@navSpritePathOne: '/i/data-board/navigation/navigation-sprite1.gif'; 
@navSpritePathTwo: '/i/data-board/navigation/navigation-sprite2.gif'; 

.createPath2x(@path){ 
    background-image: url(@path); 
    .high-density & { 
    background-image: `@{path}.replace(/\.[\w\?=]+$/, function(match) { return "@2x" + match; })`; 
    } 
} 

.test { 
    .createPath2x(@navSpritePathOne); 
} 

.test2 { 
    .createPath2x(@navSpritePathTwo); 
} 

CSS輸出是完全一樣具有較長LESS代碼如上所示。

Answer 2

我知道這並不直接回答你的問題，但我想與大家分享我如何完成你試圖在做什麼我自己的項目。我將所有高密度圖像存儲在具有相同名稱的/ 2x文件夾中。確保您更改背景大小尺寸以匹配您的圖片。

我希望這會有所幫助。

//Variables 
@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", 
        ~"only screen and (min--moz-device-pixel-ratio: 1.5)", 
        ~"only screen and (-o-min-device-pixel-ratio: 3/2)", 
        ~"only screen and (min-device-pixel-ratio: 1.5)"; 

@CDNURL:    "cdn.mydomain.com/assets/"; 
@CDNURL-Retina:   "@{CDNURL}2x/"; 

//Background image URL Function 
.BGImage-HD(@image) { 
    background-image: url('http://@{CDNURL}@{image}'); 

    @media @highdensity { 
     background-image: url('http://@{CDNURL-Retina}@{image}'); 
    } 
} 

//Usage 
.navSprite { 
    .BGImage-HD("navigation-sprite.gif"); 

    @media @highdensity { 
     .background-size(360px, 240px); 
    } 
}