آرش منطقی،

طراح و توسعه‌دهنده رابط کاربری

شروع کار با Sass و Compass در ویندوز

sass-1030x579

ما تو دوره‌ای به سر می‌بریم که معمولاً طراح‌ها و برنامه‌نویس‌ها سعی می‌کنند برای سرعت بخشیدن به انجام پروژه‌ها از ابزارهایی ویژه کمک بگیرند. از جمله‌ی این ابزارها برای طراحان وب Sass و Less هستند که میتونند خیلی برای استایل نویسی مفید واقع شن. به کمک این ابزارها ما می‌تونیم توی کدهای سی‌اس‌اس خیلی راحت‌تر ارث‌بری‌ کلاس‌ها رو پیاده کنیم، برای مقادیری مثل رنگ‌ها متغیر تعریف کنیم و توابعی بنویسیم که چندین بار با ورودی‌های مختلف ازشون استفاده کنیم و خیلی چیزهای دیگه. ما تو این مطلب قراره به این بپردازیم که چطور باید کار با Sass و Compass رو شروع کنیم. در واقع چطور باید اون‌ها رو نصب و ازشون استفاده کنیم. پس اگر قصد دارین با Sass شروع به کدنویسی کنید در ادامه مطلب با من همراه باشید.

شاید اولین سؤالی که براتون پیش بیاد این باشه که چرا Sass و چرا Less نه؟ خب جوابش اینه که شروع کار با Less و یادگیری اون به اندازه‌ای راحت هست که با خوندن داکیومنت‌های رسمی کارتون راه میوفته، حتی اگر واستون سخته می‌تونید ترجمه‌ فارسی مستندات رو بخونید. اما این به این معنی نیست که Sass سخت باشه؛ نه. بلکه تو نگاه اول شاید پیچیده به نظر بیاد. دلیلش میتونه این باشه که برای نصب و کامپایل فایل‌ها نیاز به استفاده از دستورات خط فرمان هست. حتی همین باعث شده بود که من در ابتدا از این ابزار دوست داشتنی بترسم و به less پناه ببرم. less واقعاً تجربه خوبی بود؛ اما خیلی‌ها وقتی از less به sass کوچ کردند از این موضوع احساس رضایت خاطر داشتند که شامل حال من هم میشه. حالا این وسط Compass چیه؟ خب یه فریم‌ورک هست که با sass کار می‌کنه و شما به دلخواه می‌تونید ازش استفاده کنید و یا نکنید.

ما برای شروع می‌تونیم از خط فرمان اقدام کنیم که خیلی راحته و یا می‌تونیم از برنامه‌های آماده‌ای استفاده کنیم که خیلی راحت‌تره. اول خط فرمان:

در ابتدا شما باید بسته‌ نرم‌افزاری Ruby رو دانلود و روی ویندوز نصب کنید. سپس با تایپ کلمه cmd تو بخش جستجوی برنامه‌های ویندوز، خط فرمان رو پیدا و باز کنید. برای نصب sass همچنان که به اینترنت وصل هستید فقط کافیه دستور زیر رو توی خط فرمان تایپ کنید  و کلید اینتر رو بزنید و کمی صبر کنید تا عملیات نصب تکمیل شه.

gem install sass

برای نصب compass هم کافیه دستور زیر رو وارد کنید، دقت کنید که این دستور زمان بیشتری رو میطلبه و یادتون باشه که با نصب کردن compass، به صورت پیش‌فرض sass هم نصب میشه.

gem install compass

مراحل گفته شده تو خط فرمان رو توی اسکرین‌شات زیر میتونید ببینید:

sass and compass install commands

حالا شما می‌تونید شروع به کدنویسی کنید. توی فولدر پروژه خودتون دوتا فولدر به نام‌های sass و stylesheets درست کنید و فایل‌های sass رو که حاوی کدهاتون هست، با پسوند scss.  توی فولدر sass ذخیره کنید. وقتی شما فایل‌های scss. رو کامپایل می‌کنید، فایل‌هایی دقیقاً با همون اسم ولی با پسوند css. توی فولدر stylesheets ذخیره میشه و این‌ها استایل‌شیت‌هایی هستند که باید به صفحه وب لینک بشن. اما چطور باید فایل‌های sass رو کامپایل کرد؟ به راحتی. به خط فرمان برگردید و با دستور cd به دایرکتوری پروژه‌‌تون برید. حالا کافیه دستور compass watch رو اجرا کنید تا در هر لحظه‌ای که فایل‌های scss. رو ذخیره می‌کنید، کامپایل شده و استایل‌شیت‌ها تو پوشه‌ی مربوطه رونویسی شن. برای راحتی درک چگونگی کامپایل کردن، من توضیحات بالا رو به صورت دستوری، درج می‌کنم. دقت کنید که ممکنه مسیر پروژه من با مسیر پروژه شما فرق کنه.

cd C:\xampp\htdocs\project
compass watch

وقتی کارتون تموم شد می‌تونید با کلید ترکیبی Ctrl+c تو محیط خط فرمان دستور توقف کامپایل رو صادر کنید. تنوع بیشتری از دستورات خط فرمان هم قابل مطالعه هست.

در ضمن اگر خواستین توی کدهای sass که نوشتید، از compass هم استفاده کنید کافیه دستور زیر رو توی فایل scss. قرار بدین:

@import "compass";

اما اگر مراحل بالا برای شما سخت هست، راه حل آسون‌تری هم وجود داره. بسته‌های نرم افزاری‌ای وجود دارند که همه کارای بالا رو ساده‌تر انجام میدن و یکی از اونها Scout نام داره و البته رایگان هم هست.

scout

قبل از نصب این برنامه باید بدونید که لازمه adobe air روی ویندوز نصب باشه. با نصب Scout نیازی نیست ruby، sass و compass رو نصب کنید. حالا کافیه توی این برنامه دایرکتوری پروژه‌ خودتون رو تعریف کیند. بعد از تعریف مسیر پروژه، از قسمت stylesheet directory  برای گزینه input folder پوشه فایل های sass رو انتخاب کنید و برای گزینه output folder نیز پوشه استایل‌شیت را. به این صورت موقع کامپایل، فایل‌های sass خونده شده و به استایل‌شیت‌های مورد نیاز تبدیل میشن. اما چطور باید عملیات کامپایل رو شروع کرد. روبروی نام پروژه شما آیکون مثلت به نشانه شروع کامپایل وجود داره که با کلیک کردن روش، کامپایل شروع شده و آیکون مثلث به مربع تغییر شکل پیدا میکنه. در این صورت در هرلحظه‌ای که شما فایل‌های sass رو ذخیره می‌کنید، یک کپی از آن‌ها با فرمت css. تو پوشه خروجی رونویسی میشه. همچنین با کلیک کردن روی آیکون مربع عملیات کامپایل رو متوقف کرده‌اید. از بخش output modes هم می‌تونید با تنظیمات environment و  output style کاری کنید که فایل خروجی مینیفای شه و یا ساختار وراثتی رو حفظ کنه و یا کامنت‌ها حذف شه و انواع و اقسام دیگه. شکل زیر شاید بتونه توضیحاتی که دادم رو ملموس‌تر جلوه بده.

scout-confige

اگر قصد دارید کدنویسی با sass رو یاد بگیرید، پیشنهاد من رجوع به رفرنس رسمی و بخش معرفی توابع این ابزار هست. برای compass هم داکیومنت‌های رسمی توصیه میشه.

موفق باشید.