آموزش تفاوت ساختاری کدهای css و less

به نام خدا

یه نگاهی به کد HTML زیر بندازید.

<div class="container">
    <div class="body">
        <h3 class="body-header">
            هدر پیام
        </h3>
        <div class="body-message">
            <h2 class="body-title">
                عنوان پیام
            </h2>
            پیام
        </div>
        <div class="body-footer">
            فوتر پیام
        </div>
    </div>
</div>

اگر دقت کنید ، کلاس‌های پایینی در کد بالایی موجود بودند:

• container
• body
• body-header
• body-message
• body-footer

مثلاً اگر میخواستیم رنگ متن و پس‌زمینه‌ی پیام رو تغییر بدیم در CSS به شکل زیر عمل میکنیم:

.container .body .body-message {
color: #146077;
background: #fff;
    }

• و اگر هم میخواستیم رنگ متن و پس‌زمینه‌ی عنوان پیام رو تغییر بدیم در CSS به شکل زیر عمل خواهیم کرد:

• .container .body .body-message .body-title {
  color: #000;
  background: #fff;
      }

دقت کردید که .container .body .body-message در هر 2 کدبالایی رو تکرار کردیم مگه نه ؟؟
به فرض هم ما همچین کلاس‌های تو در توی زیادی هم داشته بودیم ، بازم مجبور می شدیم این کلاس‌ها رو در CSS هر دفعه تکرار کنیم!

اما حالا در LESS اگر بخواهیم 2 کد بالایی رو بنویسیم میتونیم حالت فشرده و جمع و جوری برای عدم تکرار اضافی داشته باشیم ، که نتیجه‌اش کد زیر است:

.container {
     .body {
         .body-message {
        color: #146077;
        background: #fff;

         .body-title  {
        color: #000;
        background: #fff;

        }
            }
            }
}

میبینید که در ابتدا کلاس containor تعریف شده و سپس body و بعد از اون که به body-message رو داخل body تعریف شده که همون طرح دهی پیام رو انجام میده و سپس کلاس body-title داخل کلاس body-message قرار گرفته که طرح دهی عنوان پیام رو انجام میده.

خب حالا شاید سوال باشه که خب چه کاریه ، نتیجه‌ی هر 2 کد که یکیه چرا Less بهتره و اصلا چه سودی به غیر از کمتر کدنویسیش داره؟!

خب بذارید بگیم که اگر بخواهید از همین کد برای یه مورد مشابه دیگه‌ای استفاده کنید شما به راحتی میتونید از کد قبلی Less کپی کنید و صرفاً container رو مثلاً به second_container تبدیل کنیم. (هم در LESS و هم در HTML) و در نهایت مقادیر مربوطه رنگ و پس‌زمنیه (در این مثال) رو تغییر بدیم
بدون اینکه به بقیه کلاس‌ها دست بزنیم و تغییرشون بدیم

البته LESS مزایایی بیشتر از CSS هم داره که این نمونه‌ای ازش بود و خودتون میتونید به صورت مطالعه آزاد اونا رو دنبال کنید.

سپاس