保持个人父母的造型，同时包括多个父母的孩子

时间：2013-07-19 13:29:52

标签： css less

是否有编写以下代码而没有每个父级的单独块？

#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;
           }
      }
 }

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

2 个答案:

答案 0 :(得分：3)

我有一个担忧

正如你在一个回答中的评论所说，我根本没有找到可接受的解决方案（尽管从最初的写作开始就是＆＃34;接受＆＃34;答案） 。虽然这是一个有点创造性的解决方案，让它＆＃34;工作，＆＃34;它所产生的无意义选择器（如#parent2#parent1 #parent1child1）的产生，以及它所产生的#parent2#parent2选择器令人讨厌的冗余似乎过于缺乏正确且不关心正确编码。一个人是否有这样的态度尚不清楚，尽管他的评论似乎进一步证明了这一点＆＃34;使用CSS预处理器的目的是节省一些开发时间，而不是生成有效的CSS。＆＃34;在我的观点中， 都应该是目标。 以下是他的解决方案的具体输出以及我认为不可接受的内容：

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的网站没有停机，请尽快来。

减少代码的三个想法

您对问题的标题会提出与问题中所述要求略有不同的内容。标题说明：＆＃34;保持个人父母的造型，同时包括多个父母的孩子，＆＃34;这意味着在单个父样式中的子代码的包含（而不必重复代码）。为此，请参阅下面的解决方案＃2。您在问题中的要求以不同的方式重申，＆＃34;无论如何都要编写以下代码，而不是每个父母都有单独的块，＆＃34;它将标题的要求缩小到在一个代码块中定义所有内容的特定解决方案（我认为这是一个糟糕的编码实践，因为它变得不那么清楚发生了什么......并且一个注意到OP的原始版本代码比他提供的解决方案更清晰。要在CSS中实际实现父组，同时保持LESS中的代码清晰度和简洁性，请参阅解决方案＃3a和＃3b。

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

解决方案＃1

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

#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代码＆＃34;膨胀，＆＃34;但这里与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

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

选择＆＃34; a＆＃34;

这使用了#parent1child1对于页面应该是唯一的这一事实，因此在大多数情况下不需要驻留在#parent1下（但是，偶尔存在id和＃39嵌套的合法案例; S）。它还假设#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;
}

选择＆＃34; b＆＃34;

这可能是LESS中分组和代码清晰度/简洁性的最佳解决方案，并且保持id最初具有的嵌套，并允许＃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实际需求。

答案 1 :(得分：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;
           }
      }
 }

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

相关问题
最新问题