設定メディアクエリーSASS

Question

を使用して、子供の数に基づいてI 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のクラスを与えてから、次のようなものを書きます。

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