集媒體查詢基於使用SASS

Question

子女的數目我在SASS以下媒體查詢創建響應菜單：jsFiddle

它的偉大工程，但我想提出基於@media查詢變化max-width財產有多少菜單項，例如有這樣的事情：

@function calculateWidth($element) { 
    @return $element.width; // return actual width (if possible?) 
    // or, return something like: 
    @return 50px * $element.children.length; 
} 

@media (max-width: calculateWidth('.vm-menu')){ 
    //.... whatever goes inside the query .... 
} 

這是可能與單獨SASS？或者SASS/JS組合？

我需要這個的原因是，菜單中的項目數量因登錄用戶的權限而異。因此，我可以將其設置爲可能的菜單項的最大數量，但對於顯示3-4個項目的人來說，半空菜單崩潰時看起來很尷尬。

Answer 1

我不認爲CSS可以知道孩子的元素，sass編譯爲CSS，所以它遵循相同的規則。最好編輯你的html服務器端，或者用javascript添加類。例如給菜單一類.has-4-children，然後寫sass類似...

.menu 
    &.has-4-children 
    // Styles here