我可以创建自己的函数来为LESS分配一个变量吗？

我创造我的LESS文件2个变量我可以创建自己的函数来为LESS分配一个变量吗？

@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; })`; 
}

来源

2013-04-08 captainill

如果你想能够变化变量名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/[email protected]"); 
} 
.test2 { 
    background-image: url('/i/data-board/navigation/navigation-sprite2.gif'); 
} 
.high-density .test2 { 
    background-image: url("/i/data-board/navigation/[email protected]"); 
}

当然，如果你总是要使用它只是设置一组类似的属性（比如说，与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代码如上所示。

来源

2013-04-08 21:53:47 ScottS

我知道这并不直接回答你的问题，但我想与大家分享我如何完成你试图在做什么我自己的项目。我将所有高密度图像存储在具有相同名称的/ 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); 
    } 
}

来源

2013-04-08 20:58:26

我可以创建自己的函数来为LESS分配一个变量吗？

回答

相关问题