آموزش less قواعد تودرتو نویسی

1396/3/26 علیرضا حاتمی نیا 5759

less Nested Rules

با درودی دیگر خدمت شما کاربر گرامی وبسایت 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>

html codes

divider


در مرحله بعد فایل 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;
}


css less codes

 

علیرضا حاتمی نیا
طراح و برنامه نویس وب
طراحی وبسایت های واکنش گرا
طراحی و پیاده سازی سیستم مدیریت محتوا
سئو و بهینه سازی سایت