Is it possible to pass a line of css coding into less as a variable?

Question

I am trying to create a system that will output different font sizes and line heights for every different media query, in doing so I've been faced with a problem. Any help would be very much appreciated.

The 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 am using Bootstrap for my responsive design and the variables @screen-..-min relate to pixel values when the screen will resize.

The font-size function simply takes a font size and output the font size and line height based on the multiplier.

The Call (example)

.font-size-media(xs,12);

My main problem is when I pass the string to @media-dev it is outputted in my CSS as a string, is there anyway to strip it of the string tags when it gets passed back into font-size-media.

I've managed to solve 50% of the problem by changing the output of the guard to: $media-dev: max-width;$measurement: $media-mobile; And changed the font-size-media call to: $media ( min-width: $measurement){ However as all of the guards aren't min-width this doesn't solve the problem. P.S I had to change the variable symbols to $'s as stackoverflow interrupts LESS's as user notifications. — MCMXCII, May 06 '15 at 16:22
For a code in comments use backticks `\`yourcode\``. For the quotes problem use `~""` instead of `""`. And for the Q in general it would be handy to also mention how you're going to use such mixin (I have a suspicion that the whole thing can be vastly simplified). — seven-phases-max, May 06 '15 at 16:38

score 1 · Answer 1 · edited May 23 '17 at 12:08

For anyone else that comes across a similar problem, I've found an answer.(How to pass a property name as an argument to a mixin in 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 the ~ seems to remove the string tags before processing the LESS.

seven-phases-max · Accepted Answer · 2015-05-07T02:27:34.343

Personally I would probably write such mixin something like (well, sketching mode 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);
    });
}

(yet again, not knowing how it can be actually used, so not optimizing things to the death).

Is it possible to pass a line of css coding into less as a variable?

2 Answers2