css - 在 LESS 的两个非常不同的上下文中使用相同的类？

Question

假设我有一个名为 city-toggler 的类。

我目前在这里上课:

#city {
    .city-header {
        .box {
            .city-toggler {
                //styles here
            }
        }
    }
}

现在我需要在网站中一个完全不相关的地方添加一个city-toggler元素，例如:

.footer-holder -> .footer -> .footer-section -> .city-toggler

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

我想我可以把 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 */
}

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

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

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