Sass .scss：嵌套和多個類？我正在使用Sass（.scss）來完成我當前的項目。以下示例：HTML<div class="container desc">
<div class="hello">
Hello World
</div></div>SCSS.container {
background:red;
color:white;
.hello {
padding-left:50px;
}}這非常有效。我可以在使用嵌套樣式時處理多個類。在上面的示例中，我正在談論這個：CSS.container.desc {
background:blue;}在這種情況下，所有div.container通常會red，但div.container.desc會是藍色的。我如何container用Sass將其嵌入其中？
2 回答
Qyouu
TA貢獻1786條經驗 獲得超11個贊
您可以使用父選擇器引用 &，它將在編譯后由父選擇器替換：
對于你的例子：
.container {
background:red;
&.desc{
background:blue;
}}/* compiles to: */.container {
background: red;}.container.desc {
background: blue;}該&會徹底解決，因此，如果你的父母選擇嵌套本身，嵌套將更換前解決&。
這種表示法最常用于編寫偽元素和類：
.element{
&:hover{ ... }
&:nth-child(1){ ... }}但是，您可以放置&幾乎任何您喜歡的位置*，因此也可以使用以下內容：
.container {
background:red;
#id &{
background:blue;
}}/* compiles to: */.container {
background: red;}#id .container {
background: blue;}但請注意，這會以某種方式破壞您的嵌套結構，從而可能會增加在樣式表中查找特定規則的工作量。
*：在前面不允許有空格以外的其他字符&。所以你不能直接連接selector+ &- #id&會拋出錯誤。
幕布斯6054654
TA貢獻1876條經驗 獲得超7個贊
如果是這種情況，我認為您需要使用更好的方法來創建類名或類名約定。例如，就像你說的那樣，你希望.container課程根據具體的用法或外觀有不同的顏色。你可以這樣做：
SCSS
.container {
background: red;
&--desc {
background: blue;
}
// or you can do a more specific name
&--blue {
background: blue;
}
&--red {
background: red;
}}CSS
.container {
background: red;}.container--desc {
background: blue;}.container--blue {
background: blue;}.container--red {
background: red;}上面的代碼基于類命名約定中的BEM方法。您可以查看以下鏈接：BEM - 塊元素修改器方法
添加回答
舉報
0/150
提交
取消