条件媒体查询

时间:2016-01-20 14:11:49

标签: less

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;

1 个答案:

答案 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();}
}