قم بتثبيت Stylus في ArchLinux دون أن يموت في المحاولة

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

مرقم

أنا لا أتظاهر بتعليم كيف يعمل مرقملكن تظهر بعض الأمثلة وطريقة التثبيت

هذه ورقة أنماط كما نعرفها:

النص الأساسي {الخط: 12px Helvetica، Arial، sans-serif؛ } a.button {-webkit-border-radius: 5px ؛ - دائرة نصف قطرها: 5 بكسل ؛ نصف قطر الحدود: 5 بكسل ؛ }

وستكون هذه هي نفس ورقة الأنماط التي تم إنشاؤها باستخدام القلم:

خط النص 12 بكسل Helvetica، Arial، sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px

أين هي مفاتيح؟ أين الفاصلة المنقوطة ، القولون؟ نسي، مرقم يفعل ذلك لنا.

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

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

تركيب

إلى مرقم العمل لدينا لتثبيته نود.جي إس الموجود في فرع المجتمع ، لذلك نبدأ في القيام بذلك:

$ sudo pacman -S nodejs

وبعد ذلك نقوم بتثبيت Stylus. الطريقة التقليدية ستكون:

$ npm install -g stylus

يتم تثبيته بشكل جيد ، لكنه لا يعمل بالنسبة لي ، لذلك من الأسهل تثبيته من AUR:

$ yaourt -S nodejs-stylus

كيفية استخدام قلم الشاشة

حسنًا ، لقد قمنا بالفعل بالتثبيت نود.جي إس وقمنا بتثبيت مرقم.. كيف نستخدمها؟ إنه بسيط. لنفترض أن لدينا دليلًا بالملفات التالية:

- dir - index.html - style.css

ما يتعين علينا القيام به هو إنشاء الملف النمط، وهو ما سنعمل عليه. في هذا الملف يمكن أن يكون لدينا شيء مثل:

body-background-color #ffff font-size 12px a. زر اللون الأحمر ، الحشو 10px

إذا قمنا بحفظ أو إجراء أي تغييرات ، فلن يحدث شيء ، لأننا لا "نجمع" ملفنا. لتجميعها ، ما نقوم به هو فتح Terminal في دليلنا (حيث الملف النمط) وتنفيذ:

stylus -c style.styl

لكن في كل مرة نقوم بحفظ الملف النمط سيتعين علينا تنفيذ الكود ، لكن لحسن الحظ هذا ليس ضروريًا ، لأننا إذا نفذنا نفس الأمر ، ولكن أضفنا المعامل -w (شاهد) يحدث ما يلي:

stylus -c -w style.styl يراقب /usr/lib/node_modules/stylus/lib/functions/index.styl style.css المترجم يشاهد style.styl compiled style.css style.css

بمعنى آخر ، يتم تجميع الملف تلقائيًا .. هل تكون النتيجة؟

body {background-color: #fff؛ font-size: 12px} a.button {color: # f00؛ padding: 10px}

كما ترى ، لا يقوم الكود الخاص بنا بإنشائنا فقط CSS، لكنه يلغي المساحات غير الضرورية بحيث تزن ورقة الأنماط أقل

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


5 تعليقات ، اترك لك

اترك تعليقك

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها ب *

*

*

  1. المسؤول عن البيانات: ميغيل أنخيل جاتون
  2. الغرض من البيانات: التحكم في الرسائل الاقتحامية ، وإدارة التعليقات.
  3. الشرعية: موافقتك
  4. توصيل البيانات: لن يتم إرسال البيانات إلى أطراف ثالثة إلا بموجب التزام قانوني.
  5. تخزين البيانات: قاعدة البيانات التي تستضيفها شركة Occentus Networks (الاتحاد الأوروبي)
  6. الحقوق: يمكنك في أي وقت تقييد معلوماتك واستعادتها وحذفها.

  1.   السايبراليجو 17 قال

    إنه مع:

    $ sudo npm install -g stylus

    1.    إيلاف قال

      لكن لماذا؟ إذا أردت فقط استخدامه في جلستي .. ولكن حسنًا إذا كانت المشكلة هي .. 🙂

      1.    نانو قال

        في البداية يكون الأمر جيدًا ، ولكن يتم استخدام Stylus مع مكونات إضافية مختلفة أثناء تقدمك ، على سبيل المثال Nib أو Stylus auto prefixer.

        أعتقد أنه عند تثبيته مع Yaourt ، لا يتم حفظه في / usr / local / lib / node_modules وإذا حاولت استيراد واستخدام أي من المكتبات ، فستفشل xD

        يحدث أنه كما أخبرتك في المنتدى ، يعتمد Stylus على استخدام المكتبات بشفافية من الجهاز ، إنه جوهر هذا المعالج المسبق ، فهو يفعل أشياء مثل:

        القلم -u jeet -u rupture -u مطبعي -u nib -w style.styl

        لقول شيء ما (يمكنك الحصول على اسم مستعار أو وظيفة أو استخدام gulp أو grunt أو أي شيء آخر: 3). الشيء المثير للاهتمام في هذا هو أنه لا ينقش css خارج الصندوق عند التجميع ، ولكنه يملأه "ديناميكيًا" كما هو الحال في التعليمات البرمجية الخاصة بك ، فأنت تستدعي وظائف ومزيجات المكتبات المعنية.

        في الواقع ، سيضع رمزًا ثابتًا تم الإعلان عنه (إعادة تعيين ، إصلاحات واضحة ، إلخ) ولكنه لن يجعلك تدخن على سبيل المثال وظائف span () لـ jeet إذا لم تتصل بها وهذا هو الحب الخالص x3

        إنه عالم كامل وهذا هو سبب إخبارك ، بتثبيته بهذه الطريقة ، لا أعرف ما هي الملفات التي تقع فيه ولا أعتقد أنه يمكنك استخدام الامتدادات ببساطة لأنه عند استخدام سطر الأوامر ، ستظهر علامة –use داخل مجلد تثبيت القلم ، مع العقدة هو node_modules ويبقى حيث قلت أعلاه ، مع Yaourt ، NPI xD

  2.   دعنا نستخدم لينكس قال

    مثير للإعجاب!

  3.   المستخدم قال

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