2

无论如何，如果没有每个父级的单独块，是否可以编写以下代码？

#parent1
{
      #parent1child1
      {
           display: none;
      }
}

#parent2
{
      margin-top: 1em;
      margin-bottom: 1em;
}

#parent1, #parent2
{
      .child2
      {
           display: none;
           margin-top: 1em;

           .textbox
           {
                width: 97%;
           }

           .anchor
           {
               margin-right: 0.5em;
           }
      }
 }

我试图消除为每个父母设置块的需要，并在整个块中使用某种非运算符来设置单个父母的样式。

4

2 回答 2

3

我有一个担心

从我在 onetrickpony 的回答下的评论中可以看出，我认为该解决方案根本不可接受（即使在最初撰写本文时，它是“已接受”的答案）。虽然让它“工作”是一个有点创造性的解决方案，但它所产生的无意义选择器的#parent2#parent1 #parent1child1产生，以及它所产生的令人讨厌的#parent2#parent2选择器冗余似乎太懒惰并且不关心正确的编码。onetrickpony 是否有这样的态度尚不清楚，尽管他的评论似乎进一步证明了“使用 CSS 预处理器的目的是节省一些开发时间，而不是生成高效的 CSS”。在我看来，两者都应该是目标。这是他的解决方案的具体输出以及我认为不可接受的内容：

&使用我的反对意见的 onetrickpony 的嵌套父调用的 CSS 输出

#parent1#parent2,  /* <- pointless selector */
#parent2#parent2 { /* <- ugly and redundant (potentially buggy?) selector */  
  margin-top: 1em;
  margin-bottom: 1em;
}
#parent1#parent1 #parent1child1,  /* <- ugly and redundant selector */
#parent2#parent1 #parent1child1 { /* <- pointless selector */ 
  display: none;
}
#parent1 .child2,
#parent2 .child2 {
  display: none;
  margin-top: 1em;
}
#parent1 .child2 .textbox,
#parent2 .child2 .textbox {
  width: 97%;
}
#parent1 .child2 .anchor,
#parent2 .child2 .anchor {
  margin-right: 0.5em;
}

仅仅批评不是很有帮助，所以我觉得除了批评已经给出的答案之外，至少有必要为这个问题提供一个解决方案。如果我用来测试 LESS 的网站没有关闭，我的答案会更快。

减少代码的三个想法

您对问题的标题提出的问题与问题中所述的要求略有不同。标题说明：“在将子代包含在多个父代中的同时保持单独的父代样式”，这意味着在单独的父代样式中包含子代代码（而不必重复代码）。为此，请参阅下面的解决方案 #2。您在问题中的要求以不同的方式重申了它，“无论如何要编写以下代码而不为每个父级单独块”，这将标题的要求缩小到在一个代码块中定义所有内容的特定解决方案（我相信这是一个糟糕的编码实践，因为它变得不太清楚正在发生什么......并且onetrickpony指出OP的原始代码比他提供的解决方案更清晰）。要在 CSS 中实际实现父分组，同时在 LESS 中保持代码清晰和简短，请参阅解决方案 #3a 和 #3b。

但是，我将从解决方案#1 开始，首先是退后一步，重新检查是否甚至需要嵌套。只有 OP 可以根据他的站点要求确定这一点，但如果没有必要，那么解决方案 #1 是最好的——一切都保持独立。如果需要嵌套，解决方案#3b 可能最接近 OP 的要求。

解决方案#1

这只是指出了很明显，很多时候人们在不需要嵌套时设计嵌套。如果在or包装器.child2之外不存在元素，则通常不需要具有嵌套关系的 css。例外情况是特殊性覆盖，因为它有其他需要覆盖的应用样式，因此它需要从父级添加 id 的特殊性。#parent1#parent2.child2

#parent1 {
      #parent1child1 {
           display: none;
      }
}

#parent2 {
      margin-top: 1em;
      margin-bottom: 1em;
}

.child2 {
      display: none;
      margin-top: 1em;

      .textbox {
           width: 97%;
      }

      .anchor {
           margin-right: 0.5em;
      }
}

解决方案#2

这使父母保持分离，从而使他们清楚地预期显然期望它们成为两组不同的样式规则。它使用 mixin 来保持.child2代码只需要输入一次。这更像是 LESS 设计用于在选择器中包含重复代码的方式。

#parent1 {
      #parent1child1 {
           display: none;
      }
      .makeChild2Code(); /* call mixin to generate code */
}

#parent2 {
      margin-top: 1em;
      margin-bottom: 1em;
      .makeChild2Code(); /* call mixin to generate code */
}

.makeChild2Code() {
  .child2 {
      display: none;
      margin-top: 1em;

      .textbox {
           width: 97%;
      }

      .anchor {
           margin-right: 0.5em;
      }
   }
}

这个解决方案会导致一些多余的 CSS 代码“膨胀”，但这里与 onetrickpony 的回答不同的是，代码膨胀是有目的和意义的，而不是毫无意义和无意义的。生成的 CSS 是：

#parent1 #parent1child1 {
  display: none;
}
#parent1 .child2 {
  display: none;
  margin-top: 1em;
}
#parent1 .child2 .textbox {
  width: 97%;
}
#parent1 .child2 .anchor {
  margin-right: 0.5em;
}
#parent2 {
  margin-top: 1em;
  margin-bottom: 1em;
}
#parent2 .child2 {
  display: none;
  margin-top: 1em;
}
#parent2 .child2 .textbox {
  width: 97%;
}
#parent2 .child2 .anchor {
  margin-right: 0.5em;
}

解决方案#3

这两者都使用:extend()LESS 1.4+ 中的功能将父母分组在一起。这也是最新版本的 LESS 用于这种情况的方式。

选择“一”

这使用了页面应该是唯一的事实，#parent1child1因此在大多数情况下不需要驻留在下面#parent1（但是，偶尔会有这种 id 嵌套的合法情况）。它还假设#parent1没有任何其他需要应用于它的属性也不适用于 #parent2.

#parent1 {
   .child2 {
      display: none;
      margin-top: 1em;

      .textbox {
           width: 97%;
      }

      .anchor {
           margin-right: 0.5em;
      }
   }
}

#parent1child1 {
    display: none;
}

#parent2 {
      margin-top: 1em;
      margin-bottom: 1em;
      &:extend(#parent1 all); /* this causes the #parent1 selector to become
                             #parent1, #parent2 in the output css, thus
                             making the connection to .child2 */
}

.child2这将为具有关系的父级生成分组 CSS ：

#parent1 .child2,
#parent2 .child2 {
  display: none;
  margin-top: 1em;
}
#parent1 .child2 .textbox,
#parent2 .child2 .textbox {
  width: 97%;
}
#parent1 .child2 .anchor,
#parent2 .child2 .anchor {
  margin-right: 0.5em;
}
#parent1child1 {
  display: none;
}
#parent2 {
  margin-top: 1em;
  margin-bottom: 1em;
}

选项“b”

这可能是 LESS 中分组和代码清晰/简洁的最佳解决方案，并保持 id 的嵌套与 OP 最初的一样，并且还允许 #parent1 在需要时拥有自己的属性：

#parent1 {
   #parent1child1 {
       display: none;
   }
   .child2 { /* define child element first in #parent1 */
     display: none;
     margin-top: 1em;

     .textbox {
          width: 97%;
     }

     .anchor {
          margin-right: 0.5em;
     }
   }
}

#parent2 {
   margin-top: 1em;
   margin-bottom: 1em;
  .child2 {&:extend(#parent1 .child2 all);} /* extend child def for #parent2 */
}

这会产生这个 CSS 以及很好地分组的父母：

#parent1 #parent1child1 {
  display: none;
}
#parent1 .child2,
#parent2 .child2 {
  display: none;
  margin-top: 1em;
}
#parent1 .child2 .textbox,
#parent2 .child2 .textbox {
  width: 97%;
}
#parent1 .child2 .anchor,
#parent2 .child2 .anchor {
  margin-right: 0.5em;
}
#parent2 {
  margin-top: 1em;
  margin-bottom: 1em;
}

这可以颠倒过来（#parent2可以包含.child2定义，并对其进行#parent1扩展，这会将所有组合代码放在后面#parent2）。

摘要：解决方案#1 或#3b 可能最适合我想象的 OP 的实际需求。

于 2013-07-20T19:55:52.440 回答
1

我想您可以使用父组合器 ( &) 并#parent2在第二个块中选择： 

#parent1, #parent2
{    
      &#parent2{               /* <- styles applied to #parent2 only */
        margin-top: 1em;
        margin-bottom: 1em;
      }   

      &#parent1 #parent1child1 /* note: IDs are supposed to be unique, */
      {                        /* so just select #parent1child1  */          
         display: none;
      } 

      .child2
      {
           display: none;
           margin-top: 1em;

           .textbox
           {
                width: 97%;
           }

           .anchor
           {
               margin-right: 0.5em;
           }
      }
 }

但我认为您的原始代码更清晰。

于 2013-07-19T13:39:17.930 回答