آموزش less قواعد تودرتو نویسی
با درودی دیگر خدمت شما کاربر گرامی وبسایت ilikephp.ir و علاقه مندان به آموزش Less من علیرضا حاتمی نیا هستم و با قسمتی دیگر از آموزش Less در خدمت شما هستم.
در قسمت قبل به آموزش مقدمات و نصب Less پرداختیم و در این قسمت با قواعد تودرتونویسی در Less آشنا خواهید شد.
تودرتو نویسی در Less:
با استفاده از less شما به راحتی می توانید به ویژگی های یک کلاس یا id به صورت تودرتو نویسی دسترسی پیدا کنید و آنها را تغییر دهید.
مثلا فرض کنید که ساختار زیر را در HTML تعریف کردیم
<html>
<head>
<title>Nested Rules</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="parent">
<h1>Less tutorial</h1>
<p> this is first paragraph </p>
<div class=”class1”>
<h2>Second Heading</h2>
<p> this is second paragraph </p>
</div>
</div>
</body>
</html>
در مرحله بعد فایل style.less را اینگونه می نویسیم :
.parent{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
.class1{
h2{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}
طیق آموزش قبلی فایل style.less با دستور زیر به فایل style.css کامپایل می کنیم
lessc style.less style.css
اگر فایل style.css را باز کنیم متوجه می شویم که به صورت زیر نوشته شده است. با کمک less توانستیم به راحتی و با ساختاری منظم تر به کلاس class1 و دیگر فرزندانش دسترسی پیدا کنیم
.parent h1 {
font-size: 25px;
color: #E45456;
}
.parent p {
font-size: 25px;
color: #3C7949;
}
.parent .class1 h2 {
font-size: 25px;
color: #E45456;
}
.parent .class1 p {
font-size: 25px;
color: #3C7949;
}
نظرات کاربران