css - 我可以创建自己的函数来使用 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，那么我认为使用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 代码。