是否可以将一行css编码作为变量传递给less?
Is it possible to pass a line of css coding into less as a variable?
我正在尝试创建一个系统,该系统将为每个不同的媒体查询输出不同的字体大小和行高,但在这样做时我遇到了一个问题。非常感谢任何帮助。
函数
.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 中作为字符串输出,当它传回字体时,是否要去除字符串标签-尺寸媒体。
对于遇到类似问题的任何其他人,我已经找到了答案。(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 之前删除了字符串标签。
就我个人而言,我可能会写这样的混合(好吧,草图模式打开):
.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);
});
}
(还是那句话,不知道具体怎么用,所以没优化死)
我正在尝试创建一个系统,该系统将为每个不同的媒体查询输出不同的字体大小和行高,但在这样做时我遇到了一个问题。非常感谢任何帮助。
函数
.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 中作为字符串输出,当它传回字体时,是否要去除字符串标签-尺寸媒体。
对于遇到类似问题的任何其他人,我已经找到了答案。(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 之前删除了字符串标签。
就我个人而言,我可能会写这样的混合(好吧,草图模式打开):
.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);
});
}
(还是那句话,不知道具体怎么用,所以没优化死)