I recently discovered a link import option ( http://lesscss.org/features/#import-options ).
So, I started reorganizing my existing fewer files to remove duplicates and take advantage of link options. In one of my smaller files, I mix Bootstrap 3 with my mixins:
@import (reference) "../../../../less/variables.less";
@import (reference) "../../../../less/vendor/bootstrap/variables.less";
@import (reference) "../../../../less/vendor/bootstrap/mixins.less";
@import (reference) "../../../../less/vendor/bootstrap/grid.less";
.horizontal-submit-container {
.make-sm-column(6);
.make-sm-column-offset(6);
}
After compiling with the link flag, this is what I get from the horizontal-submit-container mixin:
.horizontal-submit-container {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
And this css is incomplete - it lacks some @media lines. However, when I remove the reference flag, I get the proper value:
.horizontal-submit-container {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 768px) {
.horizontal-submit-container {
float: left;
width: 50%;
}
}
@media (min-width: 768px) {
.horizontal-submit-container {
margin-left: 50%;
}
}
source
share