2

我在我的 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; })`;
}
4

2 回答 2

4

如果您希望能够更改将接收分配的变量名称navSpritePath2x，那么我认为 LESS 不可能。

但是，如果您只是想将该变量名称抽象为 mixin，那么它是可能的。这样，它可以像这样使用（例如）：

较少的

@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当然，如果你总是要用它来设置一组类似的属性（比如，与

少少_

@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-08T21:53:47.890 回答
1

我知道这并不能直接回答您的问题，但我想分享一下我是如何完成您在自己的项目中尝试做的事情的。我将所有高密度图像存储在同名的 /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-08T20:58:26.203 回答