有没有相当于该SASS功能的LESS? [英] Is there a LESS equivalent to this SASS functionality?
问题描述
我正在研究某些内容,包括媒体查询和许多重复代码-即使使用mixins.
I'm working my way through some stuff which includes media queries and lots of repetitive code - even with mixins.
我偶然发现了一个包含此SASS代码的网站:
I came across a website that included this SASS code:
html{
@include responsive("font-size", 11px,
(
600px: 12px,
800px: 13px,
1180px: 14px,
1300px: 15px,
1750px: 16px,
1900px: 17px,
2100px: 18px,
2400px: 19px
)
);
}
不幸的是,这里没有进一步提及响应式",所以我对此并不了解,但是我相信目标是使用规则创建媒体查询输出.
Unfortunately, there was no further reference to "responsive" so I don't know much about it, but I believe the goal is to create media query output with the rules.
我了解LESS中的规则集,但是否有可能像在这里完成的那样链接规则集?
I know about rulesets in LESS, but is it possible to chain rulesets like they have accomplished here?
提前谢谢.
推荐答案
关于Less,这可能是最好的选择.基本上,我们使用2D数组列表(具有媒体大小和属性值)作为mixin的参数.请参考内联注释以获取进一步的解释.
This might be your best bet with respect to Less. Basically, we are using a 2D array list (with the media size and property value) as a parameter to the mixin. Please refer inline comments for further explanation.
@array: 600px 12px, 700px 13px, 800px 14px; /* 2D array with media size & value */
.responsive(@property; @defaultValue; @array){
@{property}: @defaultValue; /* default setting*/
.loop-media-query(@index) when (@index > 0){ /* loop for media query */
@mediaSize: extract(extract(@array,@index), 1); /* first array val is media size */
@font-size: extract(extract(@array,@index), 2); /* second array val is property value */
@mediaQuery: ~"(min-width: @{mediaSize})"; /* form the media query */
@media @mediaQuery{ /* output the settings */
@{property}: @font-size;
}
.loop-media-query(@index - 1);
}
.loop-media-query(length(@array));
}
.output{
.responsive(font-size; 11px; @array);
}
已编译的CSS:
.output {
font-size: 11px;
}
@media (min-width: 800px) {
.output {
font-size: 14px;
}
}
@media (min-width: 700px) {
.output {
font-size: 13px;
}
}
@media (min-width: 600px) {
.output {
font-size: 12px;
}
}
这篇关于有没有相当于该SASS功能的LESS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!