كيفية استخدام قوالب Sass مع WordPress

إذا كنت مطور WordPress ، فمن المحتمل أنك تستخدم CSS لتصميم موقع الويب الخاص بك. ولكن ماذا لو كان بإمكانك استخدام معالج CSS مسبق أكثر قوة مثل Sass؟ في هذه المقالة ، سنوضح لك كيفية استخدام Sass مع قوالب WordPress. Sass هو معالج مسبق قوي لـ CSS يسمح لك بكتابة كود CSS أكثر إيجازًا وقابلية للصيانة. من السهل أيضًا استخدامه مع قوالب WordPress. أولاً ، سنوضح لك كيفية تثبيت معالج Sass المسبق على جهاز الكمبيوتر الخاص بك. بعد ذلك ، سنتعرف على كيفية استخدام Sass مع قوالب WordPress. سنعرض لك أيضًا بعض النصائح والحيل لاستخدام Sass مع WordPress.

كيفية استخدام Sass With WordPress هو دليل تفصيلي يوضح كيفية استخدام هذا البرنامج المساعد. خلال السنوات القليلة الماضية ، كنت أكتب في CSS أثناء تطوير مواقع الويب. الغرض من هذه المقالة هو عدم تعليمك كيفية استخدام Sass ، ولا شرح سبب قوتها. بمعنى آخر ، سأوضح لك كيفية استخدامه مع WordPress. إذا قمت بإلغاء الأرشفة عن ملف .zip ، فأعد تسميته ووضعه في مجلد htdocs داخل MAMP. في هذا البرنامج التعليمي ، سنستخدم اسم قاعدة البيانات الخاصة بنا كجذر بدلاً من اسم المستخدم وكلمة المرور لأننا نستخدم MAMP لإنشاء كلمة المرور. سيتم أيضًا استخدام Compass ، وهو إطار عمل تأليف CSS مفتوح المصدر ، في هذه الفئة لأنه يسمح لك بإضافة مجموعة متنوعة من الميزات السريعة والمفيدة إلى Sass.

ما عليك سوى إدخال الأسطر القليلة من التعليمات البرمجية أدناه في أداة سطر الأوامر لتثبيت Sass and Compass. باستخدام السمة 24 ، سنوضح لك كيفية القيام بهذا البرنامج التعليمي. لجعل Sass يرى أي تحديثات ، سنحتاج إلى إضافة أمر آخر إلى محرر سطر الأوامر الخاص بنا. سنستخدم الخلفيات Sass و Compass لإنشاء سمة WordPress الخاصة بنا. لنبدأ بفتح النمط الافتراضي. انسخ الكتلة المعلقة فوق ملف CSS في النسق 24 ، ثم الصقها في ملف css في الشريط العلوي. إذا كان هذا التعليق مجرد جملة ، فسأضيفه إلى الجزء العلوي من أسلوبنا.

يمكن العثور عليها في مجلدنا ، Sass. إذا كنت تريد تغيير مسار سطر الأوامر لمشروعك ، فاحتفظ به في مجلد مشروع العمل. ثم ، باستخدام سطر الأوامر أدناه ، قم بتغيير النمط أو الملف الذي تريد إجراءه أو تغييره. أود أن أشكرك على تثبيت سمة WordPress التي تتضمن سير عمل Sass . بالنسبة لمستخدمي Sass أو Less ، هناك العديد من التطبيقات الشائعة وتشغيل المهام. عند استخدامها ، يمكنك إما إسقاط مشروعك مباشرة في مشروعك ، أو يمكنك إعداده في أي وقت من الأوقات وإكمال عدد كبير من المهام في مشروعك في وقت واحد. عندما نبرمج شيئًا ما يكسر أو يقدم رمزًا جديدًا في إصدار ، فإن Git هي أداة قوية لتتبع عملنا. يتم إنشاء بعض المجلدات والملفات الجديدة بواسطة Sass دون الحاجة إلى تحديث Git. مجلد sass-cache أو مجلد sass-cache ، على سبيل المثال ، غير مخصص للاستخدام على خادم مباشر بمجرد إنشائه.

يعد CSS في Sass for WordPress أكثر قوة لأنه يسمح للمطورين باستخدام مجموعة متنوعة من الميزات المفيدة مثل المتغيرات والقواعد المتداخلة والمزج والوحدات النمطية والأجزاء والوراثة الممتدة والمشغل. سيتم تجميع الكود وسيتمكن المتصفح من قراءته في النهاية.

عند تثبيت Sass ، يمكنك استخدام الأمر sash لترجمة Sass إلى CSS. من الأهمية بمكان أن تحدد الملف الذي سيتم الإنشاء منه والموقع الذي يجب إنشاء CSS منه. إذا قمت بتشغيل sass input.scss output.js من جهازك الطرفي ، على سبيل المثال ، فستحتاج إلى ملف Sass واحد و input.scss وملف output.js واحد.

كيف يمكنني استيراد Sass إلى WordPress؟

لاستيراد Sass إلى WordPress ، ستحتاج أولاً إلى تثبيت المكون الإضافي WP- Sass . بمجرد التثبيت ، يمكنك تنشيط المكون الإضافي من خلال الانتقال إلى لوحة إدارة WordPress الخاصة بك والانتقال إلى صفحة "المكونات الإضافية". من هنا ، يمكنك النقر فوق الارتباط "تنشيط" الخاص بالملحق الإضافي WP- Sass. بعد التنشيط ، يمكنك البدء في استخدام Sass في قالب WordPress الخاص بك عن طريق إضافة السطر التالي من التعليمات البرمجية إلى ورقة أنماط القالب الخاص بك:import “sass / style.scss”؛

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

يمكن استخدام البوصلة بدلاً من Sass من أجل تحسين طريقة الترجمة لدينا. عند إضافة المعلمة –watch ، سيقوم Sass بتجميع ملف shtml عندما يكتشف تغييرًا فيه. النمط. يمكن عرض ملف CSS في قائمة النمط. لاستيراد الأنماط الأكثر شيوعًا ، تأكد من استيراد الأنماط الأوسع أولاً. يمكنك فرز الأجزاء الخاصة بك حسب المجلد إذا كنت تفضل ذلك.

كيفية استخدام Sass لملحقات WordPress

لتثبيت SASS ، يجب عليك أولاً تشغيل الأمر التالي في جهازك الطرفي. قم بتثبيت -g sass من مجلد npm install -g sass. بمجرد تثبيت الحزمة ، ستتمكن من تحويل ملفات SASS إلى ملفات CSS عن طريق تشغيل الأمر التالي: (* br). فيما يلي مثال لملف في SASSS. يمكن العثور على مزيد من المعلومات حول استخدام SASS على الموقع الإلكتروني التالي: ** br>. المكون الإضافي متاح من موقع ويب مطور WordPress.

ما هو الفرق بين Scss و Sass؟

هذه لغة برمجة نصية لما قبل المعالج ، تُستخدم لإنشاء أو تفسير CSS ، باستخدام SASS (أوراق أنماط رائعة نحويًا). تُستخدم SCSS ، وهي لغة برمجة نصية ، للبناء على بناء جملة CSS الحالي باستخدام SassScript ، وهي لغة برمجة نصية.

يمكن أن تكون CSS أكثر قوة مع دعم المتغير والرياضيات في Sass ، وهي لغة تدعمها. لا يوجد امتداد معياري خاص بـ CSS لهذا الامتداد. CSS و scss و scss و scss هي محللات بناء الجملة الأربعة في Sass. يتم تحويل هذه التعبيرات بعد ذلك إلى أشجار نحوية مجردة ، والتي تُستخدم بعد ذلك لإنشاء CSS. يمكن كتابة StyleSheets في صيغتين باستخدام Sass (أوراق Style Awesome Syntactically Awesome StyleSheets). بعض الناس يفضلون Sass ، بينما يفضل البعض الآخر SCSS. يجب أن نضع في اعتبارنا أن بناء جملة Sass ذي المسافة البادئة لم يتم إهماله.

وهو يختلف عن ملف a.shtml لأن ملف Sass عبارة عن ملف نصي عادي. Sass هو بناء الجملة الجديد. Sass ، وهي أوراق أسلوب رائعة نحويًا ، هي واحدة منها. CSS عبارة عن مجموعة من امتدادات CSS التي تضيف القوة والأناقة للغة. نظرًا لأنه يخرج CSS في النهاية ، يخفي Sass قيود CSS العادية بينما يعمل أيضًا كمترجم. السعادي هو قوس مجعد وفاصلة منقوطة بطريقة متداخلة ، وهو ما فضلت. SCSS هو الاسم الذي يطلق على بناء الجملة الأساسي ، والذي يدعمه المعالج المسبق لـ Sass CSS .

لفصل الإعلانات ، نستخدم ؛ في الكود أعلاه. من ناحية أخرى ، يجب أن يتبع رمز SASS أدناه سطرين مختلفين من المسافة البادئة ، ولا يوجد استخدام لملف. تمت إضافة SCSS ، بناء جملة SASS الرسمي ، إلى الإصدار 3. وأبرز اختلاف ملحوظ هو أن الحروف مكتوبة بأقواس بدلاً من الفواصل المنقوطة. على الرغم من أن SASS تدعم كلا الصيغتين ، يجب تصميم كل مشروع بشكل مختلف. أعطِ إما extension.sass أو extension.scss إذا كنت تريد أن تكون قادرًا على التمييز بين التنسيقات. SCSS (أوراق الأنماط الرائعة نحويًا) هي صيغة جديدة لـ Sass.

يعد SCSS أكثر منطقية وتعقيدًا من SASS من حيث كيفية وصفه للتشفير. SCSS هو الخيار الأفضل للمبتدئين في مجال البرمجيات. تعد المتغيرات من أهم ميزات Sass. امتداد CSS في Sass هو scss بدلاً من.

توفر معالجات CSS الأولية مثل SASS عددًا من المزايا مقارنة بـ CSS التقليدية. يمكنك إدارة أوراق الأنماط الخاصة بك بسهولة أكبر وتصميمها بسهولة أكبر باستخدام هذه الأدوات. علاوة على ذلك ، يمكن للمعالجات التمهيدية أن تجعل أوراق الأنماط الخاصة بك أسهل في الفهم من خلال تحسين قابليتها للقراءة وهيكلها.

كيفية استخدام Sass في قالب ووردبريس المخصص

Sass هو معالج مسبق قوي لـ CSS يسمح للمطورين بكتابة كود CSS أكثر ديناميكية وفعالية. في WordPress ، يمكن استخدام Sass في سمات مخصصة لتسريع عملية التطوير وجعل كود CSS أكثر قابلية للإدارة. لاستخدام Sass في قالب WordPress مخصص ، أنشئ أولاً دليل "sass" في الدليل الجذر للموضوع. بعد ذلك ، أنشئ ملف Sass رئيسي (مثل “style.scss”) في دليل sass واستورد أي ملفات Sass أخرى سيتم استخدامها في السمة. أخيرًا ، أضف رابطًا إلى ملف Sass الرئيسي في ملف header.php الخاص بالنسق. عند استخدام Sass في WordPress ، من المهم الحفاظ على كود CSS منظم جيدًا ويسهل صيانته. يمكن أن يساعد Sass في ذلك من خلال السماح للمطورين باستخدام المتغيرات والمزج والميزات الأخرى التي تجعل كود CSS أكثر إيجازًا وأسهل في القراءة.

يتم استخدام لغات المعالج المسبق لـ CSS مثل Sass أو LESS بشكل شائع من قبل المصممين ومطوري الواجهة الأمامية. يمكنك استخدام مجموعة متنوعة من الميزات في Sass غير المتوفرة في CSS ، مثل المتغيرات وعوامل الرياضيات الأساسية والتداخل والمزج. عندما تم إصدار الإصدار 3.8 من WordPress ، تقرر نقل أنماط منطقة إدارة WordPress إلى Sass. في Sass ، يمكنك استيراد ملفات متعددة إلى ورقة الأنماط الرئيسية الخاصة بك ثم إنشاء ملف CSS واحد لموضوعك. في دليل أوراق الأنماط ، يحدد Koala موقع ملف Sass ويعرضه تلقائيًا. لاختبار ذلك ، يجب عليك أولاً فتح ملف Sass الخاص بك. يمكن إضافة الكود إلى ملف scs عن طريق كتابته في المفكرة.

يعد إنشاء ملفات متداخلة أمرًا بسيطًا وبديهيًا باستخدام Sass ، والذي يمكن استخدامه لإنشائها وإدارتها. يمكن استخدام محددات المقالة ، على سبيل المثال ، لتداخل جميع العناصر الخاصة بقسم المقالة. كمصمم سمة ، ستقوم بإنشاء عناصر واجهة المستخدم وأنماط النشر وقوائم التنقل وتصميم الرأس وما إلى ذلك. يتمتع Nestin in Sass ببنية ممتازة ، ولن تحتاج إلى استخدام نفس الفئات والمحددات والمعرفات مرارًا وتكرارًا. هذا المزيج ، بالإضافة إلى إخفاء بعض النصوص من العرض ، يمكنه أيضًا تقليل مقدار الوقت الذي تقضيه في ذلك بشكل كبير. يرجى إعلامنا إذا كنت تستخدم لغة CSS مسبقة المعالجة مثل Sass لتطوير قالب WordPress الخاص بك.