Annulez une variable numérique et ajoutez-y 'px' dans LessCSS

Je voudrais créer une fonction qui fait 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 postive, dans @x et @y, puis les Annuler dans la sortie. La fonction less ci-dessus affiche ce qui suit pour l'exemple suivant: 

//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 sortie comprend un espace entre les - et le px. Y a-t-il un moyen où l'on peut supprimer cela et réaliser ce que je veux?

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

27
demandé sur Mark Cassar 2013-01-17 21:32:09

2 réponses

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;
  height: @height*1px;
  background: @sprites no-repeat  @x*-1px  @y*-1px;
}
55
répondu ScottS 2018-04-20 12:44:46

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);
}
6
répondu VyseExhale 2014-09-26 07:21:05