patternMinor
Responsive mixin in LESS
Viewed 0 times
responsivemixinless
Problem
I wrote a responsive mixin for Less when I couldn't find a full featured one. Curious what other developers have done to solve this problem and hoping to improve/reduce my code since I'm very new to Less:
It would be invoked like:
Args are:
This would set
It would be invoked like:
element {
overflow: visible;
.responsive(768px, 0, min, {
overflow: hidden;
});
}Args are:
width, height, min|max, rulesThis would set
overflow: hidden for > 768px. You could also set max in the declaration to set overflow: hidden for < 768px..responsive(@width: 0, @height: 0, @type: min, @rules) {
.responsive-max() when(@type = max) {
.responsive-max-full() when(@width > 0) and (@height > 0) {
@media only screen and (max-width: @width) and (max-height: @height) {
@rules();
}
}
.responsive-max-width() when(@width > 0) and (@height 0) {
@media only screen and (max-height: @height) {
@rules();
}
}
.responsive-max-full();
.responsive-max-width();
.responsive-max-height();
}
.responsive-min() when(@type = min) {
.responsive-min-full() when(@width > 0) and (@height > 0) {
@media only screen and (min-width: @width) and (min-height: @height) {
@rules();
}
}
.responsive-min-width() when(@width > 0) and (@height 0) {
@media only screen and (min-height: @height) {
@rules();
}
}
.responsive-min-full();
.responsive-min-width();
.responsive-min-height();
}
.responsive-max();
.responsive-min();
}Solution
I think you're overcomplicating it. Typically, I think Less users just write the media queries inline with a variable. As in:
@tablet-min: ~"only screen and (min-width: 768)";
element {
overflow: visible;
@media @tablet-min {
overflow: hidden;
}
}Code Snippets
@tablet-min: ~"only screen and (min-width: 768)";
element {
overflow: visible;
@media @tablet-min {
overflow: hidden;
}
}Context
StackExchange Code Review Q#148100, answer score: 3
Revisions (0)
No revisions yet.