在useTablet
设置为true
时,为了仅使用下面的媒体查询,我缺少什么?
@useTablet: true;
@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
.footer{
width: 100%;
@media @tablet when (@useTablet = true){
width: 768px;
}
}
ParseError: Missing closing ')' on line 12, column 31:
11 width: 100%;
12 @media @tablet when (@use = true){
13 width: 768px;
答案 0 :(得分:4)
不,Less不允许在媒体查询(或任何其他规则)语句中直接使用警卫。尽管将媒体块嵌套在一个受保护的块中,反之亦然,但这不是问题。 E.g:
@use-tablet: true;
@tablet: ~"only screen and (min-width: 720px) and (max-width: 959px)";
.footer {
width: 100%;
& when (@use-tablet) {
@media @tablet {
width: 768px;
}
}
}
在现代的Less中,通过mixin抽象整个事物通常更实用:
// usage
@use-tablet: true;
.footer {
width: 100%;
.tablet({
width: 768px;
});
}
// impl.
.tablet(@style) when (@use-tablet) {
@media only screen
and (min-width: 720px)
and (max-width: 959px)
{@style();}
}