Does LESS prevent duplicate styles?

Question

If I define the following nested styles in LESS:

.nav-bar {
    .navbar-brand {
        background: #000;
    }
}

.nav-bar {
    .navbar-brand {
        background: #fff;
    }
}

It results in:

.nav-bar .navbar-brand {
  background: #000;
}
.nav-bar .navbar-brand {
  background: #fff;
}

I was hoping that these might be detected as duplicates. So, the result would simply be:

.nav-bar .navbar-brand {
  background: #fff;
}

.. as the first style would be overwritten. I know that the web browser would treat it as such, whereby the second styles properties would overwrite the first. I'm more concerned about file size though. I was hoping that I could download LESS for Bootstrap, then in a custom LESS file, overwrite styles for that particular project. Is this feature available by the compiler?

Well written/formatted question. No reason for this to be down-voted... — ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, Jan 22 '15 at 11:08

score 4 · Accepted Answer · edited May 23 '17 at 10:29

You should use https://github.com/less/less-plugin-clean-css with the advanced option turned on.

Run npm install less-plugin-clean-css after that you can use lessc file.less --clean-css="advanced".

With the above command:

.nav-bar {
    .navbar-brand {
        background: #000;
    }
}

.nav-bar {
    .navbar-brand {
        background: #fff;
    }
}

compiles into:

.nav-bar .navbar-brand{background:#fff}

Also see: How to keep duplicate properties in compiled CSS file when use LESS?

Does LESS prevent duplicate styles?

1 Answers1