به نام خدا
یه نگاهی به کد HTML زیر بندازید.
اگر دقت کنید ، کلاس‌های پایینی در کد بالایی موجود بودند:
مثلاً اگر میخواستیم رنگ متن و پس‌زمینه‌ی پیام رو تغییر بدیم در CSS به شکل زیر عمل میکنیم:
دقت کردید که .container .body .body-message در هر 2 کدبالایی رو تکرار کردیم مگه نه ؟؟
به فرض هم ما همچین کلاس‌های تو در توی زیادی هم داشته بودیم ، بازم مجبور می شدیم این کلاس‌ها رو در CSS هر دفعه تکرار کنیم!
اما حالا در LESS اگر بخواهیم 2 کد بالایی رو بنویسیم میتونیم حالت فشرده و جمع و جوری برای عدم تکرار اضافی داشته باشیم ، که نتیجه‌اش کد زیر است:
میبینید که در ابتدا کلاس containor تعریف شده و سپس body و بعد از اون که به body-message رو داخل body تعریف شده که همون طرح دهی پیام رو انجام میده و سپس کلاس body-title داخل کلاس body-message قرار گرفته که طرح دهی عنوان پیام رو انجام میده.
خب حالا شاید سوال باشه که خب چه کاریه ، نتیجه‌ی هر 2 کد که یکیه چرا Less بهتره و اصلا چه سودی به غیر از کمتر کدنویسیش داره؟!
خب بذارید بگیم که اگر بخواهید از همین کد برای یه مورد مشابه دیگه‌ای استفاده کنید شما به راحتی میتونید از کد قبلی Less کپی کنید و صرفاً container رو مثلاً به second_container تبدیل کنیم. (هم در LESS و هم در HTML) و در نهایت مقادیر مربوطه رنگ و پس‌زمنیه (در این مثال) رو تغییر بدیم
بدون اینکه به بقیه کلاس‌ها دست بزنیم و تغییرشون بدیم
البته LESS مزایایی بیشتر از CSS هم داره که این نمونه‌ای ازش بود و خودتون میتونید به صورت مطالعه آزاد اونا رو دنبال کنید.
سپاس
یه نگاهی به کد HTML زیر بندازید.
اگر دقت کنید ، کلاس‌های پایینی در کد بالایی موجود بودند:
- container
- body
- body-header
- body-message
- body-footer
مثلاً اگر میخواستیم رنگ متن و پس‌زمینه‌ی پیام رو تغییر بدیم در CSS به شکل زیر عمل میکنیم:
- و اگر هم میخواستیم رنگ متن و پس‌زمینه‌ی عنوان پیام رو تغییر بدیم در CSS به شکل زیر عمل خواهیم کرد:
دقت کردید که .container .body .body-message در هر 2 کدبالایی رو تکرار کردیم مگه نه ؟؟
به فرض هم ما همچین کلاس‌های تو در توی زیادی هم داشته بودیم ، بازم مجبور می شدیم این کلاس‌ها رو در CSS هر دفعه تکرار کنیم!
اما حالا در LESS اگر بخواهیم 2 کد بالایی رو بنویسیم میتونیم حالت فشرده و جمع و جوری برای عدم تکرار اضافی داشته باشیم ، که نتیجه‌اش کد زیر است:
میبینید که در ابتدا کلاس containor تعریف شده و سپس body و بعد از اون که به body-message رو داخل body تعریف شده که همون طرح دهی پیام رو انجام میده و سپس کلاس body-title داخل کلاس body-message قرار گرفته که طرح دهی عنوان پیام رو انجام میده.
خب حالا شاید سوال باشه که خب چه کاریه ، نتیجه‌ی هر 2 کد که یکیه چرا Less بهتره و اصلا چه سودی به غیر از کمتر کدنویسیش داره؟!
خب بذارید بگیم که اگر بخواهید از همین کد برای یه مورد مشابه دیگه‌ای استفاده کنید شما به راحتی میتونید از کد قبلی Less کپی کنید و صرفاً container رو مثلاً به second_container تبدیل کنیم. (هم در LESS و هم در HTML) و در نهایت مقادیر مربوطه رنگ و پس‌زمنیه (در این مثال) رو تغییر بدیم
بدون اینکه به بقیه کلاس‌ها دست بزنیم و تغییرشون بدیم
البته LESS مزایایی بیشتر از CSS هم داره که این نمونه‌ای ازش بود و خودتون میتونید به صورت مطالعه آزاد اونا رو دنبال کنید.
سپاس
