在LESS中生成选择器列表 [英] Generating selector lists in LESS

问题描述

在此演示： http://codepen.io/KenPowers/pen/Ddfqh

考虑以下LESS代码：

  //隐藏所有列表项默认情况下使内部标签有指针游标
 li {
 display：none; 
 label {
 cursor：pointer; 
} 
} 
 
 //此函数生成选择器和对应的css 
 .gen（@tag）{
 @sel：〜＃@ tag}：checked; 
 @ {sel} {
& 〜ul> li [data-index〜= @ {tag}] {
 display：list-item; 
} 
& 〜ul> li> label [for = @ {tag}] {
 color：red; 
} 
} 
} 
 
 //生成所需的选择器和css 
 .gen（foo）; 
 .gen（bar）; 
 .gen（baz）; 
  

它会生成以下CSS：

  li {
 display：none; 
} 
 li label {
 cursor：pointer; 
} 
 #foo：checked〜ul> li [data-index〜=foo] {
 display：list-item; 
} 
 #foo：checked〜ul> li> label [for =foo] {
 color：red; 
} 
 #bar：checked〜ul> li [data-index〜=bar] {
 display：list-item; 
} 
 #bar：checked〜ul> li> label [for =bar] {
 color：red; 
} 
 #baz：checked〜ul> li [data-index〜=baz] {
 display：list-item; 
} 
 #baz：checked〜ul> li> label [for =baz] {
 color：red;但是，更多压缩的输出可能如下所示：
    
 
 
  li {
 display：none; 
} 
 li label {
 cursor：pointer; 
} 
 #foo：checked〜ul> li [data-index〜=foo]，
 #bar：checked〜ul> li [data-index〜=bar]，
 #baz：checked〜ul> li [data-index〜=baz] {
 display：list-item; 
} 
 #foo：checked〜ul> li> label [for =foo]，
 #bar：checked〜ul> li> label [for =bar]，
 #baz：checked〜ul> li> label [for =baz] {
 color：red; 
} 
  
有没有办法我可以修改原来的LESS生成第二个CSS列表？
解决方案
在Less 1.4.0+中，您可以 ：extend  一个占位符类：
  .dp-list-item {
 display：list-item; 
} 
 .label-color {
 color：red; 
} 
 
 //此函数生成选择器和对应的css 
 .gen（@tag）{
 @sel：〜＃@ {tag}：checked〜 ul> li; 
 @ {sel} {
& [data-index〜= @ {tag}]：extend（.dp-list-item）{} 
& >标签[for = @ {tag}]：extend（.label-color）{} 
} 
} 
 
 //生成所需的选择器和css 
 .gen （foo）; 
 .gen（bar）; 
 .gen（baz）; 
  
  分叉笔  
 
 
 
生成的CSS：
  .dp-list-item，
 #foo：checked〜ul> li [data-index〜=foo]，
 #bar：checked〜ul> li [data-index〜=bar]，
 #baz：checked〜ul> li [data-index〜=baz] {
 display：list-item; 
} 
 .label-color，
 #foo：checked〜ul> li> label [for =foo]，
 #bar：checked〜ul> li> label [for =bar]，
 #baz：checked〜ul> li> label [for =baz] {
 color：red; 
} 
  
正如你所看到的，唯一的缺点是用作占位符将在生成的CSS中。我相信这不能解决，直到Less实现类似于Sass的占位符选择器。
 
 
 
 ps。我省略了不是mixin的一部分的全局 li 规则。
 
 
 
 
 
 
根据OP请求，这里是一个Sass（具有 .scss 语法）等效：
  //占位符选择器
％dp-list-item {
 display：list-item; 
} 
％label-color {
 color：red; 
} 
 
 //此函数生成选择器和对应的css 
 @mixin gen（$ tag）{
 ## {$ tag}：checked〜ul> li {
& [data-index〜=＃{$ tag}] {
 @extend％dp-list-item; 
} 
& > label [for =＃{$ tag}] {
 @extend％label-color; 
} 
} 
} 
 
 //生成所需的选择器和css 
 @each $ item（foo bar baz）{
 @ include gen（$ item）; 
} 
  
  演示  
 
 
 
生成的CSS：
 
 $ b b 
  #foo：checked〜ul> li [data-index〜= foo]，＃bar：checked〜ul> li [data-index〜= bar]，#baz：checked〜ul> li [data-index〜= baz] {
 display：list-item; 
} 
 
 #foo：checked〜ul> li> label [for = foo]，#bar：checked〜ul> li> label [for = bar]，#baz：checked〜ul> li> label [for = baz] {
 color：red; 
} 
  
可以看出，与Less相比，Sass的语法相当冗长。 Sass还有一些不错的功能，例如控制指令和优秀的插值，我已在上述示例中应用。
 
Live demo here: http://codepen.io/KenPowers/pen/Ddfqh

Consider the following LESS code:
// Hide all list items by default and make internal labels have pointer cursors
li {
  display: none;
  label {
    cursor: pointer;
  }
}

// This function generates selectors and corresponding css
.gen (@tag) {
  @sel: ~"#@{tag}:checked";
  @{sel} {
    & ~ ul > li[data-index~=@{tag}] {
      display: list-item;
    }
    & ~ ul > li > label[for=@{tag}] {
      color: red;
    }
  }
}

// Generate required selectors and css
.gen("foo");
.gen("bar");
.gen("baz");
It generates the following CSS:
li {
  display: none;
}
li label {
  cursor: pointer;
}
#foo:checked ~ ul > li[data-index~="foo"] {
  display: list-item;
}
#foo:checked ~ ul > li > label[for="foo"] {
  color: red;
}
#bar:checked ~ ul > li[data-index~="bar"] {
  display: list-item;
}
#bar:checked ~ ul > li > label[for="bar"] {
  color: red;
}
#baz:checked ~ ul > li[data-index~="baz"] {
  display: list-item;
}
#baz:checked ~ ul > li > label[for="baz"] {
  color: red;
}
However, a more compressed output may look like the following:
li {
  display: none;
}
li label {
  cursor: pointer;
}
#foo:checked ~ ul > li[data-index~="foo"],
#bar:checked ~ ul > li[data-index~="bar"],
#baz:checked ~ ul > li[data-index~="baz"] {
  display: list-item;
}
#foo:checked ~ ul > li > label[for="foo"],
#bar:checked ~ ul > li > label[for="bar"],
#baz:checked ~ ul > li > label[for="baz"] {
  color: red;
}
Is there a way I can modify the original LESS to generate the second CSS listing?
解决方案
In Less 1.4.0+ you can :extend a placeholder class:
.dp-list-item {
  display: list-item;
}
.label-color {
  color: red;
}

// This function generates selectors and corresponding css
.gen (@tag) {
  @sel: ~"#@{tag}:checked ~ ul > li";
  @{sel} {
    &[data-index~=@{tag}]:extend(.dp-list-item){}
    & > label[for=@{tag}]:extend(.label-color){}
  }
}

// Generate required selectors and css
.gen("foo");
.gen("bar");
.gen("baz");
Forked pen

Generated CSS:
.dp-list-item,
#foo:checked ~ ul > li[data-index~="foo"],
#bar:checked ~ ul > li[data-index~="bar"],
#baz:checked ~ ul > li[data-index~="baz"] {
  display: list-item;
}
.label-color,
#foo:checked ~ ul > li > label[for="foo"],
#bar:checked ~ ul > li > label[for="bar"],
#baz:checked ~ ul > li > label[for="baz"] {
  color: red;
}
As you can see, the only drawback is that both classes which I've used as placeholders will be in the generated CSS. I believe this can't be worked around until Less implements something akin to Sass' placeholder selectors.

ps. I've omitted the global li rules which are not part of the mixin for brevity.



As per OP request, here is a Sass (with .scss syntax) equivalent:
//placeholder selectors
%dp-list-item {
  display: list-item;
}
%label-color {
  color: red;
}

// This function generates selectors and corresponding css
@mixin gen($tag) {
  ##{$tag}:checked ~ ul > li {
    &[data-index~=#{$tag}] {
      @extend %dp-list-item;
    }
    & > label[for=#{$tag}] {
      @extend %label-color;
    }
  }
}

// Generate required selectors and css
@each $item in (foo bar baz) {
  @include gen($item);
}
Demo

Generated CSS:
#foo:checked ~ ul > li[data-index~=foo], #bar:checked ~ ul > li[data-index~=bar], #baz:checked ~ ul > li[data-index~=baz] {
  display: list-item;
}

#foo:checked ~ ul > li > label[for=foo], #bar:checked ~ ul > li > label[for=bar], #baz:checked ~ ul > li > label[for=baz] {
  color: red;
}
You can see that Sass' syntax is rather verbose when compared to Less. Sass also has some nice features such as control directives and excellent interpolation which I've applied in the example above.

                        
这篇关于在LESS中生成选择器列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！