更少的 CSS 不同的规则依赖于给定的变量答案

【问题标题】：Less CSS different rules in dependency of given variables更少的 CSS 不同的规则依赖于给定的变量
【发布时间】：2012-05-18 11:19:17
【问题描述】：

我知道 LESS CSS 中没有 if/else，需要 if/else 的用例意味着使用受保护的 mixins 来解决。

我想为我的 CSS 提供一个配置文件，我可以在其中配置字体大小、字体系列、字体粗细和行高。我还希望有可能不定义上述属性之一。

这是第一个问题。是否有可能检查变量是否存在？我使用无效值来定义不应设置的属性（如字体系列的数字）

现在我想根据给定的值创建 CSS。如果所有 4 个都给出：

font: @font-weight @font-size~'/'@line-height @font-family;

如果没有给出@font-family：

font-size: @font-size;
font-weight: @font-weight;
line-height: @line-height;

等等。

为每个可能的组合使用 mixin 似乎非常臃肿和愚蠢。

那不是问题。 2.

所以实际上我希望它能够工作：

@font-size: 1em;
@font-weight: bold;
@font-family: Arial, sans-serif;

body {
  .myMixin(@font-weight, @font-size, @line-height, @font-family);
}

应该输出：

body {
  font: bold 1em Arial, sans-serif;
}

有解决这个问题的想法吗？还是您认为我正在尝试做的通常是个坏主意？如果是，为什么？

~戴夫

【问题讨论】：

您是否考虑构建一个自定义的 PHP 预处理器，从某种 LESS 模板开始自动生成 LESS 文件？
我认为你在压缩你的 css 输出时工作太努力了。如果您很高兴您的字体样式将被分成不同的行以用于家庭、大小、重量，那么这很容易解决。让最小化器尽力而为，不要担心。或者，如果它对你来说真的那么重要，那么创建两个 mixin。
LESS 最小化器不会合并这些语句。我只是想知道是否有一种方法可以以一种相当简单的方式实现我想要的。但您可能说得对，这并不重要。

标签： less

【解决方案1】：

如果 LESS 正在通过 javascript 在客户端上进行评估，那么它可以通过使用反引号来包含 javascript 代码。在脚本中，您可以检查一个空白值并构建一个字符串作为输出。

如果您使用 Less.NET 并在服务器上转换为 CSS，则无法进行此 javascript 评估。

【讨论】：

我的 LESS 文件是用 NodeJS 解析的，所以这可以工作。但我想不出一种方法来检查是否设置了 LESS-Variable。如果未设置 @p，"@{p}".length>0?"@{p}":false 将引发错误。
你可以为你的 mixin 参数指定一个默认值。像 .MyMixin(@p: "")。然后针对该默认值进行测试。请参阅此 tinkerbin：tinkerbin.com/VB60OZaI 在 tinkerbin 上，您必须将 css 格式从“plain”更改为“less”，然后按 RUN。