هنگامی که میخواستیم مقاله ای برای معرفی Less بنویسیم متوجه سایتی به آدرس http://less-css.ir/ شدیم که ظاهرا تلاش کرده است تمام سایت انگلیسی را به فارسی ترجمه کند. با توجه به وجود چنین سایتی به نظر می رسد هرگونه تلاش برای آموزش کد نویسی در Less در این مقاله تکراری جلوه کند. بنابراین تنها تلاش خواهیم کرد که به معرفی Less پرداخته و شما را تشویق کنیم که از این پلفرم استفاده کنید. اگر شما هم مانند ما مقالات زبان اصل را ترجیح می دهید، سایت اصلی Less به آدرس http://lesscss.org/ می باشد.
Less چیست؟
وقتی میخواستم تعریف Less را از سایت فارسی معرفی شده در بالا کپی کنم. دلیل علاقه خود به رفرنس های خارجی برایم یادآوری شد. براستی چرا منابع خارجی قابل فهم ترند؟ در تعریف سایت فارسی یک مترجم لازم بود تا مفهوم Less را درک کنم. در سایت اصلی براحتی میتوانستم مفهموم را متوجه شوم. این مشکل در بسیاری از سایت های فارسی شده به چشم می خورد و متاسفانه ظاهرا ادامه نیز خواهد داشت. Less با هدف ساده کردن کد نویسی استایل صفحات وب ایجاد شده است. در واقع می توان گفت که Less پلتفرمی است که قصد دارد با افزودن امکان کد نویسی، ایجاد صفحات استایل دهی را ساده تر کند. Less بسیاری از امکانات یک زبان برنامه نویسی مانند تعریف متغیر، ترکیب متغیرها و بسیاری ویژگی های دیگر را برای نوشتن کدهای CSS بکار می برد، تا بتوان کدهای استایل دهی را سریع تر و خوانا تر نوشت.
پیشنهاد مطالعه: بوت استرپ چیست؟
Less در برابر Sass
در مقاله Sass چیست؟ به معرفی پلفرم دیگری برای نوشتن کدهای CSS پرداختیم که میتوان گفت، که همین ویژگی های ذکر شده برای Less را دارا بود. در مقالات متعدد خارجی و ایرانی، از برتری یکی از این دو بر دیگری دلایلی آورده شده است. که کار قضاوت نهایی را سخت می کند. در حقیقت با وجود پلتفرمی مانند stylus بعید بنظر میرسد که هیچکدام از این دو پلتفرم از نظر راحتی و قابلیت، بتوانند حرفی برای گفتن داشته باشند. ولی با توجه به تعداد کاربرانی که از این دو پلتفرم استفاده می کنند. میتوان نتیجه گرفت که ظاهرا کاربران وب با ما هم عقیده نیستند و این دو پلتفرم را به stylus ترجیح میدهند. شناخت تک تک پلتفرم های وب کار بسیار دشواری است، بخصوص اینکه اکثر این پلتفرم ها متن باز بوده و برنامه نویسان زیادی بر پایه آنها پلتفرمهای جدیدی ایجاد کرده اند، که خود این پلتفرم های جدید هر یک قابلیت ها و ویژگی های منحصر به فردی دارد، و توسط سایت های معتبری استفاده شده اند. در مقاله Sass چیست؟ اشاره کردیم که سایت لینکدین از پلتفرم compass برای استایل دهی به صفحات استفاده کرده است. که خود این پلتفرم از پلتفرم Sass ایجاد شده است. مسلما با این میزان تنوع امکان یادگیری تمام این پلتفرم ها و حتی شناخت تک تک آنها برای یافتن ساده ترین و مناسبترین آنها برای استفاده ممکن نیست. کارشناسان مختلف، آنچنان نظرات ضد و نقیضی بیان کرده اند، که عملا کار انتخاب یکی از این پلتفرم ها را دشوارتر می کند. پیشنهاد ما این است که یکی از این پلتفرم های برنامه نویسی برای استایل دهی صفحات وب را به خوبی فرا بگیرید و استفاده کنید. اگر هر یک از این پلتفرم ها را بصورت صد در صد فرا بگیرید. نیازی به جایگزینی آن با پلتفرم دیگری ندارید. در نهایت امر میتوان خروجی Css، در همه این پلتفرم ها را ویرایش کرد. بنابراین جای نگرانی برای انتخاب پلتفرم برنامه نویسی Css نیست.
Paulmillr در سایت Github از میان پلتفرمهای برنامه نویسی Css پلتفرم Stylus را بدلیل سادگی و توانایی بالا، برتر دانسته است. در همین سایت torkiljohnsen بیان داشته است، که پلتفرم compass تمام ویژگی های منحصر به فرد Stylus را دارد و نیازی به ایجاد یک پلتفرم جدید برای ساده کردن کدهای Sass نبوده است.
معرفی خدمات وب24: طراحی سایت فروشگاه اینترنتی با کدنویسی اختصاصی
Ashton Harris وبلاگ نویس : از بین سه پلتفرم Less، Sass، Stylus بعد از یک مقدمه چند خطی درباره اینکه انتخاب هر کاربری با دیگری فرق دارد. میگوید که پلتفرم Stylus از سایر پلتفرم ها ساده تر و در عین حال قدرتمند تر است. در ضمن در آخر متن خود بخشی به عنوان معرفی پلاگین ها و کتابخانه ها دارد، که در آن سه پلتفرم Nib,Rupture,Jeet را معرفی می کند. در واقع به نظر میرسد، که هدف این وبلاگ نویس این باشد که بگوید: اگر قرار است compass را بعنوان یک کتابخانه Sass در نظر بگیریم. باید آنرا با کتابخانه های Stylus مقایسه کنیم و بشکل ضمنی کتابخانه های Stylus را برتر از Compass میداند. نمیتوان نادیده گرفت که کتابخانه های Stylus باعث میشود تا به ساده ترین شکل، پیچیده ترین کدها را نوشت. برخلاف Less و Sass از پیشوند و پسوند های اضافه اصلا خبری نیست. ولی همانطور که گفته شد compass هم تمام این ویژگی ها را دارد. Compass به زبان cookbook معروف است. که ترجمه آن میشود هرچی میبینی بنویس. که اشاره به سادگی کار با این پلفرم دارد.
مقاله نویس وبلاگ scottlogic که خود را با نام مستعار LUKE PAGE معرفی میکند، بعد از توضیح فلسفه هرکدام از پلتفرمهای Less,Sass,Stylus پیشنهاد میکند که یکی از این پلتفرم ها را انتخاب و بصورت کامل یادبگیرید. درواقع از اعلام برتری یکی بر دیگری اجتناب می کند.
اما در این مقاله 10 مورد از ویژگی های Sass و Stylus که در Less وجود ندارد. بیان شده است. که گویا قصد دارد به مخاطب بگوید Less کمتر از دو پلتفرم دیگر توسعه یافته است.
Johnathan Croom نویسنده مقالات آموزشی سایت Tutsplus با ذکر مثال های متعدد از شباهت ها و تفاوتهای این سه پلتفرم پیشنهاد می کند. که بجای انتخاب و یادگیری یکی از این پلتفرمها هر تعداد که میتوانیم پلتفرم مختلف برنامه نویسی استایل شیت را بیاموزیم.
نکته: اگر شما برای مدت طولانی در حال طراحی سایت هستید حتما برایتان پیش آمده است که یک مشکل در استایل دهی وجود داشته باشد و برای پیدا کردن آن مشکل ساعت ها وقت خود را صرف کرده اید. اگر چنین است بخاطر داشته باشید، همه پلتفرم های برنامه نویسی Css به شما امکان رفع عیب بسیار سریع و ساده را ارائه میدهند. بنابراین پلتفرمهای برنامه نویسی Css هر قدر هم که توسعه نیافته و ساده باشند. بازهم از کد نویسی به خود زبان Css پیشرفته تر میباشند. بنابراین حداقل یکی از این پلتفرم ها را برای کار طراحی سایت خود انتخاب کنید.
معرفی خدمات وب24: سئو و بهینه سازی سایت
نحوه استفاده از Less
در مقاله Sass چیست؟ گفتیم که این پلتفرم باید به زبان Css ترجمه شود و نرم افزاری برای ترجمه آن معرفی کردیم. اما در Less میتوان کدهای تولید شده را در صفحه وب استفاده کرد. برای اینکار میتوانید در صفحه وب از کد های زیر استفاده کنید.
<link rel="stylesheet/less" type="text/css" href="styles.less" />
همانطور که در کد بالا میبینید به جای معرفی یک فایل Css یک فایل Less را به صفحه وب معرفی کرده ایم. اما نکته اینجاست که این فایل به تنهایی قابل استفاده نیست و باید یک کتابخانه جاوا اسکریپت به همراه آن بارگذاری شودT تا صفحه وب بتواند از کدهای Less استفاده کند. برای این منظور از کد زیر باید استفاده کرد:
<script src="less.js" type="text/javascript"></script>
فایل less.js در رفرنس انگلیسی و فارسی و بسیاری سایت های دیگر قابل دانلود بصورت کاملا رایگان و متن باز است. اگر بخواهید میتوانید از فایل جاوا اسکریپت سرور اصلی استفاده کنید.این فایل درآدرس زیر قرار دارد:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
بدلیل مسائلی مانند تحریم ایران بهتر است که فایل را روی سرور خود بارگذاری و استفاده کنید. زیرا ممکن است سرور اصلی بصورت ناگهانی از ارائه سرویس به IP های ایران خود داری کند و به این ترتیب تمام استایل دهی های سایت ازبین برود. نکته : فایل معرفی استایل باید قبل از فایل معرفی اسکریپت باشد. اگر از چند فایل استایل دهی استفاده می کنید، نباید نام متغییرها در چند فایل مختلف یکی باشد.
نصب Less
برای نصب Less ساده ترین راه استفاده از پکیج Node.js است. برای اینکار از دستور زیر استفاده کنید.
$ npm install -g less
در خط فرمان میتوان با خط دستور زیر نام فایل خروجی را تعیین کرد
$ lessc styles.less styles.css
تبدیل کد های Less به Css
همانطور که گفتیم نیازی به اینکار نیست ولی اگر بخواهید در سایت Github پلاگینی به نام clean-css plugin وجود دارد که بعد از نصب میتوانید با کمک آن فایل های Less را به Css تبدیل کنید. خط دستور زیر در صورت نصب بودن پلاگین این تبدیل را انجام خواهد داد:
$ lessc --clean-css styles.less styles.min.css
پست قبلی
پست بعدی
