55+ أدوات CSS: المعالجات المسبقة والإضافات والمحررين ومولدات التدرج

نشرت: 2016-12-30

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

المزيد من المقالات من سلسلة أدوات تطوير الموضوع

  • الصفحة الرئيسية لسلسلة أدوات تطوير ووردبريس
  • قم بتنزيل 15 كتابًا مجانيًا لإتقان HTML و CSS و JavaScript و jQuery و Bootstrap و WordPress
  • قائمة نهائية تضم 30+ من أفضل برامج Chrome و Firefox والبرامج التعليمية والأدوات لمطوري الويب
  • 38 دورة فيديو مجانية لتعلم HTML و CSS و PHP و jQuery و JavaScript و Git والمزيد

في هذه المقالة ، سنشارك أفضل أدوات CSS لمطوري WordPress المبتدئين والمتقدمين. إذا كنت مبتدئًا تمامًا ولا تعرف أي شيء عن HTML أو CSS ، فيمكنك تنزيل 38 دورة تدريبية مجانية و 15 كتابًا إلكترونيًا مجانيًا لتعلم HTML و CSS ولغات البرمجة الأخرى من البداية.

12 من أدوات CSS: معالجات CSS الأولية والتطبيقات والوظائف الإضافية

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

  2. تدعي SASS أنها لغة امتداد CSS الاحترافية الأكثر نضجًا واستقرارًا وقوة في العالم. يبلغ عمر SASS ما يقرب من عقد من الزمان وهناك عدد لا حصر له من الأطر التي تم إنشاؤها باستخدام Sass بما في ذلك Compass و Bourbon و Susy على سبيل المثال لا الحصر.

  3. Stylus هو معالجات CSS الأولية ، والتي تعمل على توسيع وظائف CSS العادية. يوفر وظائف منطقية قوية ، والقدرة على التشغيل عبر Node.js / JavaScript ، (بدون Ruby) ، والقدرة على التشغيل كجزء من إعداد Node.js ، والتنظيف والحد الأدنى من البنية المرن.

  4. CodeKit (32 دولارًا) هو تطبيق قوي وشائع جدًا لمستخدمي MAC. يمكن لـ CodeKit تجميع Less و Sass و Stylus و CoffeeScript و Typescript و Jade و Haml و Slim و Markdown و Javascript. قدم متصفحات التحديث التلقائي ومع Bower المضمّن ، يمكنك تثبيت أكثر من 6000 عنصر بنقرة واحدة بما في ذلك Bootstrap و jQuery و Modernizr و Zurb Foundation وحتى WordPress.

  5. PrePros (29 دولارًا) : Prepros هي أداة متميزة لتجميع LESS و Sass و Compass و Stylus و Jade وغير ذلك الكثير باستخدام بادئة CSS التلقائية ، وهي تأتي مع خادم مدمج للاختبار عبر المستعرضات. إنه متاح لأنظمة Windows و Mac OS X و Linux. إنه يوفر بادئة CSS تلقائية ، وتحديث تلقائي للمستعرض ، وتصغير الملفات ، وتحسين الصور ، وخادم مدمج ، والعديد من الميزات الأخرى.

  6. Emmet : مكون إضافي مجاني لمحرري الأكواد المختلفة لكتابة التعليمات البرمجية بسرعة وسهولة. تمت كتابة Emmet بلغة JavaScript خالصة ويعمل عبر منصات مختلفة: متصفح الويب و Node.js و Microsoft WSH و Mozilla Rhino.

  7. Fire.App : أداة تشبه CodeKit ، لنظام التشغيل Windows ، هي fire.app (تعمل أيضًا على Linux و Mac). هل تحب Sass / Compass ولكن تكره واجهة سطر الأوامر؟ يحتوي Fire.app على دعم Sass / Compass من الدرجة الأولى تمامًا مثل تطبيق Compass الخاص بنا. لا مزيد من بادئات CSS الخاصة بالمورد وصياغة صور الرموز المتحركة يدويًا !. يعمل Fire.app على أنظمة تشغيل Mac و Linux و Windows. عملية التثبيت سهلة مثل النقر والسحب.

  8. Snippets هو برنامج مجاني لإدارة التعليمات البرمجية الخاصة بك. يساعدك على تنظيم وإعادة استخدام مقتطفات التعليمات البرمجية في مشاريع مختلفة ، ومشاركة المقتطفات علنًا ومع فريقك. هذا متاح لنظامي التشغيل Mac و Windows.

  9. تطبيق Koala هو تطبيق واجهة المستخدم الرسومية لتجميع Less و Sass و Compass و CoffeeScript لمساعدة مطوري الويب على استخدامها بكفاءة أكبر. يمكن تشغيل Koala على windows و Linux و Mac.

  10. يتم تطبيق تعديلات LiveReload CSS وتغييرات الصور مباشرةً. كوفي سكريبت و SASS و LESS وغيرها تعمل فقط. يراقب LiveReload التغييرات في نظام الملفات. بمجرد حفظ الملف ، تتم معالجته مسبقًا حسب الحاجة ، ويتم تحديث المتصفح.

  11. تطبيق Scout هو تطبيق متعدد الأنظمة الأساسية يوفر قوة Sass & Compass في أيدي مصممي الويب. يساعد Scout في جعل سير عمل CSS الخاص بك سريعًا من خلال توفير المزيد من التحكم والتحسين والتنظيم.

  12. يتيح لك Crunch 2 Crunch كتابة Less و Sass و CoffeeScript و Markdown * ، ثم يقوم تلقائيًا بحفظ CSS و JavaScript و HTML بعد إجراء التغييرات. تريد أن تكتب فقط CSS عادي؟ XML؟ هاسكل؟ MUSHCode؟ يتيح لك Crunch القيام بذلك أيضًا. Crunch 2 هو محرر يتيح لك القيام بما تريد. لأن كرانش تحبك.

10 WordPress Custom CSS Plugins

إذا كنت ترغب في تخصيص CSS في WordPress ، فيمكنك استخدام العديد من المكونات الإضافية المجانية أو ميزات تحرير CSS المضمنة المتوفرة ضمن أداة التخصيص منذ WordPress 4.7. لقد قمنا برعاية قائمة مكونة من 10 إضافات مجانية لـ CSS ، مما يساعدك على تعديل CSS المخصص وحفظه بسهولة.

يمكنك أيضًا قراءة هذا البرنامج التعليمي لمعرفة كيفية تحرير CSS في WordPress Theme باستخدام Chrome Developer Tools وكيفية استخدام سهم dd في قوائم WordPress باستخدام CSS دون استخدام jQuery أو PHP.

15 مولدات التدرج CSS

  1. محرر Colorzilla التدرج
  2. محرر التدرج cssmatic
  3. مولد الانجريتولز التدرج
  4. gradientgenerator.com/
  5. css3generator.com/
  6. مولد التدرج cssportal
  7. uigradients.com: جاهز لاستخدام تدرجات لونية جميلة
  8. التدرجات الخطية css3factory
  9. مولد التدرج اللوني
  10. التدرج perbang RGB
  11. مولد التدرج paintbycode
  12. مولد التدرج الموهوب
  13. Westciv شعاعي التدرجات
  14. التدرجات الخطية westciv
  15. مولد التدرج CSS3

10 محررات CSS مجانية على الإنترنت

  1. محرر CSS عبر الإنترنت بواسطة CSS Portal
  2. معامل CSSdeck
  3. ScratchPad Realtime HTML و CSS Editor
  4. مولد أكواد CSS3 عبر الإنترنت من EnjoyCSS
  5. cssdesk
  6. jsfiddle: اختبر JavaScript أو CSS أو HTML أو CoffeeScript عبر الإنترنت
  7. محرر CSSmate
  8. تجميل CSS وتصغيره
  9. liveweave HTML5 و CSS3 وملعب جافا سكريبت
  10. SelfCSS - محرر WYSIWYG CSS

10 Chrome Extenstion لتعديل CSS

  1. CSSViewer
  2. Stylebot
  3. المستخدم CSS
  4. محرر CSS المباشر
  5. أدوات التطوير الحفظ التلقائي
  6. حفظ CSS
  7. اختبار تصميم الويب سريع الاستجابة
  8. مفتش مستجيب
  9. Viewport Resizer
  10. تغيير حجم علامة التبويب - تخطيطات الشاشة المنقسمة

الكلمات الأخيرة

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

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

ملاحظة : تم نشر هذه المقالة في الأصل على موقع createwptheme.com ، وقد أعدنا نشرها هنا بعد الحصول على إذن.