Stylus هو معالج مسبق لرمز CSS ، مما يسمح لنا بالعمل بسهولة أكبر في محرر النصوص الخاص بنا، وسأشرح أدناه أسباب هذا البيان.
هذه ورقة أنماط كما نعرفها:
النص الأساسي {الخط: 12px Helvetica، Arial، sans-serif؛ } a.button {-webkit-border-radius: 5px ؛ - دائرة نصف قطرها: 5 بكسل ؛ نصف قطر الحدود: 5 بكسل ؛ }
وهذه ستكون نفس ورقة الأنماط التي تم إنشاؤها باستخدام برنامج Stylus:
خط النص 12 بكسل Helvetica، Arial، sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px
أين المفاتيح؟ أين ذهبت الفواصل المنقوطة والنقطتان؟ النسيان. قلم اللمس يفعل ذلك نيابةً عنا.
إذا كنتَ مبتدئًا في استخدام CSS و HTML، فلا يُنصح باستخدام Stylus لأنك قد تنسى كيفية عمل الأشياء. أما إذا كنتَ تعمل في هذا المجال منذ فترة وترغب في توفير بعض الوقت والجهد في كتابة الكود، فلا بأس.
سيجد مبرمجو بايثون في Stylus شيئًا مشابهًا جدًا لما اعتادوا عليه، حيث أنهم يحتاجون فقط إلى وضع المسافة البادئة بشكل صحيح حتى يحدث السحر.
تركيب
لكي يعمل برنامج Stylus ، نحتاج إلى تثبيت Node.js، الموجود في فرع Community، لذلك نتابع القيام بذلك:
$ sudo pacman -S nodejs
وبعد ذلك نقوم بتثبيت Stylus. الطريقة التقليدية ستكون:
$ npm install -g stylus
يتم تثبيته بشكل جيد ، لكنه لا يعمل بالنسبة لي ، لذلك من الأسهل تثبيته من AUR:
$ yaourt -S nodejs-stylus
كيفية استخدام قلم الشاشة
حسنًا، لدينا Node.js و Stylus مثبتين . كيف نستخدمهما؟ الأمر بسيط. لنفترض أن لدينا مجلدًا يحتوي على الملفات التالية:
- dir - index.html - style.css
ما نحتاج إليه هو إنشاء ملف style.styl ، وهو الملف الذي سنعمل عليه. في هذا الملف، يمكننا كتابة ما يلي:
body-background-color #ffff font-size 12px a. زر اللون الأحمر ، الحشو 10px
إذا قمنا بحفظ الملف أو إجراء أي تغييرات عليه، فلن يحدث شيء، لأننا لا نقوم "بتجميع" الملف. لتجميعه، نفتح نافذة طرفية في مجلدنا (حيث يوجد ملف style.styl ) ونُشغّل الأمر التالي:
stylus -c style.styl
لكن في كل مرة نحفظ فيها ملف style.styl ، سيتعين علينا تشغيل الكود، ولكن لحسن الحظ ليس ذلك ضرورياً، لأنه إذا قمنا بتشغيل نفس الأمر، ولكن مع إضافة المعامل -w (watch)، فسيحدث ما يلي:
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 الخاص بنا ، بل يزيل أيضًا المسافات غير الضرورية بحيث يكون حجم ملف الأنماط أقل
ليس هذا فحسب، بل يتيح لنا برنامج Stylus تحويل ملفات CSS إلى صيغته، كما أن طرق استخدام صيغته متنوعة للغاية. وهذه مجرد لمحة. لذا، إذا كنت مهتمًا، أنصحك بمعرفة المزيد عن Stylus.