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

原始答案

是的，只是让变量超出mixin的范围，但仍然在guard表达式中使用它。类似的东西：

@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)。如果您尚未使用变量设置调用，则无法“修改”原始文件中的1 电话。但是，设置一个变量调用开始实际上只是我上面给出的答案的更长版本。考虑到这个代码基本上和上面的代码一样，只涉及更多编码：

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级联。

添加了少量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”文件在html处理中放置 last ，以便它跟随任何“mobile.less”样式表等。然后，当用户更改{{ 1}}，“reset.less”用新值更新，它输出css，由于css级联，它会覆盖“mobile.less”等的值。

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

1 个答案:

原始答案

讨论“在飞行中重新处理称为mixins”