在SASS的介紹文檔里，有下面這段代碼：?button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 }
?}編譯成CSS后是這樣的：button {
?????? background: linear-gradient(#444, #222);
}/* 注意看下面這行 */.no-cssgradients button { background: #333}但是，當(dāng)有多個(gè)層級(jí)的選擇器后，他將始終獲得最頂層的選擇器form {
?button { background: linear-gradient(#444,#222); .no-cssgradients & { background: #333 } // 問(wèn)題在這行
?}
}如此，我期望編譯后.no-cssgradients的順序是這樣的：form .no-cssgradients button但他的順序卻是這樣的：.no-cssgradients form button
2 回答
MMTTMM
TA貢獻(xiàn)1869條經(jīng)驗(yàn) 獲得超4個(gè)贊
既然你的結(jié)構(gòu)是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貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
實(shí)現(xiàn)你需要的效果，可以考慮下面的兩種寫(xiě)法：
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;
}
}
}這兩種方法轉(zhuǎn)譯出來(lái)都是：
form button { background: linear-gradient(#444444, #222222); }form .no-cssgradients button { background: #333; }假設(shè)置@at-root到時(shí)和&具有相同的機(jī)制，那么實(shí)現(xiàn)你要的功能就方便多了。
- 2 回答
- 0 關(guān)注
- 282 瀏覽
添加回答
舉報(bào)
0/150
提交
取消