LESS：通过 Mixin 调用即时更改传递的参数

Question

我有一个在不同样式表中调用的 LESS Mixin（即，每个断点对应一个由媒体查询控制的断点）。在每个样式表中，它使用不同的参数值调用，例如：

• “mobile.less”：

  .mixin(1);

• “tablet.less”：

  .mixin(2);

  .....

mixin 被定义（例如）为：

.mixin(@parameter) when (@parameter = 1)
{
    body
    {
      font-style:italic;
    } 

    .......

}

.mixin(@parameter) when (@parameter = 2)
{
    .......
}

我正在开发一个演示网站，因此我希望用户可以即时更改此值，更改使用表单字段作为参数传递的值。

我尝试了以下方法：

less.modifyVars({'@parameter' : <value from form field>});

但只有@parameter是一个“全局”变量，而不是通过调用传递的参数才有效……有没有改变传递参数的方法？

谢谢。

Answer 1

原答案

是的，只需将变量设置在 mixins 的范围之外，但仍然在保护表达式中使用它。比如：

@parameter: 1;

.mixin() when (@parameter = 1)   {
    body  {
      font-style:italic;
    }   
}

.mixin() when (@parameter = 2)   {
    body  {
      font-style:normal;
    } 
}

.mixin();

这会生成1 代码。如果变量设置为2，则会生成2 代码等。

关于“动态再处理称为 mixins”的讨论

参考您的评论，据我所知，没有办法直接重新处理 mixin 调用的 局部变量 而不对 mixin 定义本身做一些处理以允许它。因此，在您的示例中，如果“mobile.less”有一个.mixin(1); 调用，您如何根据用户输入将其重新处理为.mixin(4)。如果您没有设置 调用 以 a 变量 开头，则无法“修改”原始中的1 em> 打电话。但是，首先设置变量调用实际上只是我上面给出的答案的更长版本。考虑到这段代码与上面的代码基本相同，只是涉及到更多的编码：

LESS Mixins 定义

.mixin(@parameter) when (@parameter = 1)   {
    body  {
      font-style:italic;
    }   
}

.mixin(@parameter) when (@parameter = 2)   {
    body  {
      font-style:normal;
    } 
}

在文件中调用它

//mobile.less
@parameter: 1;
.mixin(@parameter);

//tablet.less
@parameter: 2;
.mixin(@parameter);

请注意，我们仍在使用“全局”@parameter 变量，该变量只是作为同名的“本地”变量传递给 mixins。所以我们在这里获得的只是更多的代码（添加局部变量）来做同样的事情。

现在假设您确实是在通过用户输入修改最终输出 css 行为 之后，那么您可以通过以后的调用“覆盖”。 假设所有相同的属性，选择器都是由各种 mixin 调用设置的，只是设置为不同的值。所以让我们假设 .mixin(1) 仍然在“mobile.less”中，你可以设置一个"reset.less" 文件，在用户输入时调用以被 css 级联覆盖。

添加了 LESS Mixin 定义

.mixin(@parameter) when (@parameter = 0)   {
    //purposefully empty, used as default for reset.less
}

当前“mobile.less”等中的通话保持原样。您可以在全局“variables.less”文件中设置全局值@parameter: 0;，然后“reset.less”是这样的：

//reset.less
.mixin(@parameter);

默认情况下，“reset.less”不会输出任何内容（使用上面刚刚完成的 mixin 定义）。这个“reset.less”文件被last放在html处理中，以便它遵循任何“mobile.less”样式表等。然后，当用户更改@987654335 @，“reset.less”用新值更新，它确实输出css，凭借css级联，覆盖“mobile.less”等的值。