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) を設定するために常にそれを使用する場合は、コードを繰り返す必要がないように、すべてを mixin に入れることもできます。

少ない少ない

@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 に答える