web-dev-qa-db-ja.com

数値変数を否定し、「CSS」をLessCSSに追加します

以下を実行する関数を作成したいと思います。

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

_@x_と_@y_で正の値を渡し、それらを出力で否定したいと思います。上記のLESS関数は、次の例の場合、以下を出力します。

_//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;
}
_

ご覧のとおり、出力結果には_-_とpxの間にスペースが含まれています。これを削除して私が望むものを達成する方法はありますか？

その行の出力を次のようにしたい：background: url('/Content/images/sprites.png') no-repeat -312px -0px;

less
30
Mark Cassar

必要な記号と単位で1を乗算するだけです。そう：

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

これを試すこともできます：

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