SASS / SCSS - 简单的`display：none`属性在编译时被扰乱

Question

我有这个SASS（SCSS）定义：

@media #{$mq_phone} {
    .no-phone: {
        display: none;
    } 
}

编译时，它变为：

@media screen and (max-width: 500px) {
    .no-phone-display: none; 
}

我很困惑

我的期望：

@media screen and (max-width: 500px) {
    .no-phone: { display: none; }
}

知道我做错了什么？

Answer 1

只需删除:选择器末尾的冒号.no-phone:，如下所示：

@media #{$mq_phone} {
    .no-phone {
        display: none;
    } 
}

<强> Demo