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

اگر قبلاً از Sass استفاده نکرده اید، توصیه می کنم نگاهی به مقدمه WDD در Sass بیندازید.

قطب نما مانند یک چارچوب برای CSS شما کار می کند. وقتی کار می کنی روی یک پروژه بزرگ برای همه چیز آسان است که از کنترل خارج شوند و اغلب یافتن چیزها در CSS خود یک چالش است. Compass با مزیت اضافه کار با پیشوندهای فروشنده، سعی می کند این مشکلات را برطرف کند.

قطب نما چیست؟

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

• مانند Sass، Compass از متغیرها، mixins و nesting پشتیبانی می کند.
• طیف وسیعی از توابع کمکی را برای تصاویر، رنگ ها، تایپوگرافی و موارد دیگر فراهم می کند.
• از محاسبات ریاضی پشتیبانی می کند.
• این به اطمینان از سازگاری بین مرورگرها کمک می کند.

مانند Sass و LESS، Compass فقط ابزاری برای ساده‌تر کردن طراحی وب‌سایت است.

روش نصب Compass

قطب نما یک است Ruby gem، بنابراین برای نصب آن ابتدا باید داشته باشید Ruby نصب شده است روی ماشین شما خوشبختانه Ruby نصب ساده است، روی ویندوز شما فقط باید این را دانلود کنید Ruby نصب کننده برای ویندوز، روی مک/لینوکس دستورالعمل ها را دنبال کنید روی را Ruby سایت.

یک بار که داشته باشید Ruby نصب شده، نصب قطب نما به همین سادگی است:

gem install compass

با این کار هم Compass و هم Sass نصب می شود.

اگر می خواهید یک پروژه Compass ایجاد کنید، باید تایپ کنید:

compass create /path/to/project
cd /path/to/project
compass watch

این سه خط کد به این معنی است که هر زمان که یک فایل Sass را تغییر دهید، به طور خودکار در CSS کامپایل می شوند.

به طور متناوب، می توانید استفاده کنید کدکیت (Mac) یا Prepros (ویندوز) برای کامپایل Sass در هنگام ذخیره.

شروع کار با Compass

قطب نما به ماژول ها تقسیم می شود و برای شروع استفاده از ابزارهای آن ابتدا نیاز داریم import ماژولی که می خواهیم وارد فایل .scss اصلی خود شود. به عنوان مثال، به import ماژول CSS3 که استفاده می کنیم:

@import "compass/css3";

اکنون می‌توانیم از ابزارها و میکس‌هایی استفاده کنیم که Compass برای ویژگی‌های جدید ارائه شده با CSS3 ارائه می‌کند. بهترین چیز در این مورد این است که ما مجبور نیستیم پیشوندهای فروشنده را بارها و بارها تایپ کنیم، که همیشه هنگام CSS3 مشکل ساز بوده است.

در اینجا یک مثال آورده شده است، اگر بخواهیم یک طرح 3 ستونی ساده با یک ناودان 20 پیکسلی ایجاد کنیم، در CSS باید تایپ کنیم:

div
{
 -webkit-column-count:3;
 -moz-column-count:3;
 column-count:3;
 -webkit-column-gap:20px;
 -moz-column-gap:20px;
 column-gap:20px;
}

می توانید ببینید که چقدر سریع کد ما را غیرقابل مدیریت می کند. با کمک Compass و Sass تنها چیزی که نیاز داریم این است:

div
{
 @include column-count(3);
 @include column-gap(20px);
}

همانطور که می بینید، ما پیشوندهای فروشنده را حذف کرده ایم و تنها در 2 خط به 6 خط CSS رسیدیم.

نمونه دیگری از CSS که نیاز به تایپ زیاد دارد، گرادیان است. در اینجا روش نوشتن یک گرادیان ساده سفید به سیاه در CSS آمده است:

.gradient
{
 background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #000000));
 background-image: -webkit-linear-gradient(#ffffff, #000000);
 background-image: -moz-linear-gradient(#ffffff, #000000);
 background-image: -o-linear-gradient(#ffffff, #000000);
 background-image: linear-gradient(#ffffff, #000000);
}

ایجاد همان افکت با Compass به همین سادگی است:

.gradient
{
 @include background-image(linear-gradient(#fff, #000));
}

این نه تنها مقدار کد را به میزان قابل توجهی کاهش می دهد، بلکه اگر می خواهید رنگ ها را تغییر دهید، در نسخه Compass فقط باید یک بار آنها را تغییر دهید.

یک لیست کامل از وجود دارد ویژگی های CSS3 را در اینجا کوتاه کرد.

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

@import "compass/typography"

ماژول تایپوگرافی مختصر بسیار خوبی برای استایل رنگ ها دارد، مانند:

a
{
 // link colors (normal, hover, active, visited, focus)
 @include link-colors(red, blue, grey, red, blue);
}

این بهترین چیز در مورد Compass است. کدی که ما استفاده می کنیم را می گیرد روی به صورت روزانه و نسخه های مختصر را به ما می دهد.

نتیجه

این مقاله فقط یک معرفی سریع برای Compass بود، اما اگر موضوع را به اندازه من هیجان‌انگیز می‌دانستید، اکیداً به شما توصیه می‌کنم که وب سایت آنها را بررسی کنید و بیشتر از ابزارهای موجود در دسترس را بررسی کنید.

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

آیا از Compass یا Sass استفاده می کنید؟ آیا پیش پردازنده متفاوتی را ترجیح می دهید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر قطب نما از طریق Shutterstock.