آموزش کامل LESS – اختصاصی

آموزش کامل LESS - اختصاصیReviewed by امیرحسین گل محمدی on Nov 12Rating: 5.0آموزش کامل LESS - اختصاصیبا استفاده از LESS میتوان CSS را مانند یک زبان برنامه نویسی نوشت !! بله تعجب نکنید به عنوان مثال همانطور که میدانیم در یک CSS (اصطلاحا خام) اگر از رنگی قرمز در بخش ها مختلف از کد استفاده کرده باشیم و اگر بخواهیم بعد از مدتی آن را تغییر دهیم

امروز بعد از مدتی که نبودم میخواهم برای شما عزیزان آموزش بسیار کاربردی LESS را به اشتراک بگذارم ، با استفاده از LESS میتوان CSS را مانند یک زبان برنامه نویسی نوشت !! بله تعجب نکنید به عنوان مثال همانطور که میدانیم در یک CSS (اصطلاحا خام) اگر از رنگی قرمز در بخش ها مختلف از کد استفاده کرده باشیم و اگر بخواهیم بعد از مدتی آن را تغییر دهیم ((مثلا رنگ آن را تیره تر کنیم )) اگر بخواهیم در کد بگردیم و یکی یکی کد رنگ آن ها را تغییر دهیم یک کار بسیار طولانی و خسته کننده ایی میشود ، پس چی کار کنیم ؟ خوب ! این یک مثال خیلی کوچک و ساده بود ، در خیلی از بخش های دیگر که یک چیز بخصوصی را بخواهیم تکرار کنیم ، باید در تمام قسمت ها کد آن را قرار دهیم ؟ مسلما جواب این سوالات خیر است ، شما با استفاده از less می توانید به راحتی کد هایی که قبلا برای استایل قالبتان نوشته اید را در سریعترین زمان ممکن و به بهترین شکل باز سازی کنید . Less یا به عبارتی Less Css ، برای شما امکاناتی از قبیل ، ایجاد متغیر در css ، استفاده از عملیات ریاضی در css ، اضافه کردن پارامتر ها و … را فراهم میکند . قبل از شروع این آموزش باید یادآور شوم پیشنیاز این آموزش ، آشنایی با CSS است . با ما در ادامه مطلب همراه باشید …

 

less-main

 

 “این آموزش یک آموزش اعتیاد آور است برای شروع کاملا آماده باشید”

 

قبل از شروع نیاز به روشی داریم که کد هایی که به صورت less مینویسیم را در آخر به صورت css تبدیل کند ، برای اینکار یکی از مراحل زیر را پیگیری میکنیم :

 

۱)  یکی از این روش ها استفاده از فایل less.js است که در قالبتان، پایین استایل (.less) قرار میگیرد . سعی کنید از این روش به مراتب کم تر استفاده شود زیرا امکان دارد کاربری که در حال مشاهده قالب سایت شما است ، امکان استفاده از جاوا اسکریپت را برای مرورگر خود غیر فعال کرده باشد . دلیل دیگر و مهمی که از این روش استفاده نکنید این است که ، این کار باعث میشود دیگران به فایل .less شما به راحتی دسترسی داشته باشند ، در صورتی که این فایل مخصوص توسعه دهنده قالب آن سایت میباشد . اگر میخواهید از این روش استفاده کنید کد های زیر را در جای مناسب در قالب خود قرار دهید :

برای دانلود less.js از لینک روبه رو استفاده کنید : دانلود less.js (( این روش پیشنهاد نمیشود ))

 

۲) دومین روش استفاده از Command Line و دستور lessc برای تبدیل فایل .less به .css میباشد . برای این کار شما باید فایل node.js را نصب کنید و بعد از آن در محیط Command Line دستور مقابل را وارد کنید :

بعد از آنکه فایل .less خود را ایجاد کردید برای تبدیل آن به .css از دستور زیر استفاده کنید :

به راحتی استایل شما به .css تبدیل میشود . اما برای کسانی که به محیط Command Line علاقه ای ندارند مرحله بعد را پیشنهاد میکنم .

 

۳) سومین روش استفاده از کامپایلر ها برای ترجمه کردن فایل .less و تبدیل آن به .css است که محیطی گرافیکی مناسبی برای این کار دارد . در زیر به برنامه هایی که برای اینکار وجود دارد اشاره میکنیم (برای ویندوز simpLess زا پیشنهاد مکنم) :

slide-36-728

 

برای ادامه آموزش کد زیر را به عنوان مثالی از یک فایل html در نظر میگیریم :

که خروجی مانند شکل زیر را به ما نشان میدهد :

less-css-1

 

دیگه نوبت به اصل مطلب رسیده !

 

متغیر ها (Variables) :

برای تعریف کردن متغیر ها در Less از “@” استفاده میکنیم به عنوان مثال به کد زیر توجه بفرمایید :

در مثال بالا کد رنگfdd ، به background نسبت داده میشود . حالا فرض کنید شما از کلاس shape در قسمت های متفاوتی استفاده کرده باشید ، فقط کافیه مقدار lightRed را تغییر دهید تا رنگ آن قسمت ها به رنگ مورد نظر تغییر پیدا کند.

شما حتی میتوانید از یک متغییر برای مقدار متغییر دیگر استفاده کنید ، به عنوان مثال به کد زیر توجه بفرمایید :

 

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

less-css-2

تبدیل شده css کد بالا به صورت زیر است :

همانطور که ملاحظه مکنید اثری از متغیر ها و دیگر کد های مربوط به less بعد از تبدیل دیده نمیشود .


ادغام ( Mixin ) :

اگر طراحی سایت انجام داده باشد به طور حتم به این مورد برخورد کرده اید که برای استفاده از CSS3 در قالب خود امکان دارد مرورگر های متفاوت آن ها را پشتیبانی نکنند ، برای حل این مشکل از به عنوان مثال از –webkit- ، -ms- و … استفاده میکردید . ولی واقعا طاقت فرسا هست برای هر قسمت یکسری کد تکراری وارد کنیم ، less به خوبی این مسئله را برایمان آسان کرده است ، برای اینکار متوانیم یک کلاس تعریف کنیم که خصوصیات مد نظر ما را داشته باشد. به عنوان مثال به کد زیر توجه کنید :

کد بالا نمونه ای از کد css اصلی میباشد ، بجای اینکه به طور مداوم آن را تکرار کنیم میتوانیم از کد در less استفاده کنیم :

 

در این قسمت مقادیر داخل Round به Shape1  نسبت داده میشوند ، به همین راحتی !

نتیجه آن را میتوانید در زیر مشاهده فرمایید :

less-css-3

توجه : استفاده از mixin ها فقط برای –webkit- و … نمیاشد ، شما به عنوان یک توسعه دهنده میتوانید از آن برای مقادیر دیگر هم استفاده کنید .


ادغام پارامتری ( Parametric Mixins ) :

همانطور که از نام این قسمت مشخص است ، شما میتوانید به کلاس خود پارامتر هایی را نسبت دهید ، به عنوان مثال تمایل دارید یک دایره کامل ، یک مربع گوشه گرد و یک مربع گوشه گردتر داشته باشید ، نیازی نیست برای هرکدام از آنها کد های خاص خودشان را بنویسید چون تنها تفاوت آنها در مقدار است که به عنوان radius میپذیرند ، بنابراین کافی است مقادیر متفاوت را در پارامتر های به عنوان ورودی به کلاس تعیین شده بدهید ، به مثال زیر توجه فرمایید :

 

از کد های بالا ترس نداشته باشید ، چون با کمی دقت میتوانید آن را تحلیل کنید ، در خط اول یک متغییر را به عنوان مقدار پیشفرض radius وارد کرده ایم ، کلاس RoundedShapeپارامتری دارد که به این معنا است :

مقدار defaultRadiusرا به radiusنسبت بده و در کد های آن مقدار radiusرا نسبت دهید .

در خط زیرین آن مقدار ۹۹۹۹ پیکسل به RoundedShapeنسبت داده شده تا دایره گردی را به ما بدهد .

برای اینکه با دیگر روش ها مقدار دهی به پارامتر ها آشنا شوید RoundedSquareرا ایجاد کردیم که داخل آن RoundedShapeرا صدا میزند ، کار اصلی این کلاس همانند کلاس Roundاست ، ولی فرق آن با Round قابلیت مقدار دادن به آن است به عنوان مثال اگر در shape3 نگاه کنید ، متوجه میشود که مقدار ۶۰ پیکسل بجای مقدار پیشفرض radius که ۳۰ پیکسل است ، نسبت داده شده .

 

نکته : اگر برای کلاسی پارامتر دار ، مقدار را به عنوان ورودی ندهید ، مقدار پیشفرضی که تعیین کرده اید را انتساب میدهد . به عنوان مثال به #shape2توجه داشته باشید .

نکته : اگر کلاسی دارای پارامتر باشید ، یعنی بعد از اسم آن پرانتز باشد ، این کلاس بعد از تبدیل شدن به css همانند متغییر ها نمایش داده نمیشود .

 

شکل زیر خروجی کار را نشان میدهد :

less-css-5


 

عملیات ریاضی (Operations) :

یکی از توانایی های بسیار کاربردی less استفاده از عملیات ریاضی است ، شما براحتی متوانید با استفاده از علائم ریاضی مقدار مورد نظر خود را ویرایش کنید ، اما این علائم فقط محدود به اعداد میشود ؟ طبیعتا خیر ، شما میتواند برای کد های رنگی هم استفاده کنید !!!

برای درک بیشتر به کد های زیر دقت کنید :

همانطور که در بالا مشاهده میکنید ، مقدار defaultShapesWidthضرب در ۰٫۱ شده است ، و رنگ defaultThemeColor222 هگزا دسیمال از رنگ اصلی خود کمتر شده است ، یعنی از رنگ قبلی خود تیره تر شده است . نتیجه کار را می توانید در زیر مشاهده فرماییید :

less-css-6


 

توابع رنگی (Color functions) :

یکی دیگر از ویژگی های که less برای شما به ارمغان آورده است ، استفاده از توابع رنگی میباشد که در زیر به آن ها را بررسی میکنیم . در توابع زیر ۲ پارامتر وجود دارد ، اولی کد رنگی مورد نظر و دومی مقدار عملی که باید انجام دهد .

 

darken()و lighten(): با استفاده از این دو میتوان رنگ مورد نظر خود را نسبت به نیاز تیره تر یا روشن تر کرد .

saturate()و desaturate(): با استفاده از این دو میتوان ، رنگ مورد نظر را رنگی تر یا سیاه سفید کرد.

fadein()و fadeout(): از این دو میتوان برای میزان شفافیت رنگ مورد نظر استفاده کرد .

spin(): با استفاده از این تابع میتواند مقادیر رنگی متفاوتی به صورت گردشی ایجاد کنید .

 

برای استفاده از آن ها به شکل زیر عمل میکنیم :

به عنوان مثال شاهد نتیجه ای به شکل زیر هستیم .

less-css-8


 

قوانین تو در تو (Nested rules) :

همانطور که مدانید اگر بخواهیم تگ h1 یک کلاسی را به صورت احتصاصی استایل دهی کنیم به این شکل عمل میکنیم :

 

اگر بخواهیم ما برای تک تک تگ هایی که در کلاس header قرار دارد یک استایل تعریف کنیم باید به صورت مداوم .header را به اول آن اضافه کنیم و نام تگ را در کنار آن قرار دهیم ، که این یک کار بسیار وقت گیر و خسته کننده است .

Less برایتان قانونی را فراهم کرده که بتوان آن هارا به صورت تو در تو نوشت و دیگر نیازی نباید یک قسمت کد مداوم تکرار شود به این قانون ، قانون تو در تو گفته میشود که حتی برای hover هم کاربرد بسیاری دارد .

بجای کدی که در بالا اشاره شد میتوانیم از کد زیر استفاده کنیم :

 

به همین راحتی شما میتوانید بدونه اینکه کد های به هم ریخته داشته باشید ، استایل مربوط به h1 و یا هر تگ دیگر مربوط به header را وارد کنید .

همانطور که گفته شد برای hover هم میتوان از این قانون استفاده کرد ولی استفاده از آن با کمی تفاوت است ، برای آنکه hover یک کلاسی را استایل دهی کنیم ، علامت “&”  را در کنار آن قرار میدهیم . به صورت زیر :

به عنوان مثال به کد زیر توجه کنید :

 

به این صورت اگر بروی کلاس shape ، ماوس قرار بگیرد رنگ آن به مقدار متغییر lightRed تغییر پیدا میکند .

در شکل زر میتوانید آن را مشاهده کنید :

less-css-9


وارد کردن (Importing ) :

و در نهایت به ویژگی بسیار خوب importing اشاره میکنم ، شما با استفاده از این ویژگی متوانید برای شلوغ نشدن فایل .less اصلیتان ، آن را به چند قسمت تقسیم کنید ، مانند متغییر ها و … سپس آن ها را در مکانی که میخواهید قرار بگیرند import کنین ، برای اینکار بعد از آن که فایل .less جانبی ساختید ، آن را در فایل .less اصلی به شکل زیر import کنین :

به جای yourLessName  ، نام فایل خود را قرار دهید .

 

جمع بندی :

Less به شما کمک میکنه کاملا مهندسی و با یک پرستیژ مشخصی استایلتان را بسازید ، اگر به دنبال سرعت و کیفیت هستید به شما پیشنهاد میکنم حتما در less تمرین و فعالیت کنین .

امیدوارم این آموزش مورد پسند شما عزیزان قرار گرفته باشه . نظر شما راجع به این زبان چیه ؟

توجه : استفاده از این مطلب با ذکر منبع مجاز است .

 

    پاسخگو
    عارف در شنبه ۰۶ دی ۱۳۹۳ :

    سلام
    بسیار عالی و کاربردی. ممنون

    پاسخگو
    عارف در شنبه ۳۱ مرداد ۱۳۹۴ :

    سلام به نظر من sass خیلی قدرتمند تره , این طور نیست؟

      پاسخگو
      امیرحسین گل محمدی در یکشنبه ۰۸ شهریور ۱۳۹۴ :

      سلام عارف جان ، به نظر من از لحاظ قدرت sass اما از لحاظ محبوبیت less