I created a sample to demonstrate this bug:
Settings.less
.vertical-gadient-bg(@top, @bottom) {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, @top 0%, @bottom 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, @top 0%, @bottom 100%);
/* Opera */
background-image: -o-linear-gradient(top, @top 0%, @bottom 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, @top), color-stop(1, @bottom));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, @top 0%, @bottom 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, @top 0%, @bottom 100%);
}
Less1.less
@import "Settings.less";
body {
.vertical-gadient-bg(#fff, #ddd);
}
Less2.less
@import "Settings.less";
div {
.vertical-gadient-bg(#fff, #ddd);
}
Combined.less
@import "Less1.less";
@import "Less2.less";
This sample, when Combined is generated, it duplicates the mix-in:
The output in this scenario:
body {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Opera */
background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dddddd));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Opera */
background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dddddd));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
}
div {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Opera */
background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dddddd));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Opera */
background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(1, #dddddd));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
}
