Възможно ли е да предадете линия на css кодиране на по-малко като променлива? - css, twitter-bootstrap, по-малко, медийни заявки

Опитвам се да създам система, която ще извеждаразлични размери на шрифта и височина на линията за всяка отделна заявка за медии, като по този начин се сблъсках с проблем.

Функцията

.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);
}
}

Използвам Bootstrap за моя отзивчив дизайн и променливите @screen -..- min се отнасят до стойностите на пикселите, когато екранът ще промени размера.

Функцията за размер на шрифта просто приема размер на шрифта и извежда размера на шрифта и височината на реда въз основа на множителя.

Поканата (пример)

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

Основният ми проблем е, когато предавам низ на @ media-dev, който се извежда в моя CSS като низ, все пак имам да го премахна от тагове, когато се предава обратно в шрифт-размер-медия.

Отговори:

Лично аз бих могъл да напиша подобен миксин нещо подобно (добре, режим на скициране):

.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);
});
}

(още веднъж, не знаейки как може действително да се използва, така че да не оптимизираме нещата до смърт).

За всеки, който се сблъска с подобен проблем, намерих отговор.Как да прехвърлите име на свойство като аргумент на mixin в по-малко)

.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);
}
}

Включването на ~ изглежда да премахне етикетите на низовете преди обработката на LESS.