Is it possible to pass the css encoding string to the smaller one as a variable?
I am trying to create a system that will output different font sizes and line heights for every other media query, thus I am facing a problem. Any help would be much appreciated.
Function
.return-size(@size) when (@size = mob) { @media-dev: "max-width: @media-mobile"; }
.return-size(@size) when (@size = xs) { @media-dev: "max-width: @screen-xs-max"; }
.return-size(@size) when (@size = sm) { @media-dev: "min-width: @screen-sm-min"; }
.return-size(@size) when (@size = md) { @media-dev: "min-width: @screen-md-min"; }
.return-size(@size) when (@size = lg) { @media-dev: "min-width: @screen-lg-min"; }
.font-size-media(@size, @font-size, @multipler: 1.5){
.return-size(@size);
@media (@media-dev){
.font-size(@font-size, @multipler);
}
}
I'm using Bootstrap for my responsive design and the @screen -..- min variables refer to the pixel values ββwhen the screen is resized.
The font-size function simply takes the font size and outputs the font size and line height based on a multiplier.
Call (example)
.font-size-media(xs,12);
My main problem is when I pass a string to @ media-dev it outputs in my CSS as a string anyway to break it down into string tags when it gets passed back to font-size-media.
source to share
Personally, I would probably write a mixin like this something like (well, sketch mode is on):
.media(@device, @styles) {
@mob: ~"max-width:" @media-mobile;
@xs: ~"max-width:" @screen-xs-max;
@sm: ~"min-width:" @screen-sm-min;
@md: ~"min-width:" @screen-md-min;
@lg: ~"min-width:" @screen-lg-min;
@media (@@device) {@styles();}
}
.font-size-media(@device, @font-size, @multiplier: 1.5) {
.media(@device, {
.font-size(@font-size, @multiplier);
});
}
(again, not knowing how it can be used, so not optimizing things to death).
source to share
For anyone else who comes across a similar problem, I found the answer. ( How to pass property name as argument to mixin less )
.return-size(@size) when (@size = mob) { @media-dev: max-width;@measurement: @media-mobile; }
.return-size(@size) when (@size = xs) { @media-dev: max-width;@measurement: @screen-xs-max; }
.return-size(@size) when (@size = sm) { @media-dev: min-width;@measurement: @screen-sm-min; }
.return-size(@size) when (@size = md) { @media-dev: min-width;@measurement: @screen-md-min; }
.return-size(@size) when (@size = lg) { @media-dev: min-width;@measurement: @screen-lg-min; }
.font-size-media(@size, @font-size, @multipler: 1.5){
.return-size(@size);
@media (~"@{media-dev}:@{measurement}"){
.font-size(@font-size, @multipler);
}
}
Including ~ is like removing line tags before processing LESS.
source to share