Est-il possible de passer une ligne de codage CSS en moins en tant que variable? - css, twitter-bootstrap, less, interrogations sur les médias

J'essaie de créer un système qui produiraDes tailles de police et des hauteurs de ligne différentes pour chaque requête de média, ce qui m'a amené à faire face à un problème. Toute aide serait très appréciée.

La fonction

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

J'utilise Bootstrap pour ma conception réactive et les variables @screen -..- min se rapportent aux valeurs en pixels lorsque l'écran sera redimensionné.

La fonction de taille de police prend simplement une taille de police et affiche la taille de police et la hauteur de ligne en fonction du multiplicateur.

L'appel (exemple)

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

Mon principal problème est que lorsque je passe la chaîne à @ media-dev, elle est affichée dans mon CSS sous forme de chaîne. Est-il possible de la supprimer des balises de chaîne lorsqu'elle est renvoyée dans font-size-media?

Réponses:

Personnellement, j'écrirais probablement ce type de mixin (par exemple, le mode dessin):

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

(encore une fois, ne sachant pas comment l'utiliser, n'optimisant pas à l'extrême).

Pour quiconque rencontre un problème similaire, j’ai trouvé une réponse ((Comment passer un nom de propriété comme argument à un mixin en moins)

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

Inclure le ~ semble supprimer les balises string avant de traiter le LESS.