میزبانی وب هاست
میزبانی هاست لینوکس و ویندوز در سرور های قدرتمند سه کشور ایران کانادا و آمریکا با پشتیبانی 24 ساعته
میزبانی وبثبت دامنه
ثبت دامنه های ملی کشور ایران و دامنه های بین المللی جهانی با پیشوند های ir , com , net , org , info , ws و ....
ثبت دامنهطراحی وب سایت
طراحی و برنامه نویسی حرفه ای وب سایت و سیستم های اتوماسیون اداری با قابلیت واکنش گرا (Responsive)
طراحی وبآموزش طراحی وب
برگزاری کلاس های آموزش برنامه نویسی و طراحی سایت در مازندران بصورت کاملا خصوصی
آموزش طراحی وبآموزش فریم ورک LESS برای کار با CSS
LESS یک فریم ورک که تحت زبان برنامه نویسی جاوا نوشته شده یکی از جدید ترین و در عین حال ساده ترین متد هایی است که به کمک طراحان صفحات وب آمده است به نحوی که نوشتن فایل هایی با زبان CSS3 دیگه وقت زیادی از آدم رو نمیبره…در وب سایت مرجع این فریم ورک LESS را به معنی Less is a CSS pre-processor, meaning that it extends the CSS language یا همان افزاینده یا گسترش دهنده زبان CSS معرفی کرده است.
برای کار با LESS مراحل زیر را انجام دهید :
۱ ) دریافت فایل LESS از وب سایت رسمی آن
ابتدا به وب سایت http://lesscss.org رفته و یا از لینک Github آن آخرین ورژن این فریم ورک را دریافت کنید در نظر داشته باشید که LESS تنها یک فایل جاوا اسکریپ می باشد که با پسوند .js است و شما باید آن را در صفحات Html خود فراخوانی کنید.
۲) فراخوانی LESS javascript در صفحات Html خود
حال نوبت به کار رسیده است.اگر یادتان باشد فایل هایی که به زبان CSS نوشته می شدند را با پسوند .css ذخیره می کردیم ولی حالا فایل هایی که به زبان LESS نوشته می شوند را با پسوند .less الیجاد می کنیم پس یک فایل با این پسوند ایجاد کنید و کد زیر را در بخش head وب سایت خود قرار دهید
۱ ۲ |
<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> |
در متن بالا ۲ نکته رو بگم اول این که مقدار REL را برای فراخوانی فایل های لس همیشه stylesheet/less باید قرار دهیم . دوم این که همیشه فایل جاوا کتابخانه LESS را بعد از فایل مربوطه لود می کنیم در ضمن اگه هم از Jquery در صفحات خود استفاده می کنید کد لود شدن جی کوئری را قبل از فراخوانی فایل less.js قرار دهید.
۳) یک مثال با LESS
حالا فایل style.less را باز کنید تا یک مثال کوچک برایتان بزنم.یکی از کاربردی ترین کارهایی که فایل های LESS برای ما انجام می هند خلاصه نویسی دستورات Css می باشند.مثلا شما از رنگ سبز در نوشته ها و خطوط سایت خوئتون استفاده می کنید اگر میخواستید با Css کار کنید برای تمامی Class ها و id ها می بایست کد HEX رنگ سبز را می نوشتید اما در LESS شما یک متغیر رنگ سبز ایجاد می کنید و بعد آن را در Class های مختلف بار گذاری می کنید مثلا :
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ |
@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(۰ ۰ ۵px, ۳۰%) } } |
در مثال بالا ما یک متغیر با نام base ایجاد کردیم که برابر با کد رنگ HEX قرار دادیم و از این پس با فراخوانی این متغیر می تواین تمامی جاها از آن استفاده کنیم.
البته ویزگی های LESS فراتر از این حرف هاست که میتویند با یه سرچ کوچک در گوگل به مستندات آن دست پیدا کیند.

بانک ملی ایران
شماره 16 رقمی کارت : 3479 - 0689 - 9918 - 6037
به نام مهرشاد درزی سوته
دوره ی های آموزشی طراحی وب سایت در مازندران
جهت اطلاعات بیشتر اینجا کلیک کنید ...