É possível passar uma linha de codificação css em menos como uma variável? - css, twitter-bootstrap, less, media-queries

Eu estou tentando criar um sistema que irá produzirtamanhos de fonte diferentes e alturas de linha para cada consulta de mídia diferente, ao fazer isso, eu tenho sido confrontado com um problema. Qualquer ajuda seria muito apreciada.

A função

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

Eu estou usando o Bootstrap para meu design responsivo e as variáveis ​​@screen -..- min referem-se a valores de pixel quando a tela será redimensionada.

A função tamanho da fonte simplesmente usa um tamanho de fonte e exibe o tamanho da fonte e a altura da linha com base no multiplicador.

A chamada (exemplo)

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

Meu principal problema é quando eu passo a string para @mídia-dev e é enviado no meu CSS como uma string, existe uma maneira de remover as tags de string quando elas são passadas de volta para a mídia do tamanho da fonte.

Respostas:

Pessoalmente, eu provavelmente escreveria algo como (bem, desenhando):

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

(mais uma vez, sem saber como isso pode ser realmente usado, então não otimizar as coisas até a morte).

Para qualquer outra pessoa que se deparar com um problema semelhante, eu encontrei uma resposta.Como passar um nome de propriedade como um argumento para um mixin em menos)

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

Incluir o ~ parece remover as tags de string antes de processar o LESS.