更新時(shí)間:2022-12-19 來源:黑馬程序員 瀏覽量:
盡管Sass可以把反復(fù)使用的CSS屬性值定義成變量,但是為了完善Sass的功能,Sass基于變量提供了更為強(qiáng)大的工具,即規(guī)則嵌套。只有當(dāng)Sass變量與規(guī)則嵌套一起使用時(shí),才能發(fā)揮其更大的作用。下面講解規(guī)則嵌套的使用方法。
在使用CSS編寫代碼的時(shí)候,眾所周知,重復(fù)寫選擇器是非常煩瑣的。例如,要寫一大串指向頁面中同一塊的樣式時(shí),往往需要一遍又一遍地寫同一個(gè)ID來實(shí)現(xiàn),如下所示。
#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
為了解決重復(fù)書寫ID選擇器的問題,Sass提供了嵌套規(guī)則,只寫一遍即可實(shí)現(xiàn),具體代碼如下。
#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } }
在上述代碼中,Sass在編譯輸出CSS時(shí)會(huì)自動(dòng)把這些嵌套規(guī)則處理好,避免代碼的重復(fù)書寫,且使樣式的可讀性更高。編譯后的代碼如下。
#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
【AI設(shè)計(jì)】北京143期畢業(yè)僅36天,全員拿下高薪offer!黑馬AI設(shè)計(jì)連續(xù)6期100%高薪就業(yè)
2025-09-19【跨境電商運(yùn)營】深圳跨境電商運(yùn)營畢業(yè)22個(gè)工作日,就業(yè)率91%+,最高薪資達(dá)13500元
2025-09-19【AI運(yùn)維】鄭州運(yùn)維1期就業(yè)班,畢業(yè)14個(gè)工作日,班級(jí)93%同學(xué)已拿到Offer, 一線均薪資 1W+
2025-09-19【AI鴻蒙開發(fā)】上海校區(qū)AI鴻蒙開發(fā)4期5期,距離畢業(yè)21天,就業(yè)率91%,平均薪資14046元
2025-09-19【AI大模型開發(fā)-Python】畢業(yè)33個(gè)工作日,就業(yè)率已達(dá)到94.55%,班均薪資20763元
2025-09-19【AI智能應(yīng)用開發(fā)-Java】畢業(yè)當(dāng)天offer率91%,薪資1W+占比54.2%,班級(jí)均薪12k+
2025-09-19