如何使用LESS Css将像素宽度值乘以倍数？

Question

我正在尝试设置一些被样式化为标签的元素的填充，并且我想要动态更改填充。我知道可以这样做：

@pill-padding-v: 8px;
@pill-padding-h: 15px;

padding:@pill-padding-v @pill-padding-h;

生成以下内容的代码 - 似乎可以正常工作：

padding:8px 15px;

但是我该如何让LESS在其中添加1像素的填充呢？

@pill-padding-v: 8;
@pill-padding-h: 15;

@pill-padding-v: (@pill-padding-v + 1)
@pill-padding-h: (@pill-padding-h + 1)

padding:@pill-padding-vpx @pill-padding-hpx;

问题似乎在于将"px"作为变量名的一部分，导致编译错误。同时，我认为使用8 px而不是8px在语法上是不正确的，这也会导致浏览器出现错误。

如何在LESS Css中将像素宽度值乘以一个数？

- cwd

---

“乘”还是“加”？你似乎有些困惑（或者只是我自己的问题）。 - Wesley Murch

Answer 1

你说的没错，将px添加到变量中会导致问题。我尝试了插值语法，但并没有帮助，但在变量中应该始终指定单位（px、em、%...），就像你第一个可行的示例中所做的那样。

你说“乘”，但我认为你是指“加”。这样不应该有任何问题，请尝试以下方法：

@pill-padding-v: 8px;
@pill-padding-h: 15px;

@pill-padding-v: (@pill-padding-v + 1);
@pill-padding-h: (@pill-padding-h + 1);

element {
    padding:@pill-padding-v @pill-padding-h;
}

输出应为：

element { padding:9px 16px; }

......虽然你可能希望只是使用另一个变量名称或者在样式声明中添加1像素的右边。我不认为重新声明变量是一个好的实践，而且事实上我很惊讶它竟然可以工作。

- Wesley Murch

---

很好。从逻辑上讲，LESS的JavaScript风格语法似乎不能将（8px + 1）计算为9px。 - cwd

我不确定为什么会这样，但方程式周围的括号绝对是必需的 - 在CSS中，“+”除了在选择器中用作“立即兄弟”之外，是否还有其他含义？ - Jon z

据我所知，在CSS中+没有被用于其他任何目的。我正在使用一个PHP版本的LESS，它对运算符非常“智能化”，通常我不使用括号。 - Wesley Murch

@Jonz 在 CSS 声明的选择器部分中，+ 可以用于选择下一个兄弟元素。例如，.whatever + p 选择在 .whatever 后面的 p 元素 -- 但我怀疑这并不相关... - Josh M.

Answer 2

除了添加之外，您可以使用LESS执行任何数学计算：

@pill-padding-v: 8;
@pill-padding-h: 15;

element {
/* the numbers I'm multiplying by are arbitrary,
but the value defined in the LESS variable will append
the unit that you multiply it by. */
padding: calc(@pill-padding-v * 3px) calc(@pill-padding-h * 2px);
}

LESS的输出结果如下：

element {
   padding:calc(24px) calc(30px);
}

即使它被包含在 calc 函数中，也没问题，因为没有数学运算符的“等式”的结果就是该值。

用户 seven-phases-max 提供了一个很好的观点：你不需要在 LESS 中使用 calc() 函数。可以将其写为：

element {
   padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);
}

- itsmikem

---

calc 的目的是什么？ - seven-phases-max

calc()函数会进行一些数学计算，以便为您找出一个值。而当您将其乘以具有单位(em、px等)的数字时，魔法就发生了，结果就采用了该单位。 - itsmikem

是的，抱歉问题不够清晰。我知道CSS中的calc是什么意思，但它在calc(24px)中的作用是什么？提示：对于@pill-padding-v * 3px等情况，不需要使用calc。 - seven-phases-max

它在 calc(24px) 中什么也没做。这是 LESS 的输出结果。重点是 LESS 进行了计算，但你无法从生成的 CSS 中删除 "calc" 这个单词。然而，这并不重要，就像说“计算数字5”，结果当然是5一样。 - itsmikem

从生成的 CSS 中删除 calc，只需从 Less 代码中删除它即可。例如，您的答案中的代码可以简化为：padding: (@pill-padding-v * 3px) (@pill-padding-h * 2px);。 - seven-phases-max