LESS Mixin with variable and content
So in sass, a mixin can do:
@mixin bp($point) {
@if $point == papa-bear {
@media (max-width: 1600px) { @content; }
}
@else if $point == mama-bear {
@media (max-width: 1250px) { @content; }
}
@else if $point == baby-bear {
@media (max-width: 600px) { @content; }
}
}
And can be used like:
.img {
width: 33.33%;
@include bp(baby-bear) {
width: 100%;
}
}
Is there a similar way in LESS to generate css dynamically? Especially styling block passing like what does @content
here.
+3
source to share
1 answer
Indeed, you can use "Passing Mixing Rulesets" as mentioned in @ seven-phase-max.
For your breakpoints (bear types) in Less
You can use pattern-matching :
.bp(papa-bear,@rules) {
@media (max-width: 1200px) {@rules();}
}
.bp(mama-bear,@rules) {
@media (max-width: 800px) {@rules();}
}
.bp(baby-bear,@rules) {
@media (max-width: 600px) {@rules();}
}
.img {
width: 33.33%;
.bp(baby-bear; { width: 100%;});
}
Or fuses for mixing :
.bp2(@point,@rules) {
& when(@point = baby-bear) {
@media (max-width: 600px) {@rules();}
}
& when(@point = mama-bear) {
@media (max-width: 800px) {@rules();}
}
& when(@point = papa-bear) {
@media (max-width: 1200px) {@rules();}
}
}
.img {
width: 33.33%;
.bp2(baby-bear; { width: 100%;});
}
In your example, you can also write one mixin:
.bp3(@point,@rules) {
@query: ~"(max-width: @{point})";
@media @query {@rules();}
}
.img {
width: 33.33%;
.bp3(600px; { width: 100%;});
}
Or when you need to reuse bear types:
@baby-bear-max-width: 600px;
@mama-bear-max-width: 800px;
@mama-bear-max-width: 1200px;
.bp4(@bear,@rules) {
@query: ~"(max-width: @{@{bear}-max-width})";
@media @query {@rules();}
}
.img {
width: 33.33%;
.bp4(baby-bear; { width: 100%;});
}
+7
source to share