Ответ 1
Просто увеличивайте на 1
знак и единицы, которые вы хотите. Итак:
.sprite-size (@width,@height,@x,@y) {
width: @width*1px;
height: @height*1px;
background: @sprites no-repeat @x*(-1px) @y*(-1px);
}
Я хотел бы создать функцию, которая делает следующее:
.sprite-size (@width,@height,@x,@y) {
width:~'@{width}px';
height:~'@{height}px';
background: @sprites no-repeat -~'@{x}px' -~'@{y}px';
}
Я хотел бы передать значение postive в @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;
Просто увеличивайте на 1
знак и единицы, которые вы хотите. Итак:
.sprite-size (@width,@height,@x,@y) {
width: @width*1px;
height: @height*1px;
background: @sprites no-repeat @x*(-1px) @y*(-1px);
}
Вы также можете попробовать следующее:
.sprite-size (@width,@height,@x,@y) {
width: ~"@{width}px";
height: ~"@{height}px";
background: @sprites no-repeat @x*(-1px) @y*(-1px);
}