css - Use function/mixin in Less selector -

i need repeat selector. there way in less css function/mixin?

note: content of frame different.

.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 ... */ 

to

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

yes, can form selector dynamically using mixin below. mixin accepts 2 parameters out of 1 frame number selector has generated , other set of rules (ruleset) applicable frame.

passing rulesets mixins introduced in less v1.7.0 , hence code not work lower versions of less compiler.

note: if properties/rules frames had common pieces can reduced further using loops, since different have pass ruleset corresponding each frame part of mixin call.

less:

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

compiled css output:

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

codepen demo