CODEWITHSUNDEEP
less
Brian Genisio
Brian Genisio

Reputation: 48127

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?

Upvotes: 8

Views: 7424

Answers (3)

Sander
Sander

Reputation: 1193

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" />

Upvotes: 2

Christoph Leiter
Christoph Leiter

Reputation: 9345

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

Upvotes: 6

Alex Bain
Alex Bain

Reputation: 801

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.

Upvotes: 5

Related Questions