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