Compass: چهارچوبی برای نوشتن فایل‌های CSS و برنامه نویسی واسط کاربری

Compass چهارچوب برنامه نویسی واسط کاربری می‌باشد که برای زبان Sass توسعه پیدا کرده است. Compass مجموعه‌ای از ابزارها و توابع را به Sass اضافه می‌کند. همچنین خط فرمان (Terminal) آن نیز خیلی از کارها را ساده کرده است.

نصب Comapss

برای نصب Compass به Ruby و Sass نیاز دارید، لذا گام‌های نصب به صورت زیر است.

گام اول: با مراجعه به آدرس rubyinstaller.org با توجه به سیستم عامل خود Rubby را نصب کنید.

گام دوم: Sass و Compass را نصب کنید.

** در محیط windows در صورت بروز مشکل CMD را به صورت Run as administrator اجرا کنید.

gem install sass
gem install compass

در صورت بروز مشکل در نصب، به صورت دستی اقدام به دانلود و نصب آن کنید، برای اینکار ابتدا gemهای زیر را دانلود کنید.

http://rubygems.org/gems/compass

http://rubygems.org/gems/fssm

http://rubygems.org/gems/chunky_png

سپس با دستورات زیر آنها را نصب کنید.

gem install --local fssm.gem
gem install --local chunky_png.gem
gem install --local compass.gem

نام فایل های gem در دستورات فوق را بر اساس فایل‌هایی که دانلود کرده‌اید تصحیح کنید.

از صحت نصب آنها مطمئن شوید.

sass -v
compass -v

Compass چگونه کار می‌کند؟

همانگونه که گفته شد، Compass در دو جنبه ابزارها و توابع Sass را گسترش می‌دهد. ابزارها مجموعه دستوراتی در خط فرمان (Terminal) هستند که کار ایجاد پروژه، کامپایل اتوماتیک و ... را انجام می‌دهند. توابع که شامل مجموعه غنی از قوانین Sass است که هنگام نوشتن فایل‌های scss از آنها استفاده خواهیم کرد.

معرفی ابزارها

ایجاد پروژه: عبارت <myproject> را با نام پروژه جایگزین کتید.

compass create <myproject>

این دستور پوشه ای با ساختار زیر میسازد. این ساختار را بصورت دستی هم می‌توانید بسازید. تنها فایل مهم در آن config.rb است.

directory <myproject>/
directory <myproject>/sass/
directory <myproject>/stylesheets/
   create <myproject>/config.rb
   create <myproject>/sass/screen.scss
   create <myproject>/sass/print.scss
   create <myproject>/sass/ie.scss
   create <myproject>/stylesheets/ie.css
   create <myproject>/stylesheets/print.css
   create <myproject>/stylesheets/screen.css

پارامترهای مورد نیاز برای دستورات آتی Compass در فایل config.rb را در مستندات آن (قسمت لینک‌های به‌دردبخور) مطالعه کنید.

کامپایل پروژه: از این به بعد دیگر هرگز CSS را به زبان CSS نمی‌نویسیم. همه قوانین را به زبان Sass در فایل‌های scss پیاده سازی خواهیم کرد. در نهایت با کمک Compass کل پروژه را کامپایل و کدهای CSS را تولید می‌کنیم. برای اینکار دو روش زیر را در نظر بگیرید.

  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

استفاده از دستور compass watch ممکن است برای خیلی ها مثل من جذاب باشد.

توجه به این نکته داشته باشید که در فایلهای HTML آدرس فایل‌های CSS که تولید می‌شوند مهم هستند. فایل‌های scss بعد از کامپایل این خروجی ها را ایجاد خواهند کرد. هنگام کامپایل فایلهایی که با کاراکتر _ (underscore) شروع شوند به عنوان فایل‌های تکه‌ای (partials) در نظر گرفته شده و نادیده گرفته می‌شوند. معمولا این فایل‌ها توسط دستور import در فایل‌های دیگر مورد استفاده قرار می‌گیرند.

معرفی توابع

توابع Compass در دسته بندی های زیر قرار می‌گیرند.

  1. CSS3: شامل قوانین مربوط به CSS3 است که برای اجرا در مرورگرهای مختلف باید در چندین قانون وارد شوند. به این قوانین mixins می‌گویند. مثال: مانند Border Radius و Box Shadow
  2. Typography: شامل mixinsهایی برای متن ها
  3. Utilities: شامل mixinsهایی برای استایل‌های معمول
  4. Layout: قوانینی برای چیدمان صفحات
  5. Reset: شامل قوانین CSS Reset

دیدگاه‌ها

تصویر محمدت مجتبی سیف اللهی

محمدت مجتبی سیف... (تایید نشده)

سلام
ممنونم از مقاله مفیدتون
اگه روشی هم برای استفاده از compass.app داشتین معرفی کنین متأسفانه این نرم افزار پولیه و نمیشه به صورت رایگان ازش استفاده کرد البته نرم افزار opensource و source در github موجود اما با دانش کمی که من دارم نمیتونم ازش استفاده کنم
اگه راهنمایی کنید ممنون میشم

افزودن نظر جدید