У меня проблема с нашими разработчиками, использующими "неправильные" миксины медиа-запросов и создающие беспорядочный / избыточный код:
.foo {
.bar {
width: 100%;
}
.foobar {
font-size: 2em;
}
@include desktop-state {
.bar {
width: 50%;
}
.foobar {
font-size: 3em;
}
}
}
вместо:
.foo {
.bar {
width: 100%;
@include desktop-state {
width: 50%;
}
}
.foobar {
font-size: 2em;
@include desktop-state {
font-size: 3em;
}
}
}
Я хотел бы показать предупреждение, когда @content миксина содержит селекторы:
@mixin desktop-state {
@if (@content contains selectors) { // <-- How to do this?
@warn "You're about to create messy code, try not to use selectors within this mixin.";
}
@media all and (min-width: $desktop-breakpoint) {
@content;
}
}
Как это сделать (если это вообще возможно)?