這是一組CSS屬性,它允許使用一個(gè)類的屬性到另一個(gè)類,包括類的名稱作為其屬性。在LESS中,你可以使用class和id選擇同樣的方式作為CSS樣式聲明混入。它可以存儲(chǔ)多個(gè)值,并且無論何時(shí)可以在必要時(shí)代碼重用。
<html> <head> <title>Nested Rules</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <h1>First Heading</h1> <p>LESS is a dynamic style sheet language that extends the capability of CSS.</p> <div class="myclass"> <h1>Second Heading</h1> <p>LESS enables customizable, manageable and reusable style sheet for web site.</p> </div> </div> </body> </html>
接下來,產(chǎn)生了 style.less.
.container{ h1{ font-size: 25px; color:#E45456; } p{ font-size: 25px; color:#3C7949; } .myclass{ h1{ font-size: 25px; color:#E45456; } p{ font-size: 25px; color:#3C7949; } } }
lessc style.less style.css
.container h1 { font-size: 25px; color: #E45456; } .container p { font-size: 25px; color: #3C7949; } .container .myclass h1 { font-size: 25px; color: #E45456; } .container .myclass p { font-size: 25px; color: #3C7949; }