از Sass نترسید!

در همایش استانداردهای وب که هفته پیش برگذار شد(+)، محسن براتی در مورد Sass ارائه‌ایی داشت و قبل از شروع ارائه سوالی مطرح کرد:

شما Sass را ترجیح میدید یا LESS؟

عده‌ایی که LESS را انتخاب کردند معتقد بودند که کار با Sass سخت است و برای همین آن را ترجیح میدن… و این دلیل خوبی برای نوشتن مطلب در مورد Sass عزیزی است که این چند وقت به شدت از کار کردن باهاش لذت میبرم.

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

در مورد CSS Preprocessor ها (مانند: LESS, Sass, Stylus) باید بگم که این زبان‌ها این امکان را به ما می‌دهند که کدهای CSS را شبیه به زبان‌های برنامه‌نویسی استفاده کنیم و بتوانیم توابع و متغیر‌هایی تعیین کنیم که کار ما را وسعت و سرعت بخشد.(البته این توضیح خیلی ناقص و کوتاه است، بد نیست راجبش یکم سرچ کنید)

تنظیمات لازم برای دسترسی به Syntactically Awesome Style Sheets
برای شروع باید Ruby را روی سیستم نصب کنید… سخت نگیرید! اگه Mac OS دارید که خودش داره ولی اگر با Windows کار می‌کنید سری به سایت RubyInstaller بزنید و نصبش کنید.

حالا Terminal* را باز کنید و کد زیر را بزنید:

gem install sass

برای شروع کار پیشنهاد می‌کنم فایل نمونه‌ای که توسط Web Design Weekly تولید شده را دانلود کنید تا کار را، با آن شروع کنیم.

دستور اولیه برای تبدیل کد‌های scss به css در زیر آماده است که اسم دو تا فایل را برای تبدیل مینویسد:

sass --watch style.scss:style.css

با دستور cd(+ و +) در ترمینال به فولدری که دانلود کردید بروید و کد زیر را اجرا کنید تا فایل‌های .scss را به .css کامپایل کنید:

sass --watch styles/:css/

کلمه ‘styles’ در دستور بالا نشان دهنده نام فولدریست که فایل‌های Sass در آن وجود دارد و کلمه ‘css’ نام فولدر مقصد برای کامپایل فایل‌ها به css است که هربار فایل style.scss را تغییر بدید، به طور خودکار فایل style.css بروز می‌شود.

Sass به شما این امکان را میده که به چهار سبک nested ،expanded ،compact ،compressed خروجی بگیرید برای اینکار اسم سبک را در آخر خط بنویسد. با چهار نوع سبک کامپایل کردم که میتونید اسکرین‌شات خروجی را ببینید:

sass-nestedsass --watch style.scss:style.css --style nested
sass-nestedsass --watch style.scss:style.css --style expanded
sass-nestedsass --watch style.scss:style.css --style compact
sass-compressedsass --watch style.scss:style.css --style compressed

من کار با Command Line را دوست دارم
اگر شما خوشتون نمیاد می‌تونید کدتون را با یکی از برنامه‌های CodeKit ،LiveReload و یا Scout برای ویندوزکامپایل کنید.

خب Sass نصب شد، پیشنهاد می‌کنم یه نگاهی به لینک‌های زیر بندازید تا پست بعد که بیشتر راجبش حرف بزنیم. چون خیلی ماجرا گسترده‌تر و لذت بخش‌تر از آن چیزی که فکرش را می کنید:

اگر سوالی داشتید خوشحال می‌شم بپرسید، در نظرات منتظرتون هستم.

* Terminal: ترمینال محیط command line برای مک است. اگر از ویندوز استفاده می‌کنید بعد از نصب Ruby برنامه‌ایی به نام “Command Prompt with Ruby on Rails” به سیستمتون اضافه می‌شود که دستورات را آنجا باید وارد کنید. اگر هرجا از کلمه Terminal استفاده کردم شما به سراغ برنامه command line سیستم خودتان بروید.

پرهام سال‌هاست در مورد تجربه‌ی کاربری تحقیق می‌کند و همیشه به دنبال راهی عملی برای استفاده از تجربه‌کاربری در طراحی محصولات بوده. او در حال حاضر مدیر ارشد محصول در شرکت صبا‌ایده(آپارات، فیلیمو، صباویژن) است.


3 thoughts on “از Sass نترسید!”

  1. منم همیشه با less کار میکردم و باهاش مشکلی هم نداشتم مثل همه هم از نصب sass میترسیدم بعد که پرهام بهم یاد داد دیدم کار کردن باهاشو کامپایل کردنش حتی از less ساده تر هم هست !!! بعد هم چند تا ویژگی خیلی خوبشو دیدم و ازش خوشم اومد

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *