Does LESS prevent duplication of styles?

Question

If I define the following nested styles in LESS:

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

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

It leads to:

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

I was hoping they could be detected as duplicates. Thus, the result will be simple:

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

.. as the first style will be overwritten. I know that the web browser will consider it as such, as a result of which the properties of the second styles will be overwritten by the first. However, I'm more worried about file size. I was hoping I could download LESS for Bootstrap and then rewrite the styles for this particular project in a custom LESS file. Is this function accessible by the compiler?

Answer 1

https://github.com/less/less-plugin-clean-css advanced.

npm install less-plugin-clean-css, lessc file.less --clean-css="advanced".

:

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

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

:

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

.: CSS LESS?