CODEWITHSUNDEEP
csstwitter-bootstrapless
Ali Torbati
Ali Torbati

Reputation: 398

How to avoid LESS nesting under a duplicate selector?

I'm trying to namespace some legacy bootstrap css until I can remove it completely.

Most of the namespacing is working, but anything using the .clearfix mixin is being nested twice under the .legacy class.

Any ideas why this is happening, or how to avoid it?

// original index.less:

...
@import "../vendor/bootstrap/3.3.5/less/scaffolding.less";
@import "../vendor/bootstrap/3.3.5/less/type.less";
...

// updated index.less:

.legacy {
  ...
  @import "../vendor/bootstrap/3.3.5/less/scaffolding.less";
  @import "../vendor/bootstrap/3.3.5/less/type.less";
  ...
}

// expected output:

...
.legacy h1 { ... }
.legacy .clearfix:before { ... }
.legacy .row:before { ... }
...

// actual output:

...
.legacy h1 { ... }
.legacy .clearfix:before { ... }
.legacy .legacy .row:before { ... }
...

Upvotes: 4

Views: 373

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240928

Workaround:

You can avoid this by importing the compiled CSS and treating it like LESS by using the (less) flag:

.legacy {
  @import (less) "../vendor/bootstrap/3.3.5/dist/css/bootstrap.css";
}

Explaination:

The problematic double nesting that you were seeing is actually expected behavior.

Here is a very simplified representation of what was happening:

.legacy {
  // The clearfix mixin
  .clearfix() {
    color: red;
  }

  // Implementation of the mixin so that the class can be used
  .clearfix {
    .clearfix();
  }

  // Extend:
  .row {
    &:extend(.clearfix all);
  }
}

Output:

.legacy .clearfix,
.legacy .legacy .row {
  color: red;
}

As you can see, the simplified .clearfix() method is implemented and the .row class extends it using the syntax &:extend(.clearfix all). It's important to note that the ampersand, &, is a LESS parent selector which represents the parent selector string.

In other words, if we replace & with the parent selector, it would be:

.legacy .row:extend(.clearfix all) {}

Since .clearfix is nested under .legacy, you would get the double nesting:

.legacy .legacy .row {
  color: red;
}

All of the classes that implement this mixin were using &:extend(.clearfix all), which resulted in the double, redundant nesting that you were seeing.

Upvotes: 5

Related Questions