SASS/SCSS - 简单`显示：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