Négation d'une variable numérique et ajout de 'px' à celle-ci dans LessCSS

Question

Je voudrais créer une fonction qui fasse ce qui suit :

.sprite-size (@width,@height,@x,@y) {
  width:~'@{width}px';
  height:~'@{height}px';
  background: @sprites no-repeat  -~'@{x}px' -~'@{y}px';
}

Je voudrais passer une valeur positive, en @x et @y et ensuite les nier dans la sortie. La fonction LESS ci-dessus produit les résultats suivants pour l'exemple donné :

//LESS
.header-language-selection {
  .sprite-size(44,21,312,0);
}

//Outputs CSS
.header-language-selection {
  width: 44px;
  height: 21px;
  background: url('/Content/images/sprites.png') no-repeat - 312px - 0px;
}

Comme vous pouvez le voir, le résultat de la sortie comprend un espace entre les caractères suivants - et le px . Existe-t-il un moyen de supprimer ce problème et d'obtenir ce que je veux ?

Je veux que la sortie de cette ligne soit : background: url('/Content/images/sprites.png') no-repeat -312px -0px;

Answer 1

Il suffit de multiplier par 1 dans le signe et les unités que vous voulez. Donc :

.sprite-size(@width, @height, @x, @y) {
  width: @width*1px;
  t: @height*1px;
  background: @sprites no-repeat  @x*-1px  @y*-1px;
}

Answer 2

Vous pouvez aussi essayer ceci :

.sprite-size (@width,@height,@x,@y) {
  width: ~"@{width}px";
  height: ~"@{height}px";
  background: @sprites no-repeat  @x*(-1px)  @y*(-1px);
}