是否可以将一行css编码作为变量传递给less？答案

【问题标题】：Is it possible to pass a line of css coding into less as a variable?是否可以将一行css编码作为变量传递给less？
【发布时间】：2015-07-16 20:59:29
【问题描述】：

我正在尝试创建一个系统，该系统将为每个不同的媒体查询输出不同的字体大小和行高，这样做我遇到了一个问题。任何帮助将不胜感激。

功能

.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 函数只取一个字体大小，然后根据乘数输出字体大小和行高。

电话（示例）

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

我的主要问题是，当我将字符串传递给@media-dev 时，它在我的 CSS 中作为字符串输出，当它被传递回 font-size-media 时，是否可以将其从字符串标签中剥离。

【问题讨论】：

我已经设法解决了 50% 的问题，方法是将警卫的输出更改为： $media-dev: max-width;$measurement: $media-mobile;并将 font-size-media 调用更改为： $media ( min-width: $measurement){ 但是，由于所有的守卫都不是 min-width 这并不能解决问题。 PS我不得不将变量符号更改为$，因为stackoverflow会中断LESS作为用户通知。
对于 cmets 中的代码，请使用反引号 `yourcode`。对于引号问题，使用~"" 而不是""。对于 Q 一般而言，还可以方便地提及您将如何使用这样的 mixin（我怀疑整个事情可以大大简化）。

标签： css twitter-bootstrap less media-queries

【解决方案1】：

就我个人而言，我可能会编写这样的 mixin（好吧，开启草图模式）：

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

（再说一次，不知道如何实际使用它，所以没有优化到死）。

【讨论】：

【解决方案2】：

对于遇到类似问题的其他人，我已经找到了答案。(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);
    }
}

包含 ~ 似乎在处理 LESS 之前删除了字符串标签。

【讨论】：