ساده سازی طراحی به کمک Less

اگر تاکنون به شیوه قدیمی فایل های css خود را می کنید، باید بدانید که در حال هدر دادن وقت بسیار زیادی می باشید.

قبلا مطلبی در مورد کوتاه نویسی کدهای html در این لینک منتشر کرده بودم. که در اون مطلب در مورد zen coding بحث کرده بودم.

در این مطلب قصد داریم در مورد آسان نویسی کدهای تکراری و بعضا تو در توی css صحبت کنیم.

اگر دو یا چند صفحه html به صورت حرفه ای طراحی کرده باشید، حتما متوجه شده اید که بعضی قسمت های استایلتان تکراری و خسته کننده هستند. و یا برای پیدا کردن یک کد رنگ باید تمام فایل استایلتان را بالا و پایین نمایید، همچنین گاهی آنقدر حجم استایل ها زیاد می شود که فراموش می کنید کدها کدام بخش در کدام قسمت فایل استایلتان هستند.

به عنوان راه حلی برای این مشکلات و مشکلات پیچیده تر زبان هایی ابداع شده اند که توسط آنها کدهایی شبیه کدهای css می نویسید و کامپایلر زبان مورد نظر کدهای شما را به css بر می گرداند و در صورت نیازتان حتی می تواند آنها را فشرده و یا خلاصه نماید.

دو مورد از معروفترین کامپایلرهای موجود less و scss  می باشند.

از آنجا که استفاده از less بسیار ساده بوده و همچنین کامپایلر آن هم یک کتابخانه javascript ساده می باشد، در این مطلب به معرفی less می پردازم.

کدنویسی برای less به سادگی css بوده و حتی از آن هم ساده تر می باشد.

کد html زیر را در نظر بگیرید:


<div class="main">

<ul>

<li><a href='#'>item 1</a></li>


<li><a href='#'>item 2</a></li>


<li><a href='#'>item 3</a></li>


<li><a href='#'>item 4</a></li>

	</ul>

</div>

فرضا قصد داریم کد بالا را استایل دهی کنیم. برای این کار در فایل less خود کد زیر را وارد می کنیم:

 

.menu{
	width: 500px;
	margin: 0 auto;

	ul{
		background-color: #ccc;
		padding: 10px;
	
		li{
			&:hover{
				background-color: #fff;
			}
			
			&.active{
				a{
					box-shadow: inset 0 0 2px #000;
				}
			}
		}
	}
}

 

همانطور که می بینید کدهای less بسیار خواناتر کوتاه تر و منسجم تر از css  میباشند. یکی از دلایل این انسجام امکان تو در تو نویسی این کدها می باشد.

البته این مثالی ساده از استفاده less  می باشد اگر فرض کنیم قصد داریم در استایل خود یک کد رنگ خاص به عنوان مثال #f3f3f3 را برای ۴ یا ۵ جای پوسته خود به کار ببریم در ابتدای فایل less خود می توانیم به راحتی یک متغییر تعریف کرده و مقدار دلخواه (در اینجا کد رنگمان) را در آن قرار دهیم. پس از آن در هر کجای فایل لس خود می توانیم با فراخوانی آن متغییر مقدارش را در جلوی پروپرتی مورد نظر جایگزین کنیم.

راهنمایی در خصوص نحوه استفاده از less ، قابلیت های آن و غیره .. در سایت انگلیسی و فارسی آن موجود می باشد.

 

اگر مفید بود به اشتراک بگذارید ! کلوب فیس نما گوگل پلاس

جوابی بنویسید

ایمیل شما نشر نخواهد شدخانه های ضروری نشانه گذاری شده است. *

*