زكرياء الزحتي
أداة Compass هي اطار عمل (Framework) ومعالج تقوم بترجمة وتحويل أكواد SCSS/SASS إلى CSS العادية, وأيضا تأتي مع بعض الأدوات المساعدة في التخطيط, وأيضا تمكننا من إضافة أطر عمل خارجية أخرى إلى مشروعنا.
SCSS/SASS تم تصميمهما للتنظيم و تقليل من وقت تصميم صفحات الويب, وليس هذا فقط بل هي تجعلنا نعمل باحترافية أكثر وذالك ﻷنها تحتوي على متغييرات ودوال و تتميز بالتنظيم وسهولة التعديل وذالك ﻷنها تمكننا من استخدام ملفات جزئية (partials) للتنظيم الكود أكثر وذالك من خلال الكلمة المحجوزة @import لاستراد ملفات أخرى خصوصا إذا كنا نعمل على مشروع كبير.
SASS أو SCSS لهم نفس المحرك والفرق بينهم فقط في كتابة اﻷكواد, وﻷن SCSS تشبه كثيرا للغة CSS التقليدية ولها شعبية أكثر سنتكلم عنا في هذه المقالة و أنا متأكد أنك عند استعمالك لل SCSS ستقع في حبها بشكل سريع وستجد أن التطور الذي تقدمه لك هذه التقنية لا يوصف, وأيضا التصميم بها اسرع بنسبة 40% من التصميم بأسلوب CSS التقليدي.
هذه اﻷداة تم تصميمها و برمجتها بلغة Ruby لهذا قبل تثبيتها سنقوم بتثبيث لغة Ruby لكي تعمل معنا اﻷداة, وأيضا حتى السرفر المحلي الذي سيجعلنا نعمل كما أننا في موقع حقيقي سنقوم بعمله عن طريق لغة Ruby لهذا من الظروري تثبيتها.
تثبيت لغة Ruby:
لكي نقوم بتثبيت لغة Ruby يجب علينا عمل التحديث أولا للتحميل المعلومات عن الحزم الموجودة في النظام, وذالك عبر اﻷمر التالي.
sudo apt-get updateملاحظة: إذا طلبت منك كلمة سر المستخدم أكتبها, كما في الصورة أسفله.
بعد اﻹنتهاء من التحديث سنقوم بتثبيت لغة Ruby عبر اﻷمر التالي:
sudo apt-get install ruby-fullملاحظة: إذا طلب منك الموافقة قم بالضغط على الحرف Y, يعني Yes, كما في الصورة أسفله.
بعد اﻹنتهاء, سنقوم بتحقق من أنه تم تثبيت لغة Ruby بنجاح وذالك عبر إظهار إصدارها من خلال اﻷمر التالي:
ruby --version
كما ترى لقد ظهر لنا اصدار لغة Ruby, وهذا يعني أنه تم تثبيتها بنجاح.
تثبيت أداة Compass:
بعد أن قمنا بتثبيت لغة Ruby, اﻷن يمكننا تثبيت اﻷداة Compass عن طريق اﻷمر gem لأنها تم توزيعها عبر مدير الحزم الخاص بلغة Ruby والمعروف بإسم RubyGems, وذالك عبر اﻷمر التالي:
sudo gem install compass
بعد أن ننتهي من تثبيت Compass, سنقوم بتوجيه إلى مجلد Desktop لكي نقوم بإنشاء مشروع جديد عليه وذالك من خلال اﻷمر التالي:
cd ~/Desktop/إنشاء مشروع جديد:
اﻷن سنقوم بإنشاء مشروع جديد بإسم ab9or_project1 عن طريق اﻷداة Compass, وذالك من خلال اﻷمر التالي:
compass create ab9or_project1
كما ترى لقد تم إنشاء مشروع جديد داخل مجلد ab9or_project1, وظهرت لنا الشفرة التي سنضيفها داخل ملف index.html للتظهر لنا تحديثات ملفات SCSS.
بعض خصائص اﻷداة Compass:
الخاصية --syntax:
هذه الخاصية نستعملها حينما نريد العمل بتقنية SASS, لكن افتراضيا إذا لم نحدد هذه الخاصية سيتم توليد الملفات بتقنية SCSS, وهذه الخاصية نضيفها عند إنشاء مشروع جديد وتكتب هكذا:
compass create ab9or_project1 --syntax sassالخاصية --sass-dir:
من خلال هذه الخاصية نستطيع تغيير المجلد اﻹفتراضي الذي تكون بداخله ملفات SCSS, وافتراضيا هذا المجلد يأتي بإسم sass, وهذه الخاصية نضيفها عند إنشاء مشروع جديد وتكتب هكذا:
compass create ab9or_project1 --sass-dir "scss"اﻷن جميع ملفات SCSS ستكون داخل مجلد scss, ويمكننا تسميته أي اسم.
الخاصية --css-dir:
من خلال هذه الخاصية نستطيع تغيير المجلد اﻹفتراضي الذي تكون بداخله ملفات CSS, وافتراضيا هذا المجلد يأتي بإسم stylesheets, وهذه الخاصية نضيفها عند إنشاء مشروع جديد وتكتب هكذا:
compass create ab9or_project1 --css-dir "css_files"اﻷن جميع ملفات CSS ستكون داخل مجلد css_files, ويمكننا تسميته أي اسم.
الخاصية --javascripts-dir:
من خلال هذه الخاصية نستطيع تغيير المجلد اﻹفتراضي الذي تكون بداخله ملفات JS
(JavaScript), وافتراضيا هذا المجلد لا يأتي عند إنشاء مشروع جديد, لكن في ملف اﻹعدادات (config.rb) يأتي افتراضيا بإسم javascripts, وهذه الخاصية نضيفها عند إنشاء مشروع جديد وتكتب هكذا:
compass create ab9or_project1 --javascripts-dir "js_files"الخاصية --images-dir:
من خلال هذه الخاصية نستطيع تغيير المجلد اﻹفتراضي الذي تكون بداخله ملفات صور, وافتراضيا هذا المجلد لا يأتي عند إنشاء مشروع جديد, لكن في ملف اﻹعدادات (config.rb) يأتي افتراضيا بإسم images, وهذه الخاصية نضيفها عند إنشاء مشروع جديد وتكتب هكذا:
compass create ab9or_project1 --images-dir "imgs_files"ملاحظة: يمكنك كتابة هذه الخصائص كلها مع بعض في سطر واحد فقط يجب أن تفصل بينهم بالفراغ, كما في المثال التالي:
compass create ab9or_project1 --syntax sass --sass-dir "sass" --css-dir "css_files" --javascripts-dir "js_files" --images-dir "imgs_files"ترجمة ملفات SCSS:
يمكننا عمل الترجمة أو (تحويل من SCSS إلى CSS) بطريقتين, إما عن طريق compile أو عن طريق watch.
الترجمة عن طريق compile:
هذه الطريقة نستعملها إذا أردنا أن نعمل الترجمة حينما ننتهي, يعني تتم الترجمة فقط حينما نقوم نحن بتنفيذ اﻷمر التالي:
compass compile .ملاحظة: نقطة . تعني المجلد الحالي, يمكنك تغييرها بمسار مجلد المشروع,
على سبيل المثال: ~/Desktop/ab9or_project1/.
الترجمة عن طريق watch:
هذه الطريقة نستعملها إذا أردنا أن نجعل الترجمة أليا, يعني في كل مرة يتم إدخال تحديثات على ملفات SCSS وحفظها تتم ترجمة ذلك إلى ملف CSS, وذالك من خلال اﻷمر التالي:
compass watch .ملاحظة: نقطة . تعني المجلد الحالي, يمكنك تغييرها بمسار مجلد المشروع,
على سبيل المثال: ~/Desktop/ab9or_project1/.
وإذا أردنا إيقاف الترجمة اﻷلية نضغط على اﻷزرار Ctrl + .C
إنشاء ملف index.html:
اﻷن سنقوم بإنشاء ملف جديد بإسم index.html داخل مجلد ab9or_project1 في الجذر, ونضيف له هذا الكود الذي يحتوي على ملفات css التي ستظهر عليها تحديثات حين نقوم بترجمة ملفات scss عبر اﻷمر compass compile أو compass watch.
قم بنسخ الكود التالي وأضفه في ملف index.html:
<html>
<head>
<meta charset="utf-8" />
<title>مدونة عقبور</title>
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<h1>مرحبا بك في مدونة عبقور</h2>
</body>
</html>تشغيل المشروع على السرفر المحلي:
بعد أن قمنا بإنشاء صفحة index.html, اﻷن سنقوم بجعلها تعمل وكأنها في موقع حقيقي, وهذا من خلال تشغيل سرفر محلي في جهازنا عن طريق لغة Ruby, وذالك عن طريق اﻷمر التالي:
ruby -rwebrick -e'WEBrick::HTTPServer.new(Port: 2222, DocumentRoot: ".").start'شرح اﻷمر:
2222: تعني المنفذ (Port), ويمكننا تغييرها و وضع أي رقم نريد.
".": كما قلنا سابقا النقطة . تعني المجلد الحالي ويمكننا تغييرها و وضع مسار مجلد المشروع, على سبيل المثال: ~/Desktop/ab9or_project1.
ruby -rwebrick -e'WEBrick::HTTPServer.new(Port: 2222, DocumentRoot: "~/Desktop/ab9or_project1").start'
كما يظهر في الصورة السرفر المحلي عمل بنجاح, اﻷن سنتوجه إلى هذا الرابط: http://localhost:2222.
عند الذهاب إلى الرابط ستظهر لنا الصفحة كالتالي:
