在SASS的介紹文檔里，有下面這段代碼：?button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 }
?}編譯成CSS后是這樣的：button {
?????? background: linear-gradient(#444, #222);
}/* 注意看下面這行 */.no-cssgradients button { background: #333}但是，當有多個層級的選擇器后，他將始終獲得最頂層的選擇器form {
?button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 } // 問題在這行
?}
}如此，我期望編譯后.no-cssgradients的順序是這樣的：form .no-cssgradients button但他的順序卻是這樣的：.no-cssgradients form button
2 回答
MMTTMM
TA貢獻1869條經驗 獲得超4個贊
既然你的結構是form>.no-css>button
為什么卻在SCSS里用button包住.no-css呢？
form { button { background: linear-gradient(#444,#222); } .no-css{ background: #333;
button {@extend .no-css}
}
}=====>
form button { background: linear-gradient(#444444, #222222); }form .no-css, form .no-css button { background: #333; }
慕工程0101907
TA貢獻1887條經驗 獲得超5個贊
實現你需要的效果，可以考慮下面的兩種寫法：
form { button { background: linear-gradient(#444,#222);
} @at-root #{&} .no-cssgradients { button { background:#333;
}
}
}或者：
form { button { background: linear-gradient(#444,#222);
} .no-cssgradients { button { background:#333;
}
}
}這兩種方法轉譯出來都是：
form button { background: linear-gradient(#444444, #222222); }form .no-cssgradients button { background: #333; }假設置@at-root到時和&具有相同的機制，那么實現你要的功能就方便多了。
- 2 回答
- 0 關注
- 256 瀏覽
添加回答
舉報
0/150
提交
取消