يستخدم الكثير من المصممين نوعًا ما من المعالج المسبق لـ CSS ، سواء كان ذلك ساس ، أقل أو مرقم . إذا كنت قد استخدمت أيًا من هذه ، فأنت على الأرجح على دراية أيضًا بأن Compass عبارة عن إطار عمل تم بناؤه على Sass ، وعلى الرغم من أن تركيبه قد يكون غير نشط ، فبمجرد استخدامه ، ستكتشف سريعًا أنها واحدة من أفضل المهارات مصمم الويب يمكن أن يتعلم.
إذا لم تستخدم Sass من قبل ، فإنني أوصي بأن تلقي نظرة على WDD's مقدمة لساس.
تعمل البوصلة مثل إطار عمل CSS الخاص بك. عندما تعمل على مشروع كبير ، فمن السهل أن تخرج الأشياء عن نطاق السيطرة ، وغالباً ما يكون العثور على أشياء في CSS لديك تحديًا. تحاول Compass معالجة هذه المشكلات ، مع فائدة إضافية تتمثل في العمل مع بادئات البائع.
كما قلت أعلاه ، يعد Compass إطارًا لغتك CSS يحل بعض المشاكل مع اللغة. ويتضمن أيضًا بعض الأدوات لجعل التطوير أسرع وأسهل:
مثل Sass و LESS ، Compass هو مجرد أداة لجعل تصميم الموقع أكثر بساطة.
البوصلة هي جوهرة روبي ، لذا يجب عليك تثبيت برنامج Ruby على جهازك من أجل تثبيته. لحسن الحظ ، يكون تثبيت Ruby بسيطًا ، على Windows تحتاج فقط إلى تنزيله روبي المثبت للحصول على ويندوز ، على نظام التشغيل Mac / Linux ، اتبع التعليمات الموجودة على موقع روبي.
بمجرد تثبيت تطبيق Ruby ، يصبح تثبيت البوصلة سهلاً كما يلي:
gem install compassسيقوم هذا بتثبيت كل من Compass و Sass.
إذا كنت ترغب في إنشاء مشروع Compass ، فستقوم بعد ذلك بكتابة:
compass create /path/to/projectcd /path/to/projectcompass watchتعني هذه الأسطر الثلاثة من التعليمات البرمجية أنه في أي وقت تقوم فيه بتغيير ملف Sass سيتم تجميعها تلقائيًا في CSS.
بالتناوب ، يمكنك استخدامها Codekit (ماك) أو Prepros (Windows) لتجميع Sass عند حفظه.
البوصلة مقسمة إلى وحدات ولكي نبدأ في استخدام أدواتها ، نحتاج أولاً إلى استيراد الوحدة التي نريدها في ملف .scss الرئيسي الخاص بنا. على سبيل المثال ، لاستيراد وحدة 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);}كما ترون ، فقد أزلنا بادئات البائع ، وما استغرق 6 أسطر من CSS أنجزناها في 2 فقط.
مثال آخر على 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);}إنشاء نفس التأثير مع البوصلة بسيط مثل:
.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 و Sass في مشاريعك ، لأنها بالفعل إضافات مذهلة لمصمم أدوات الويب.
هل تستخدم البوصلة أم ساس؟ هل تفضل معالج ما قبل مختلف؟ اسمحوا لنا أن نعرف في التعليقات.