Reusing LESS nested styles

问题:

Let's say that I have a style defined using Less:

ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

Later on, I want to re-use the unstyled class:

.my-list {
  .unstyled;
}

This doesn't work, however, and I can't figure out the magic to make it work. Any thoughts?

回答1:

You can't re-use arbitrary class definitions, only mixins (those starting with a dot). In this case you'll need to duplicate it.

回答2:

Try this:

.unstyled {
  margin-left: 0;
  list-style: none;
}

.my-list {
  .unstyled;
}

You won't be able to nest .unstyled if it's defined as ul.unstled and ol.unstyled.

回答3:

Since you can't reuse .unstyled when it's a nested style and you probably don't want to edit the Bootstrap source code, I'd suggest you just assign both classnames to your list:

<ul class="unstyled my-list" />