استخدم ملفات Compass.
إذا لم يكن لديك Compass مثبت بالفعل، يمكنك تثبيته من داخل Dreamweaver.
تعرف على كيفية العمل باستخدام ملفات معالجات CSS الأولية وتحويلها برمجيًا في داخل Dreamweaver.
CSS هي لغة تصف نمط مستند HTML. تقوم معالجات CSS الأولية بالتحويل البرمجي للتعليمات البرمجية المكتوبة في لغة معالجة سابقة للغة CSS الأكثر شيوعًا. ترفع اللغة المعالجة مسبقًا CSS إلى مستوى أقرب للغة البرمجة.
على وجه التحديد، تتيح لك المعالجات المسبقة استخدام المتغيرات والمزجيات والوظائف والعديد من التقنيات الأخرى التي
غير متاحة في CSS.باستخدام معالجات CSS المسبقة، يمكنك تعريف كل شيء مرة واحدة وإعادة استخدامه بشكل متكرر مما ينتج عنه CSS قابل للصيانة والتوسيع.
باستخدام معالج CSS الأولي، يمكنك أيضًا الكتابة بلغة CSS بشكل أفضل وأسهل في الصيانة. إذا كنت تقوم بإنشاء مواقع تشير إلى عدد من ملفات CSS، فإن استخدام معالجات CSS المسبقة مثل Sass أو Compass يمكن أن يقلل من الترميز اليدوي وإجراءات النسخ واللصق.
يستخدم Dreamweaver منشئ Ruby-Saas المضمن للتحويل البرمجي لملفات SCSS وLESS. يدعم Dreamweaver أيضًا أطر عمل Compass وBourbon لتجميع ملفات Sass.
يستند LESS إلى لغة JavaScript، بينما يستند Sass إلى Ruby. ومع ذلك، لا يلزم عليك معرفة أي شيء عن أيّ من هاتين اللغتين. ولا يلزم عليك استخدام سطر الأوامر لتحويل الملفات برمجيًا إلى CSS. يقوم Dreamweaver بتجميع هذه الملفات تلقائيًا إلى CSS باستخدام مكتبة JavaScript less.js، عندما تقوم بتحميل هذه الملفات أو تحريرها أو حفظها.
الإصدارات المدعومة:
تختلف طريقة معالجة Dreamweaver لمعالجات CSS الأولية سواءٌ ما إذا كنت قد قمت بتحديد موقع أم لا. إذا قمت بتعريف موقع، يمكنك إعداد تفضيلات معالج CSS المسبق، واستخدام أطر عمل Compass وBourbon من داخل Dreamweaver.
وعند تحديد موقع، يمكنك تخصيصه بنفس طريقة عمل معالجات CSS الأولية داخل Dreamweaver من خلال إعداد تفضيلات معالجات CSS الأولية الخاصة بالمواقع. يتيح تعيين تفضيلات معالجات CSS الأولية الخاصة بالمواقع لك تحديد خيارات التحويل البرمجي على أساس الموقع. يمكنك أيضًا تخصيص موقع ملفات Sass وCSS، وخيارات المعالج المسبق الخاصة بكل موقع.
تابع القراءة لتعرف كيفية استخدام Dreamweaver مع معالجات CSS المسبقة:
في Dreamweaver 2017، تم تضمين دعم معالجات CSS الأولية في Dreamweaver. أي أنه يمكنك العمل على ملفات Sass/LESS/SCSS داخل Dreamweaver. يتيح لك النقر فوق Ctrl+S or Cmd+S فقط التحويل البرمجي التلقائي للغة CSS في Dreamweaver. يمكنك أيضًا تحويل ملفات CSS برمجيًا يدويًا باستخدام Tools > Compile (أو F9). تنعكس التغييرات أيضًا في جميع ملفات HTML المفتوحة حيث يتم ربط أو إرفاق ملف CSS المجمع هذا.
فيما يلي سير عمل عالي المستوى للمهام المطلوبة عند استخدام معالجات CSS المسبقة:
قم بتثبيت برنامج التحويل البرمجي فقط إذا كنت تريد نسخة من ملفات إطار العمل (Bourbon)، أو إذا كنت تريد إنشاء ملفات scss الافتراضية وملفات التكوين المستندة إلى Ruby (Compass). يوصى بالاحتفاظ بنسخة من ملفات إطار العمل. إذا تمت إزالة مزائج أو وظائف معينة من إطار عمل التأليف في المراجعات اللاحقة، لا يزال بإمكانك الوصول إلى ملفات المعالج المسبق داخل موقعك.
في Dreamweaver 2015 والإصدارات السابقة من CC، يمكنك استخدام ملفات Sass وLESS و SCSS مع Dreamweaver. ومع ذلك، كان عليك تجميع هذه الملفات بنفسك خارج تطبيق Dreamweaver.
سيشبه سير عملك الخطوات التالية:
يجب أن تؤدي هذه الخطوات في كل مرة تقوم فيها بإجراء تغيير في ملف Sass/LESS/SCSS الخاص بك.
شاهد هذا الدرس التعليمي بالفيديو لتتعلم كيف يمكنك تحسين CSS باستخدام المعالجات المسبقة.
وإذا لم يكن لديك موقع محدد، فيمكنك اختيار تحويل ملفات Sass وLESS برمجيًا يدويًا. لكن الدعم لإطاري عمل Compass وBourbon frameworks غير مدعوم.
إليك سير العمل عالي المستوى للمهام المتضمنة عند استخدام معالجات CSS المسبقة:
يمكنك تعيين تفضيلات خاصة بالموقع لمعالجات CSS المسبقة باستخدام مربع الحوار المواقع > إدارة المواقع.
يتيح الحفاظ على تفضيلات معالجات CSS الأولية الخاصة بالمواقع لك إدارة معالجات CSS الأولية على أساس الموقع. يمنحك هذا الإجراء أيضاً التحكم في معالج CSS المسبق لكل موقع، دون الحاجة إلى تحديث التفضيلات في كل مرة تبدل فيها المواقع.
الإعدادات في القسمين الفرعيين عام، والمصدر والإخراج قابلة للتطبيق على إطار عمل Ruby-Saas بشكل افتراضي.
لتعيين التفضيلات لـ Compass، يجب أن تحدد مربع الاختيار استخدام Compass في قسم Compass.
يمكنك تعيين تفضيلات معالجات CSS الأولية العامة التالية في مربع حوار Sites > Manage Sites > CSS Preprocessors. بشكل افتراضي، هذه الإعدادات قابلة للتطبيق على إطار عمل Saas.
Enable Auto Compilation on File Save
حدد هذا الخيار لتمكين التحويل البرمجي لمعالجات CSS الأولية تلقائيًا. إذا قمت بتحديد هذا الخيار، سيقوم Dreamweaver تلقائيًا بإنشاء ملف CSS عندما تقوم بحفظ ملف Sass أو LESS أو SCSS لديك. إذا تُرك هذا الخيار غير محدد، سيكون عليك تجميع الملفات يدوياً في كل مرة تقوم فيها بإجراء تغيير.
Enable Strict Math
قم بمعالجة هذه العمليات الحسابية في أقواس فقط. فعلى سبيل المثال، تتم معالجة (100 بكسل/25 بكسل) بنجاح بينما لم تتم معالجة 20% + 10% (دون أقواس). عندما يكون هذا الخيار معطلاً، يتم معالجة كل العمليات الحسابية في الملف.
Enable Strict Units
وبدون هذا الخيار، يحاول LESS التخمين في وحدة الإخراج عندما تقوم بالحسابات الرياضية. على سبيل المثال:
.class {
property: 1px * 2px;
}
في هذه الحالة، يعطي الطول مضروبًا في الطول منطقة، لكن CSS لا يدعم تحديد المنطقة. يفترض Dreamweaver أن المستخدم قصد أن تكون إحدى القيم قيمة وليس وحدة طول.
مع تشغيل الوحدات الصارمة، يفترض Dreamweaver أنه خطأ في الحساب، ويعرض رسالة خطأ.
Rewrite URLs as Relative URLs
يتيح لك هذا الخيار إعادة كتابة عناوين URL في ملف CSS الذي يتم إنشاؤه بحيث تكون عناوين URL دائماً نسبية للملف المُنشأ.
Generate Source map
لإنشاء المخطط المصدر. خريطة المصدر هي ملف يسد الفجوة بين اللغات عالية المستوى مثل Sass وLESS، واللغة منخفضة المستوى التي يتم تجميعها إليها، مثل CSS.
Output File Style
يحدد نمط ملف إخراج CSS:
Create Source Comments
ينشئ تعليقات في ملف CSS الناتج تربط كود CSS بالسطر الذي تم إنشاؤه منه.
Generate Source map
ينشئ خريطة مصدر (ملف يربط بين اللغات عالية المستوى مثل Sass وLESS، واللغة منخفضة المستوى التي يتم ترجمتها إليها، مثل CSS).
يمكنك تحديد مكان وضع ملفات CSS المُنشأة، والمسار الذي يجب على Dreamweaver مراقبته وتشغيل الترجمة التلقائية عند تعديل ملف Sass/LESS في المسار باستخدام محرر خارجي.
تنطبق الخيارات الموجودة في قسم Source & Output بشكل افتراضي على Saas. لتمكين هذه الخيارات لـ Compass، يجب تحديد مربع الاختيار استخدم Compass في قسم Compass.
وبعد تعديل هذه الإعدادات وتثبيت Compass، يتم ترحيل جميع الإعدادات إلى config.rb. في وقت لاحق، إذا كنت تريد تعديل أي إعدادات، قم بتحرير الإعدادات مباشرة في ملف config.rb. كما أن التغييرات التي تُجرى في مربع حوار إعدادات الموقع لا تؤثر على التجميع.
يمكنك ضبط إعدادات معالج CSS التالية للمصدر والإخراج في مربع حوار المواقع > إدارة المواقع.
حدد موقع ملف إخراج CSS الذي يتم إنشاؤه.
In the same folder as source
حدد هذا الخيار إذا كنت تريد حفظ ملفات CSS المُنشأة في نفس المجلد مع ملفات Sass وLESS المصدر.
Define output folder
حدد هذا الخيار وحدد مجلداً تريد حفظ ملفات CSS المُنشأة فيه.
Replace segment of input path
يتيح لك هذا الخيار استبدال جزء من المسار باستخدام سلاسل From وTo. على سبيل المثال، عند ضبط من: scss وإلى: css، يتم وضع ملف الإخراج داخل نفس بنية الشجرة بعد استبدال SCSS في مسار css.
Source Folder
حدد المجلد الفرعي داخل جذر الموقع الذي يحتاج إلى مشاهدته. عادةً، يحتوي هذا المجلد الفرعي على جميع ملفات SCSS أو LESS الخاصة بك.
إذا قمت بتمكين Compilation في General settings، سيقوم Dreamweaver تلقائي بتشغيل معالج CSS الأولي. يشغل Dreamweaver الترجمة التلقائية عند تعديل أي ملف داخل المجلد خارجياً، أو من داخل Dreamweaver.
Compass هو إطار عمل مفتوح المصدر لتأليف CSS يتيح لك إنشاء أوراق أنماط CSS3 باستخدام Sass.
يوفر Dreamweaver الدعم إلى Compass. إذا كنت تنشئ أوراق أنماط باستخدام Compass، يمكنك ترجمة أوراق الأنماط هذه وإنشاء ملفات CSS من داخل Dreamweaver.
استخدم ملفات Compass.
إذا لم يكن لديك Compass مثبت بالفعل، يمكنك تثبيته من داخل Dreamweaver.
في مربع حوار Site Setup، حدد CSS Preprocessors > Compass. حدد Use Compass ثم انقر تثبيت الملفات.
يتم تثبيت جميع ملفات Compass وملف التكوين *.rb داخل مجلد موقعك، ويمكنك رؤيتها في لوحة الملفات.
تحديد ملف تكوين حالي مستند إلى Ruby
إذا كان لديك Compass مثبت بالفعل في حاسوبك، ولديك ملف Compass *.rb معد، في مربع حوار إعداد موقع Dreamweaver، حدد المسار إلى ملف Compass *.rb داخل جذر الموقع الحالي.
يجب أن يقع هذا الملف في مجلد جذر موقعك.
تحديد خيارات التكوين يدويًا
إذا لم يكن لديك خيار تكوين موجود، يمكنك تحديد التكوينات يدوياً.
يتم ملء الحقول التالية تلقائياً، ولكن يمكنك تغييرها وفقاً لمتطلباتك:
يجب أن تكون جميع المسارات المحددة في هذه الخيارات ضمن جذر الموقع.
HTTP Path
المسار إلى المشروع عند التشغيل داخل خادم الويب. القيمة الافتراضية هي "/".
Images Directory
الدليل الذي يتم فيه الإبقاء على الصور. الدليل نسبي بالنسبة إلى project_path.
Generated Images Directory
الدليل الذي يتم فيه الإبقاء على الصور التي تم إنشاؤها. هذا الدليل نسبي إلى project_path، ويكون افتراضياً مساوياً لقيمة images_dir.
Fonts Directory
الدليل حيث يتم الاحتفاظ بملفات الخطوط.
Relative Assets
يشير إلى ما إذا كانت وظائف المساعد في compass يجب أن تُنشئ عناوين URL نسبية من CSS المُنشأ إلى الأصول، أم عناوين URL مطلقة باستخدام مسار http لنوع ذلك الأصل.
إذا حددت Enable Auto Compilation on File Save، في مربع الحوار Sites > Manage Sites > CSS Preprocessors، فإن Adobe Dreamweaver ينشئ ملف CSS في كل مرة تحفظ فيها تغييرات على ملفات Sass الخاصة بك.
يمكنك أيضًا معاينة هذه التغييرات في الوقت الحقيقي في نافذة المستعرض لديك. لمزيد من المعلومات حول معاينة تغييراتك في الوقت الفعلي في المتصفح، راجع Real-time preview.
إذا كنت لا تريد التجميع التلقائي، يمكنك تجميع ملف CSS يدوياً بإجراء أحد الأمور التالية:
يمكنك عندئذ إرفاق ملف CSS الذي تم تحويله برمجيًا بملفات HTML في موقعك. لمزيد من المعلومات، راجع Link to an external CSS style sheet.
يقوم Dreamweaver بدعم مجموعة منتجات Bourbon. إذا قمت بإنشاء أوراق الأنماط باستخدام Bourbon، يمكنك تجميع أوراق الأنماط هذه وإنشاء ملفات CSS من داخل Adobe Dreamweaver.
أنواع Bourbon التالية مدعومة:
يمكنك استيراد إطار عمل Bourbon عن طريق إضافة أحد العناصر التالية في الكود الخاص بك:
يستخدم Dreamweaver بعد ذلك الإصدار المُعد مسبقًا من Bourbon أثناء تجميع ملفات المعالج المسبق.
في المقابل يمكنك تثبيت ملفات إطار عمل Bourbon لموقعك كي لا تؤثر التحديثات الإضافية لـ Dreamweaver على عمليات سير عمل التحويل البرمجي الخاصة بك. يتم نسخ ملفات إطار عمل Bourbon إلى موقعك. Bourbon هو إطار العمل الذي يتم استخدامه عند تشغيل التجميع لأي من الملفات التي تستورد إطار العمل.
لتثبيت Bourbon أو أي من إصداراته:
في مربع حوار Site Setup، حدد CSS Preprocessors > Bourbon، Bourbon Neat، أو Bourbon Bitters.
انقر فوق Install Files لتثبيت الملفات في موقع مجلد جذر الموقع المحدد داخل موقعك.
يتم تثبيت جميع ملفات Bourbon داخل مجلد موقعك، ويمكنك رؤيتها في لوحة Files.
في حالة حدوث فشل، يتم عرض الأخطاء في اللوحة Output (Window > Results > Output)، ويتغير رمز شريط الحالة إلى اللون الأحمر.
يمكنك تجميع ملفات معالج CSS المسبق بإحدى الطرق التالية:
يمكنك إعداد الخيارات داخل Dreamweaver لتحويل التغييرات التي تتم في ملف Sass أو LESS برمجيًا في CSS المكافئ له. يمكنك أيضًا تحديد المواقع (داخل جذر الموقع) حيث تريد حفظ CSS المُنشأ.
في مربع حوار Site Setup، حدد CSS Preprocessors > General > Enable Auto Compilation on File Save.
انقر فوق CSS Preprocessors > Source & Output.
حدد المواقع التي تريد حفظ ملفات CSS التي قمت بإنشائها بها. يمكنك اختيار أحد الخيارات التالية:
In the same folder as source
حدد هذا الخيار إذا كنت تريد حفظ ملفات CSS المُنشأة في نفس المجلد كملفات Sass وLESS المصدر.
Define output folder
حدد هذا الخيار وحدد المجلد الذي تريد حفظ ملفات CSS المُنشأة فيه.
Replace segment of input path
يتيح لك هذا الخيار استبدال جزء من المسار باستخدام سلاسل From وTo.
حدد المجلد الذي يحتوي على ملفات Sass أو LESS التي يتتبعها Dreamweaver.
إذا قمت بإجراء تغييرات على أي من الملفات داخل المجلد الذي يتم تتبعه، فإن Dreamweaver يجمع الملفات تلقائيًا بعد حفظها.
يراقب Dreamweaver ويجمع هذه الملفات حتى لو قمت بإجراء تغييرات خارج Dreamweaver (باستخدام محرر نصوص، على سبيل المثال).
بعد التجميع الناجح، يتم عرض رسالة في اللوحة Output (Window > Results > Output).يتم عرض رمز الحالة في شريط الحالة باللون الأخضر.لفتح CSS المُجمَّع، انقر نقرًا مزدوجًا فوق رسالة النجاح في اللوحة.
إذا تم العثور على أية أخطاء، فهذا يعني أنه لم يتم تحويل CSS برمجيًا بنجاح. يتم عرض رمز الحالة باللون الأحمر وتقوم لوحة Output بإدراج جميع الأخطاء والتحذيرات. يمكنك النقر بشكل مزدوج فوق رسالة خطأ في اللوحة للانتقال السريع إلى السطر الذي يحتوي على أخطاء في التعليمة البرمجية. لا يتم تجميع ملف CSS بنجاح حتى يتم حل جميع الأخطاء.
يتم إرساء Output في أسفل مساحة العمل. إذا كانت اللوحة مغلقة، انقر فوق Window > لوحة Output.
يمكنك أيضًا تبديل لوحة Output (إظهار/إخفاء) باستخدام أيقونة الحالة، عندما تكون الحالة حمراء.
بعد الحصول على ملف CSS المجمع، يمكنك ربط صفحة الويب بورقة الأنماط. عند إجراء أي تغييرات على معالجات CSS، يتم تحديث ملفات CSS المجمعة المتوافقة تلقائيًا. تتم أيضًا عملية التحديث التلقائي لصفحة الويب في Live View.
لمزيد من المعلومات حول ربط صفحة الويب الخاصة بك بورقة الأنماط، راجع Link to an external CSS style sheet.
في بعض الحالات (مثل إذا لم تكن قد حددت موقع Dreamweaver)، قد ترغب في تجميع ملف معالج CSS يدويًا.
في مثل هذه السيناريوهات، قم بتعطيل Enable Auto Compilation on File Save في لوحة CSS Preprocessors > General في مربع حوار Site Setup.
لتجميع معالج CSS يدويًا، انقر بزر الماوس الأيمن فوق الملف في لوحة Files، وانقر فوق Compile.
يمكنك أيضًا النقر فوق Tools > Compile لتجميع الملف الحالي.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.