Question

我们说我有一个名为push的课程。

我目前在这里上课：

city-toggler

现在我需要将#city { .city-header { .box { .city-toggler { //styles here } } } }元素添加到网站中完全不相关的位置，例如：

city-toggler

如果不复制上面的所有样式，如何在LESS中执行此操作？

我想我可以将.footer-holder -> .footer -> .footer-section -> .city-toggler从LESS结构中取出并单独使用，但是有更好的解决方案吗？

Answer 1

如果city-toggler不依赖于特定的上下文，那么定义.city-toggler { /* all styles of a default city-toggler */ } #city { /* ... */ .city-toggler { /* overrides that apply only to city-togglers in this context */ } } #footer { /* same as for #city */ }上下文无关紧要。您无需复制任何代码。

要么这样做：

#city, #footer {
  .city-toggler {
    /* all styles of a default city-toggler */
  }
}

#city {
  /* ... */
  .city-toggler {
    /* overrides that apply only to city-togglers in this context */
  }
}

或者，为了不复制代码（甚至不在编译的CSS中，例如通过mixins），但为了防止在任何上下文中使用city-toggler，请执行以下操作：

<div class="wdgt_widget" style="border:1px solid #1d8be0 !important; border-radius:8px  !important; padding:11px  !important; width:300px !important; height:64px  !important; cursor:pointer  !important; box-sizing: border-box  !important;" onclick="location.href='https://ratecard.io/staffing-ms'"></div>

Answer 2

Mixins应该适合你：

   .my-mixin{
      background-color:#FFF;
   }
   #city {
    .city-header {
        .box {
            .city-toggler {
                .my-mixin;
            }
        }
    }
    .otherplace {
      .city-toggle {
        .my-mixin;
      }
    }
}

在LESS的两个非常不同的环境中使用相同的类？

2 个答案: