Чтоб не замусоривать код веб-страниц классами, которые предлагает фреймворк Bootstrap, лучше добавить свойства из этих классов к своим классам либо id, которые и так уже присутствуют в коде — для этого в CSS-препроцессоре LESS есть функция extend. Однако оно не всегда работает: код
.logo {
&:extend(.col-xs-6);
&:extend(.col-sm-4);
&:extend(.col-md-6);
}
в лучшем случае LESS молча проигнорирует, а может ещё и выругаться, прекратив обработку.
Работает другое:
.logo {
.make-xs-column(6);
.make-sm-column(4);
.make-md-column(6);
}
Результат —
.logo {
float: left;
width: 50%;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media (min-width: 480px) {
.logo {
float: left;
width: 33.33333333333333%;
}
}
@media (min-width: 960px) {
.logo {
float: left;
width: 50%;
}
}
Рецепт найден на https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/