在没有空格的less（css）中连接值 [英] concatenate values in less (css) without a space

问题描述

所以我试图做一个LESS混合，它需要一个数字（度旋转）和输出正确的CSS来旋转元素。问题是，我不能想出一个方法来为IE写270deg和3（270/90）。这里是我尝试过的事情：

So I'm trying to make a LESS mixin which takes a number (degrees to rotate) and output the correct css to rotate the element. The problem is, I can't figure out a way to write both "270deg" and "3" (270/90) for IE. Here are the things i've tried:

.rotate(@rotation: 0) {
    @deg: deg;
    -webkit-transform: rotate(@rotation deg); // i can see why this doesn't work
    -moz-transform: rotate((@rotation)deg); // parens
    -o-transform: rotate(@rotation+deg); // variable-keyword concatenation
    transform: rotate(@rotation+@deg); // variable-variable concatenation

    // this is the reason I need @rotation to be just a number:
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation/90);
}

.someElement {
    .rotate(270)
}

现在我刚刚修改了编译器脚本，使它不会在变量/关键字连接之间放置一个空格。我希望这是一个更好的解决方案。

For now i've just modified the compiler script so that it doesn't put a space between variable/keyword concatenation. I'd hope theres a better solution.

推荐答案

一个解决方案，虽然有点丑陋，将使用转义字符串： / p>

One solution, although a little ugly, would be to used escaped strings:

@degs: ~"@{rotation}deg"
@degs-ie: @rotation / 90;
transform: rotate(@degs);
filter: ~"DXImageBlahBlah(rotation=@{degs-ie})"

你需要less.js v1.1.x。

Note you need less.js v1.1.x for this.

这篇关于在没有空格的less（css）中连接值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！