在 Less 选择器中使用函数/mixin答案

【问题标题】：Use function/mixin in Less selector在 Less 选择器中使用函数/mixin
【发布时间】：2014-11-17 03:02:45
【问题描述】：

我需要重复我的选择器。 Less CSS 中是否有任何方法可以使用函数/mixin 来做到这一点？

注意：框架的内容不同。

.slide1{
  .frame{
     .obj1{}
     .obj2{}
     .obj3{}
  }
  [data-fragment=1].active ~ .frame {
     .obj1{}
     .obj2{}
     /* frame1 css */
  }

  [data-fragment=2].active ~ .frame {
     .obj2{}
     .obj3{}
     /* frame2 css */
  }
  /* other frames ... */
}
.slide2{
  /* slide2 css */
}
/* other slides ... */

到

.slide1{
  .frame{/* ... */}
  .frameselector(1){/* frame1 css */}
  .frameselector(2){/* frame2 css */}
}
.slide2{/* slide2 css */}

【问题讨论】：

frame1 css和frame2 css的内容是什么？它们是否相同/是否可以使用某种逻辑推导出来（例如 frame1 的宽度为 25%，frame 2 的宽度为 50% 等）？如果是的话，你可以看看使用 Loops。
他们有很大的不同。
刚刚看到您对相关代码的更新。您是否只想根据输入参数动态形成选择器名称？
是的。只需要动态选择器。
那很好。检查这 demo 是否是您需要的。选择器是动态形成的，但每个选择器的规则是通过 mixin 调用传递的。（注意：像在这个例子中一样传递规则集我认为只能从 Less 1.7.0 开始工作）如果这是您需要的，我会将其添加为答案。

标签： css css-selectors less less-mixins

【解决方案1】：

是的，您可以使用如下所示的 mixin 来动态形成选择器。 mixin 接受两个参数，其中一个是必须为其生成选择器的帧号，另一个是适用于该帧的一组规则（规则集）。

Passing Rulesets to Mixins 仅在 Less v1.7.0 中引入，因此此代码不适用于较低版本的 less 编译器。

注意：如果所有帧的属性/规则有一些共同的部分，这可以使用循环进一步减少，但由于它们不同，我们必须传递与每个帧对应的规则集作为mixin 调用。

减：

.frameselector(@number, @ruleset){
    @sel: ~"[data-fragment = @{number}]";
    @{sel}.active ~ .frame{
        @ruleset();
    }
}
.slide1{
    .frame{
        /* some code */
    }
    .frameselector(1,{
        /* all rules or props belonging to frame 1 */
        color:red;
        background: beige;
    });
    .frameselector(2,{
        /* all rules or props belonging to frame 2 */
        color:green;
        background: white;
    });
}

编译后的 CSS 输出：

.slide1 .frame {
    /* some code */
}
.slide1 [data-fragment = 1].active ~ .frame {
    color: red;
    background: beige;
}
.slide1 [data-fragment = 2].active ~ .frame {
    color: green;
    background: white;
}

CodePen Demo

【讨论】：