通配符嵌套選擇

Question

我的薩斯以下代碼位：

.c-panel-menu-c { 
    &.grid_6 { 
     float: right; 
    } 
} 

我需要有適用於與grid_啓動所有網格浮動權。只有當網格類被應用到一個也有c-panel-menu-c的元素時，float才應該被設置。

我想使用通配符選擇像

div[class*='grid_'] { 
    float:right 
} 

但我不知道是否有可能，我需要它的方式。類似於

.c-panel-menu-c { 
    &.div[class*='grid_'] { 
     vertical-align: top; 
    } 
} 

哪個行不通。

謝謝你的任何提示/建議。

Answer 1

問題是標記名稱......您不能在另一個選擇器的末尾連接標記名稱，例如div，就像使用類名稱一樣。讓我們來看看你的例子：

.c-panel-menu-c { 
    &.grid_6 { 
    ... 
    } 
} 

將返回

.c-panel-menu-c.grid_6 { ... } 

這是一個有效的選擇。但在安裝結束「DIV」（允許離開了屬性選擇部分現在）

.c-panel-menu-c { 
    &div { 
    ... 
    } 
} 

沒有意義（它也不可能在薩斯，所以你得到一個錯誤）作爲標籤名稱應始終位於類或id選擇器之前。如果我們添加一個屬性選擇器語句，這並不會改變，所以這就是爲什麼它不像您嘗試&div[class*='grid_']那樣工作。

你可以做什麼，是直接添加的屬性選擇前面的類名，比如：

.c-panel-menu-c { 
    &[class*='grid_'] { 
     ... 
    } 
} 

這將編譯爲：

.c-panel-menu-c[class=*'grid_'] { ... } 

，並選擇具有課堂上的一切.c-panel-menu-c和含有grid_的類。