تعرف على كيفية العمل باستخدام ملفات معالجات CSS الأولية وتحويلها برمجيًا في داخل Dreamweaver.

تقوم معالجات CSS الأولية بالتحويل البرمجي للتعليمات البرمجية المكتوبة في لغة معالجة سابقة للغة CSS الأكثر شيوعًا. تقوم اللغة التي تم معالجتها مسبقًا برفع CSS إلى مستوى أقرب للغة البرمجة.

تتيح لك المعالجات الأولية على وجه الخصوص استخدام المتغيرات، وعمليات الخلط والوظائف والعديد من الأساليب الأخرى التي
هي غير ممكنة في CSS. وباستخدام معالجات CSS الأولية يمكنك تعريف كل شيء لمرة واحدة وإعادة استخدامه بشكل متكرر ينتج عنه CSS القابلة للصيانة والمليئة بالسمات والقابلة للتوسيع.

تدعم Dreamweaver معالجات CSS الأولية الأكثر شيوعًا: Sass وLess، كما تدعم Dreamweaver أيضًا إطاري عمل Compass وBourbon لتحويل ملفات Sass.

Less مستند إلى JavaScript وSass مستند إلى Ruby لكن لا يلزم عليك معرفة أي شيء حول أيّ من هذه اللغات أو استخدام سطر الأوامر لتحويل الملفات برمجيًا إلى CSS. يقوم Dreamweaver تلقائيًا بتحويل الملفات برمجيًا في CSS باستخدام مكتبة less.js JavaScript عندما تقوم بتحميل هذه الملفات أو تحريرها أو حفظها.

طريقة معالجة Dreamweaver لمعالجات CSS الأولية

تختلف طريقة معالجة Dreamweaver لمعالجات CSS الأولية بناءً على ما إذا كنت قد قمت بتحديد موقع أم لا. تنصح Adobe بتعريف موقع لأن الحصول على موقع يتيح لك حرية إعداد تفضيلات معالجات CSS الأولية وأيضًا استخدام أطر عمل Compass وBourbon داخل Dreamweaver. 

وإذا كان لديك موقع محدد، فيمكنك تخصيصه بنفس طريقة عمل معالجات CSS داخل Dreamweaver من خلال إعداد تفضيلات معالجات CSS الأولية الخاصة بالمواقع.

يتيح تعيين تفضيلات معالجات CSS الأولية الخاصة بالمواقع لك تحديد خيارات تجميع على أساس الموقع. يمكنك أيضًا تخصيص موقع ملفات Sass وCSS، وخيارات المعالجات الأولية الخاصة بكل موقع.

وعند تعريف موقع، يقوم Dreamweaver أيضًا بتمكينك من استخدام أطر عمل Sass وهي –Compass وBourbon وBourbon Neat وBourbon bitters داخل Dreamweaver.

وإذا لم يكن لديك موقع محدد، فيمكنك اختيار تحويل ملفات Sass وLess برمجيًا يدويًا. لكن الدعم لإطاري عمل Compass وBourbon frameworks غير مدعوم.

كيف تُستخدم معالجات CSS الأولية في Dreamweaver؟

ها هو سير عمل على مستوى عالٍ للمهام المتضمنة عند استخدام معالجات CSS الأولية:

  1. قم بتحديد موقع في Dreamweaver. تأكد أن ملف Sass أو Less الذي تحاول تحويله برمجيًا موجود في المجلد الجذر للموقع. وإذا كنت قد حددت بالفعل موقعًا وتم تضمين ملف Sass/Less في الموقع الجذر، فواصل القيام بالخطوة التالية. لمزيد من المعلومات حول إعداد موقع، Dreamweaver راجع حول مواقع Dreamweaver.
  2. تعيين التفضيلات لمعالجات CSS الأولية (مثل تحديد موقع ملفات CSS التي تم إنشاؤها). هذه التفضيلات خاصة بالموقع. لمزيد من المعلومات، راجع تعيين تفضيلات معالجات CSS الأولية الخاصة بالموقع.
  3. إذا كنت تريد استخدام أطر عمل محددة، مثل Compass أو Bourbon، فيمكنك تحديد الإعدادات لأطر العمل هذه. لمزيد من المعلومات، راجع: استخدام إطار عمل Compass أو  استخدام إطار عمل Bourbon.
  4. إعداد إكمال تلقائي أو تحويل ملفات Sass وLess برمجيًا يدويًا. لمزيد من المعلومات، راجع تحويل ملفات معالجات CSS الأولية برمجيًا.

ضبط التفضيلات لمعالجات CSS الأولية

يمكنك تعيين تفضيلات خاصة بالمواقع لمعالجات CSS الأولية باستخدام مربع حوار Sites > Manage Sites.

يتيح الحفاظ على تفضيلات معالجات CSS الأولية الخاصة بالمواقع لك إدارة معالجات CSS الأولية على أساس الموقع، مما يوفر لك التحكم في معالج CSS لكل موقع فردي، بدون الحاجة إلى تحديث التفضيلات في كل مرة تقوم فيها بتغيير المواقع.

تعيين إعدادات معالجات CSS الأولية العامة

يمكنك تعيين تفضيلات معالجات CSS الأولية العامة التالية في مربع حوار Sites > Manage Sites > CSS Preprocessors. 

تعيين إعدادات معالجات CSS الأولية العامة
تعيين إعدادات معالجات CSS الأولية العامة

تمكين التحويل البرمجي التلقائي عند حفظ الملف

حدد هذا الخيار لتمكين تجميع معالجات CSS الأولية تلقائيًا. إذا قمت بتحديد هذا الخيار، سيقوم Dreamweaver تلقائيًا بإنشاء ملف CSS عندما تقوم بحفظ ملف Sass أو Less أو SCSS الخاص بك. في حالة ترك هذا الخيار بدون تحديد، يتعين عليك تحويل الملفات يدويًا في كل مرة تقوم فيها بإجراء تغيير.

خيارات Less

تمكين العمليات الحسابية المعقدة

قم بمعالجة هذه العمليات الحسابية في أقواس فقط. فعلى سبيل المثال، تتم معالجة (100 بكسل/25 بكسل) بنجاح بينما لم تتم معالجة 20% + 10% (دون أقواس). عند تعطيل هذا الخيار، تتم معالجة جميع العمليات الحسابية في الملف.

تمكين وحدات التقيد

إخراج وحدة مخمنة في CSS بعد العمليات الحسابية. فعلى سبيل المثال، يتم تحويل 5 بكسل * 2 بكسل كـ 10 بكسل وليس 10 بكسل2. 

وعند تعطيل هذا الخيار، يحاول Less تخمين وحدات الإخراج عندما يعالج العمليات الحسابية.

في هذا المثال، يتم إنشاء CSS كما يلي:

.class {
  property: 1px * 2px;
}

في هذه الحالة، التخمين غير صحيح - يعطي الطول مضروبًا في الطول منطقة، لكن CSS لا يدعم تحديد المنطقة. نفترض هنا أن المستخدم قصد أحد القيم لتكون قيمة، وليس وحدة طول ويقوم Dreamweaver بإخراج 10px.

ومن خلال تشغيل وحدات التقييد، فإن CSS المنشأ هذا يعتبر خطأ.

إعادة كتابة عناوين URL باعتبارها عناوين URL ذات صلة

يعيد كتابة عناوين URL وبالتالي يكون عنوان URL دائمًا ذي صلة بملف الأساس الذي تم استيراده. وهذا يعني، أنه في حالة استيراد ملف Less لملف Less آخر، والذي يشير بدوره إلى صورة ما، يتم إظهار عنوان URL في معالج CSS المحول برمجيًا.

إنشاء مخطط مصدر

يقوم بإنشاء مخطط مصدر (الملف الذي يسد الفجوة بين اللغات عالية المستوى مثل Sass وLess، واللغات منخفضة المستوى، التي يتم التحويل برمجيًا إليها، مثل CSS).

خيارات Sass/SCSS

نمط ملف الإخراج

تحديد نمط ملف إخراج CSS:

  • Nested - يقوم بتنسيق CSS المحول برمجيًا في بنية نمطية معروفة.
  • Compact - يقوم بتنسيق CSS المحول برمجيًا في بنية محكمة تستغرق مساحة أقل من Nested أو Expanded.
  • Compressed - يقوم بإخراج CSS في بنية مستوية.
  • Expanded - يقوم بإخراج CSS بشكل موسع مع شغل كل خاصية وقاعدة لسطر واحد. الخصائص مقصودة داخل القواعد، لكن القواعد غير مقصودة بأي طريقة. 

إنشاء تعليقات المصدر

يقوم بإنشاء التعليقات في ملف إخراج CSS الذي يحدد التعليمة البرمجية ل CSS إلى السطر الذي تم إنشاؤه به.

إنشاء مخطط مصدر

يقوم بإنشاء مخطط مصدر (الملف الذي يسد الفجوة بين اللغات عالية المستوى مثل Sass وLess، واللغات منخفضة المستوى، التي يتم التحويل برمجيًا إليها، مثل CSS).

تعيين تفصيلات مصدر وإخراج CSS

يمكنك تحديد ملفات CSS التي تم إنشاؤها التي يلزم وضعها، والمسار الذين ينبغي على Dreamweaver مشاهدته وتشغيل التحويل البرمجي التلقائي عندما يتم تعديل ملف Sass/LESS في مسار ما باستخدام محرر خارجي.

إعدادات معالج CSS الأولي للمصدر والإخراج
إعدادات معالج CSS الأولي للمصدر والإخراج

يمكنك تعيين تفضيلات معالجات CSS الأولية للمصدر والإخراج في مربع حوار Sites > Manage Sites.

إخراج CSS

تحديد مكان ملف إخراج CSS المنشأ.

في نفس مجلد المصدر

حدد هذا الخيار إذا كنت تريد حفظ ملفات CSS التي تم إنشاؤها في نفس المجلد الخاص بملفات Sass وLess.

تحديد مجلد الإخراج

حدد هذا الخيار لتحديد مجلد تريد حفظ ملفات CSS التي تم إنشاؤها فيه.

استبدال مقطع مسار إدخال

يتيح لك هذا الخيار استبدال جزء من المسار باستخدام سلاسل From وTo.

على سبيل المثال، عند تعيين From: scss وTo:css، يتم وضع ملف الإخراج داخل نفس البنية الشجرية بعد استبدال SCSS في المسار css.

المجلد المصدر

حدد المجلد الفرعي داخل جذر الموقع الذي يحتاج إلى مشاهدته. يحتوي هذا المجلد الفرعي في المعتاد على ملفات SCSS أو LESS. 

في حالة تمكين Compilation في إعدادات General، فسيقوم Dreamweaver تلقائيًا بتشغيل CSS Preprocessor عند تعديل أي ملف داخل هذا المجلد خارجيًا، أو من داخل Dreamweaver.

استخدام إطار عمل Compass

Compass هو إطار عمل تأليف CSS مفتوح المصدر يتيح لك إنشاء أوراق أنماط CSS3 باستخدام Sass.

يوفر Dreamweaver الدعم إلى Compass. لذلك إذا قمت بإنشاء أوراق أنماط باستخدام Compass، يمكنك تحويل أوراق الأنماط هذه برمجيًا وإنشاء ملفات CSS من داخل Dreamweaver.

  1. تثبيت ملفات Compass.

    إذا لم يكن لديك Compass مثبت بالفعل على نظامك، فيمكنك تثبيته من داخل Dreamweaver. 

    في مربع حوار Site Setup، حدد CSS Preprocessors > Compass. حدد Use Compass ثم انقر فوق Install Files.

    تثبيت ملفات Compass
    تثبيت ملفات Compass

    يتم تثبيت جميع ملفات Compass وملف تكوين *.rb داخل مجلد موقعك، ويمكنك مشاهدتها في لوحة Files.

    ملفات Compass المثبتة
    ملفات Compass المثبتة

  2. تحديد ملف تكوين حالي مستند إلى Ruby

    إذا كان لديك Compass بالفعل على أجهزتك، وكان لديك إعداد ملف Compass *.rb، فمن داخل مربع حوار Dreamweaver Site Setup، حدد المسار إلى ملف Compass *.rb داخل جذر الموقع الحالي.

    1. في مربع حوار Site Setup، حدد CSS Preprocessors > Compass.
    2. حدد خانة اختيار Use Compass.
    3. انقر فوق Specifying Ruby-based configuration file، واستعرض للوصول إلى موقع الملف. انقر فوق Save عند الانتهاء من ذلك.
    تحديد ملف تكوين حالي مستند إلى Ruby
    تحديد ملف تكوين حالي مستند إلى Ruby

    ملاحظة:

    يجب أن يوجد هذا الملف في مجلد جذر الموقع.

  3. تحديد خيارات التكوين يدويًا

    إذا لم يكن لديك خيار تكوين حالي، فيمكنك اختياره وتحديده يدويًا.

    1. في مربع حوار Site Setup، حدد CSS Preprocessors > Compass.
    2. حدد خانة اختيار Use Compass.
    3. انقر فوق Specifying Configuration Options manually. حدد خيارات التكوين التالية وانقر فوق Save.

    يتم ملء الحقول التالية تلقائيًا، ولكن يمكنك تغييرها وفقًا لمتطلباتك:

    ملاحظة:

    يجب أن تكون جميع المسارات المخزنة في هذه المسارات داخل جذر الموقع.

    مسار HTTP

    المسار إلى المشروع عند التشغيل داخل خادم الويب. يتم التعيين افتراضيًا إلى "/".

    دليل الصور

    الدليل الذي يتم فيه الإبقاء على الصور. وهو نسبي لـ project_path.

    دليل الصور التي تم إنشاؤها

    الدليل الذي يتم فيه الإبقاء على الصور التي تم إنشاؤها. وهو نسبي لـ project_path. يتم تعيينه افتراضيًا إلى قيمة images_dir.

    دليل الخطوط

    الدليل الذي يتم فيه الإبقاء على ملفات الخط.

    الأصول النسبية

    يوضح ما إذا كانت وظائف أداة Compass المساعدة ينبغي أن تنشئ عناوين URL نسبية من CSS إلى الأصول أو عناوين URL مطلقة باستخدام مسار http لنوع الأصل.

  4. إذا قمت بتحديد Enable Auto Compilation في File Save، في مربع الحوار Sites > Manage Sites > CSS Preprocessors، سيقوم Dreamweaver بإنشاء ملف CSS في كل مرة تقوم فيها بحفظ التغييرات على ملفات Sass لديك. يمكنك أيضًا معاينة هذه التغييرات في الوقت الحقيقي في نافذة المستعرض لديك. لمزيد من المعلومات حول معاينة التغييرات التي قمت بها في الوقت الحقيقي في المستعرض، راجع  المعاينة في الوقت الحقيقي.

    في حالة عدم رغبتك في التحويل التلقائي، يمكنك عندئذ تحويل ملف CSS يدويًا من خلال القيام بأي مما يلي:

    • انقر نقرًا مزدوجًا فوق ملف Sass أو Less أو SCSS في اللوحة Files وانقر فوق Compile.
    • انقر فوق Tools > Compile لتحويل الملف الحالي برمجيًا.
  5. يمكنك عندئذ إرفاق ملف CSS الذي تم تحويله برمجيًا بملفات HTML في موقعك. لمزيد من المعلومات، راجع الارتباط بورقة أنماط CSS خارجية.

استخدام إطار عمل Bourbon

يقوم Dreamweaver بدعم مجموعة منتجات Bourbon. لذلك إذا قمت بإنشاء أوراق أنماط باستخدام Bourbon، يمكنك تحويل أوراق الأنماط هذه برمجيًا وإنشاء ملفات CSS من داخل Dreamweaver.

يتم دعم صفات Bourbon التالية:

  • Bourbon - مكتبة خلط بسيطة وخفيفة لـ Sass
  • Bourbon Neat - إطار عمل شبكة دلالي خفيف لـ Sass وBourbon
  • Bourbon Bitters - أنماط سقالات وبنية لمشروعات Bourbon

يمكن استيراد إطار عمل Bourbon من خلال إضافة واحد مما يلي في التعليمات البرمجية:

  • @import "bourbon" - لاستيراد Bourbon
  • @import “neat” – لاستيراد Bourbon Neat
  • @import “base” – لاستيراد Bourbon Bitter

ثم يستخدم Dreamweaver بعد ذلك إصدارًا بحزمة مسبقة من Bourbon أثناء تحويل ملفات المعالج الأولي برمجيًا.

في المقابل يمكنك تثبيت ملفات إطار عمل Bourbon لموقعك كي لا تؤثر التحديثات الإضافية لـ Dreamweaver على عمليات سير عمل التحويل البرمجي الخاصة بك. يتم نسخ ملفات إطار عمل Bourbon إلى موقعك وهذا هو إطار العمل المستخدم عند تشغيل التحويل البرمجي لأي من الملفات التي تستورد إطار العمل.

تثبيت ملفات Bourbon أو Bourbon Neat أو Bourbon Bitters

لتثبيت Bourbon أو أيّ من صفاته:

  1. في مربع حوار Site Setup، حدد CSS Preprocessors > Bourbon أو Bourbon Neat أو Bourbon Bitters.

  2. انقر فوق Install Files لتثبيت الملفات في موقع مجلد جذر الموقع داخل موقعك.

    تثبيت ملفات Bourbon
    تثبيت ملفات Bourbon

    يتم تثبيت جميع ملفات Bourbon داخل مجلد موقعك، ويمكنك مشاهدتها في لوحة Files.

    ملفات Bourbon المثبتة
    ملفات Bourbon المثبتة

    في حالة الفشل، يتم عرض الأخطاء في لوحة Output (Window > Results > Output) ويتغير رمز شريط الحالة للّون الأحمر.

تحويل ملفات معالج CSS الأولي برمجيًا

إعداد التحويل البرمجي التلقائي لملفات معالج CSS الأولي

يمكنك إعداد الخيارات داخل Dreamweaver لتحويل التغييرات التي تتم في ملف Sass أو Less برمجيًا في CSS المكافئ له. يمكنك أيضًا تحديد المواقع (داخل جذر الموقع) التي تريد تخزين CSS المنشأ بها.

  1. في مربع حوار Site Setup حدد CSS Preprocessors > General > Enable Auto Compilation on File Save.

    تمكين التحويل البرمجي التلقائي
    تمكين التحويل البرمجي التلقائي

  2. في مربع حوار Site Setup، حدد CSS Preprocessors > Source & Output.

  3. في مربع حوار Source & Output، حدد المواقع التي تريد حفظ ملفات CSS التي تم إنشاؤها بها. يمكنك اختيار أحد الخيارات التالية:

    في نفس مجلد المصدر

    حدد هذا الخيار إذا كنت تريد حفظ ملفات CSS التي تم إنشاؤها في نفس المجلد الخاص بملفات Sass وLess.

    تحديد مجلد الإخراج

    حدد هذا الخيار لتحديد مجلد تريد حفظ ملفات CSS التي تم إنشاؤها فيه.

    استبدال مقطع مسار إدخال

    يتيح لك هذا الخيار استبدال جزء من المسار باستخدام سلاسل From وTo.

  4. حدد المجلد الذي يحتوي على ملفات Sass أو Less التي يحتاج Dreamweaver إلى "رؤيتها". 

    وفي حالة عمل التغييرات لأي من الملفات داخل المجلد الذي تمت رؤيته هذا، يقوم Dreamweaver تلقائيًا بتحويل الملفات بعد حفظها. 

    إعدادات معالج CSS الأولي للمصدر والإخراج
    إعدادات معالج CSS الأولي للمصدر والإخراج

    ملاحظة:

    يشاهد Dreamweaver هذه الملفات ويقوم بتحويلها برمجيًا حتى في حالة عمل التغييرات خارج Dreamweaver (باستخدام محرر نصوص على سبيل المثال).

بعد النجاح في التجميع، يتم عرض رسالة في لوحة Output (Window > Results > Output) ويتم عرض رمز الحالة في شريط الحالة باللون الأخضر <icon>. لفتح CSS المحوّل برمجيًا، انقر بشكل مزدوج فوق رسالة النجاح في اللوحة.

إذا تم العثور على أية أخطاء، فلن يتم تحويل CSS برمجيًا بنجاح. يتم عرض رمز الحالة باللون الأحمر <icon> وتقوم لوحة Output بإدراج جميع الأخطاء والتحذيرات. يمكنك النقر بشكل مزدوج فوق رسالة خطأ في اللوحة للانتقال السريع إلى السطر الذي يحتوي على أخطاء في التعليمة البرمجية. لن يتم جمع ملف CSS بنجاح حتى يتم حل جميع الأخطاء.

ملاحظة:

يتم إرساء لوحة Output بشكل عام في أسفل مساحة العمل. إذا تم إغلاق اللوحة، فيمكنك فتحها باستخدام Window > لوحة Output.

يمكنك أيضًا تبديل لوحة لإخراج (إظهار / إخفاء) باستخدام رمز الحالة عندما يكون باللون الأحمر.

بعد الحصول على ملف CSS المجمع، يمكنك ربط صفحة الويب بورقة الأنماط. عند إجراء أي تغييرات على معالجات CSS، يتم تحديث ملفات CSS المجمعة المتوافقة تلقائيًا. يتم تحديث صفحة الويب أيضًا بصورة تلقائية في "العرض المباشر".

للمزيد من المعلومات حول ربط صفحة الويب الخاصة بك بورقة الأنماط، راجع الارتباط بورقة أنماط CSS خارجية‬.

التحويل البرمجي يدويًا لملف معالج CSS أولي

في بعض الحالات (مثلاً عند عدم تحديد موقع Dreamweaver)، قد تحتاج إلى جميع ملف معالج CSS أولي يدويًا.

وفي تلك السيناريوهات، قم بتعطيل Enable Auto Compilation on File Save في CSS Preprocessors > لوحة General في مربع حوار Site Setup.

لتجميع معالج CSS يدويًا، انقر بزر الماوس الأيمن فوق الملف في لوحة Files وانقر فوق Compile.

تحويل ملفات معالجات CSS الأولية برمجيًا من خلال لوحة Files
تحويل ملفات معالجات CSS الأولية برمجيًا من خلال لوحة Files

كما يمكنك النقر فوق Tools > Compile لتحويل الملف الحالي برمجيًا.

تم ترخيص هذا العمل بموجب الترخيص العام غير المعدل الخاص بالإسناد وعدم التجارة والمشاركة الإصدار 3.0 ‏من ‏‏Creative Commons‏‏  إن بنود Creative Commons لا تشمل منشورات Twitter™‎ وFacebook.

إشعارات قانونية   |   سياسة الخصوصية على الإنترنت