在Less选择器中使用function / mixin [英] Use function/mixin in Less selector

问题描述

我需要重复选择器。在Less 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 * / 
 } 
 / *其他框架... * / 
} 
 .slide2 {
 / * slide2 css * / 
} 
 / *其他幻灯片。 .. * / 
  

至

  .slide1 {
 .frame {/ * ... * /} 
 .frameselector（1）{/ frame1 css * /} 
 .frameselector 2）{/ * frame2 css * /} 
} 
 .slide2 {/ * slide2 css * /} 
  

$ b b

解决方案

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

将规则集传递给Mixins 仅在Less v1.7.0中引入，因此

如果所有框架的属性/规则都有一些共同的部分，这个代码将不能用于较小版本的less编译器。

<可以使用循环进一步减少，但是由于它们是不同的，因此我们必须将对应于每个帧的规则集作为mixin调用的一部分。

Less： / strong>

  .frameselector（@number，@ruleset）{
 @sel：〜[data-fragment = @ {number}]; 
 @ {sel} .active〜.frame {
 @ruleset（）; 
} 
} 
 .slide1 {
 .frame {
 / * some code * / 
} 
 .frameselector（1，{
 / *属于第1帧的所有规则或道具* / 
 color：red; 
 background：beige; 
} 
 .frameselector（2，{
 / *所有规则或道具属于框架2 * / 
 color：green; 
 background：white; 
} 
} 
  

编译CSS输出： b
$ b

  .slide1 .frame {
 / *一些代码* / 
} 
 .slide1 [data-fragment = 1] .active〜.frame {
 color：red; 
 background：beige; 
} 
 .slide1 [data-fragment = 2] .active〜.frame {
 color：green; 
 background：white; 
} 
  

CodePen演示

I need to repeat my selector. is there any way in Less CSS to do this with function/mixin?

Note: Content of frame is 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, you can form the selector dynamically by using a mixin like below. The mixin accepts two parameters out of which one is the frame number for which the selector has to be generated and the other is the set of rules (ruleset) that is applicable for this frame.

Passing Rulesets to Mixins was introduced only in Less v1.7.0 and hence this code would not work with lower versions of the less compiler.

Note: If the properties/rules for all frames had some common pieces this can be reduced further using loops, but since they are different we have to pass the ruleset corresponding to each frame as part of the mixin call.

Less:

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

Compiled CSS Output:

.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

这篇关于在Less选择器中使用function / mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！