مرقم هو رمز معالج مسبق 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 إلى تنسيقها والطريقة التي يمكننا بها استخدام تركيبها متنوعة للغاية. وهذه مجرد معاينة. لذلك أشجعك إذا كنت مهتمًا بمعرفة المزيد عنها مرقم
إنه مع:
$ sudo npm install -g stylus
لكن لماذا؟ إذا أردت فقط استخدامه في جلستي .. ولكن حسنًا إذا كانت المشكلة هي .. 🙂
في البداية يكون الأمر جيدًا ، ولكن يتم استخدام 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
مثير للإعجاب!
أقترح عليك إجراء برنامج تعليمي محدث حول كيفية استخدام رقم SIP للاتصال بالهواتف المحمولة من الكمبيوتر ... مجانًا