Css 在较少的选择器中使用函数/混合

我需要重复我的选择。在更少的CSS中，有没有办法通过function/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 ... */

到

---

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

仅在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;
    });
}

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

编译的CSS输出：

.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;
    });
}

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

---

frame1 css和frame2 css的内容是什么？它们是否相同/是否可以使用某些逻辑（如帧1的宽度为25%，帧2的宽度为50%等）导出它们？如果是的话，你可以看看使用循环。它们有很大的区别。刚刚看到你对相关代码的更新。您是否只希望根据输入参数动态形成选择器名称？是。只需要动态选择器。那就好了。检查这是否是您需要的。选择器是动态形成的，但每个选择器的规则都随mixin调用一起传递。（注意：像本例中那样传递规则集，我认为它只从1.7.0开始起作用）如果这是您需要的，我将添加它作为答案。