تعریف
یکسری از ویژگی های CSS وجود دارد که به شما این اجازه را میدهد تا از ویژگی های یک کلاس در یک کلاس دیگر استفاده کنید. در LESS هم شما این اجازه را دارید تا همانند CSS با استفاده از کلاس یا id این کار را انجام دهید. میتوان در LESS چندین مقدار ذخیره کنید و هر جای کد از آن استفاده کنید.
مثال
مثال زیر فوانین تو در تو در فایل LESS را نشان میدهد:
<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>
سپس فایل 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;
}
}
}
با استفاده از دستور زیر فایل style.less را به style.css تبدیل کنید:
lessc style.less style.css
با اجرای دستور بالا فایل 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;
}
خروجی
بیایید دستورات زیر را انجام دهیم تا خروجی را ببینیم:
- کدهای html بالا را در فایل nested_rules.html ذخیره کنید.
- فایل HTML را در مرورگر باز کنید، خروجی بدین شکل خواهد بود.
