مرحلة ما قبل المعالجة و CSS

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

في هذه المقالة ، سأراجع المعالجات الأولية و postprocessor (s؟).

لن أخوض في تفاصيل حول CSS ، مما يعني أنك تعرف ذلك بالفعل. سوف اسم الطبقات في تدوين BEM . أيضًا ، لن أتعمق في تثبيت وتكوين كل ما سأكتب عنه ، لكن مع ذلك سأترك روابط يمكنك متابعتها ومعرفة كيفية القيام بذلك بنفسك.

لنبدأ مع المعالجين.

المعالجات

ما هو المعالج الأولي خارج السياق مع CSS؟ فيكي يعرف الجواب.

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

ما هي المعالجين؟ يوجد العديد من الممثلين ، على سبيل المثال: Sass (.sass و .scss) و Less (.less) و Stylys (.stylus).
أيضًا بين المعالجات المسبقة ، يمكن تمييز PostCSS (أو بالأحرى محلل SugarSS ومكوِّن PreCSS) بشكل منفصل. إذا نظرنا إلى الأمام ، سأقول نعم ، PostCSS ليس مجرد معالج ما بعد.

سأفعل مراجعة على سبيل المثال ساس. بتعبير أدق ، على بناء الجملة الجديد - SCSS ، لأنه أقرب إلى CSS من بناء الجملة القديم. لنبدأ بالقدرات التي تضيفها المعالجات المسبقة غير الموجودة في CSS ، وتنتهي بالمشكلات التي يتم حلها.

الاحتمالات

المتغيرات

//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; } 

فائدة المتغيرات يصعب المبالغة في تقديرها. يمكنك الآن إعطاء أسماء ذات معنى للألوان ($ tomato: rgb (255،99،71)) ، وحساب القيم ليس من خلال الثوابت ، ولكن من خلال المتغيرات (الارتفاع: $ body_height - $ footer_height) وأكثر من ذلك بكثير. قد يقول الكثيرون أن هناك متغيرات في CSS. ولكن هل يمكنني استخدام تقول أنه لا يوجد دعم لـ IE (ولأسباب واضحة ، لا يتوقع ذلك).

التعشيش

 //style.scss .chat-area { width: 40%; &__button { // & -    (   & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; } 

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

يمزج

 //style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } 

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

وظائف إضافية

 //style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; } 

في الأساس ، تجعل الميزات الجديدة العمل مع الألوان أكثر سهولة. على سبيل المثال ، وظيفة التخفيف - تفتيح اللون من خلال العدد المحدد من النسبة المئوية (العكس هو وظيفة تغميق).

حل المشاكل

نمطية

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

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


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

 //style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; } 

يرجى ملاحظة أن الملفات المصدر تم تحويلها إلى واحد. طلب واحد إلى خادم لالاحصائيات - إجابة واحدة.

الميراث

<سخرية> لدينا فصول ، ولكن لا ميراث ، كيف ذلك؟ </ سخرية>. من الممكن الآن تحديد ما يسمى "محددات القوالب" وتوسيعها باستخدام محددات أخرى.

 // style.scss %equal-heights { //   height: 100%; } %message { //   padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; } 

جمال محددات القالب هو أنها لا تنسجم مع الأنماط التي تم إنشاؤها. لم يتم إشراك القالب بالتساوي مع ارتفاع القالب٪ في الكود ولم يترك أي آثار في CSS. انعقدت الرسالة٪ محدد في شكل قواعد محددات توسيعها. يمكنك أن ترث من محددات عادية ، لكن من الأفضل استخدام محددات القوالب بحيث لا توجد أي بيانات غير مقبولة.

التنسيق

بعد كتابة الكود ، يجب تنسيقه (مضغوط للإنتاج). يمكنك القيام بذلك بمساعدة جامعي مثل webpack ، أو يمكنك من خلال الأدوات القياسية.

هناك 4 أنواع من التنسيق في ساس.

 //expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red} 

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

بوستسكريبت

لم أفهم بعض الميزات التي أضافها ساس. على سبيل المثال ، حلقات أو ميزات العوامل الحسابية . سأتركهم لك للتعرف على نفسك.

Postprocessors

بعد أن تعاملنا مع المعالجين ، ننتقل إلى معالجي البريد.

في سياق Css ، يكون postprocessor هو نفسه المعالج الأولي ، لكن لا يتم إعطاء الإدخال إلى postprocessor التعليمات البرمجية المكتوبة بلغة المعالج المسبق ، ولكن أيضًا css. بمعنى ، postprocessor هو برنامج عند إدخال css المعطاة ، والإخراج css. ليس من الواضح لماذا هذا ضروري.

سأشرح مثالًا ملموسًا على تشغيل PostCSS - الممثل الوحيد ل postprocessors في سياق css.

لا يقوم PostCSS خارج الصندوق بأي شيء باستخدام CSS. تقوم ببساطة بإرجاع الملف الذي تم تقديمه إليه عند الإدخال. تبدأ التغييرات عندما تكون المكونات الإضافية متصلة بـ PostCSS.

يمكن وصف دورة PostCSS بأكملها على النحو التالي:

• يتم إعطاء الملف المصدر لإدخال PostCSS وتحليله.
• البرنامج المساعد 1 يفعل شيئا
• ...
• البرنامج المساعد ن يفعل شيئا
• يتم تحويل النتيجة إلى سلسلة وكتابتها إلى ملف الإخراج.

النظر في الإضافات الرئيسية الموجودة في النظام البيئي PostCSS

الإضافات

الاصلاح التلقائي

هذا المكون الإضافي شائع جدًا لدرجة أن العديد من الأشخاص يعتقدون أنهم يستخدمون هذا البرنامج المساعد ولكن لا يستخدمون PostCSS. هم مخطئون.

 //in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } 

يضيف Autoprefixer بادئات المتصفح لقواعدك . واحدة من أهم المكونات الإضافية التي بدأت في تاريخ PostCSS مع أي شيء قابل للاستبدال. يمكنك القول أنه من المنطقي وضع PostCss فقط من أجل هذا البرنامج المساعد.

الإعداد المسبق env

 //in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } } 

يضيف PostCSS Preset Env الميزات التي تمت مناقشتها فقط في مسودات مطوري css. في هذا المثال ، تم تنفيذ توجيه @ custom-media ، وكذلك وظيفة mod-color. البدء في استخدام المغلق المستقبل اليوم!

وحدات CSS

جميع BEMs هذه ليست لك ، لكن هل ما زالت هناك مشكلة في تعارضات الأسماء الطبقية؟ ثم PostCSS يقدم حلا مختلفا.

 //in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; } 

تقوم وحدات CSS بتغيير أسماء الفئات وفقًا لنمط معين (كل شيء قابل للتخصيص). الآن لا نعرف مقدمًا اسم الفصل ، لأنه يتم تحديده ديناميكيًا. كيف الآن لتصنيف العناصر إذا كنا لا نعرفها مقدما؟ مع دمج PostCSS و Webpack و ES6 يمكنني تقديم هذا الحل:

 import './style.css'; //  import styles from './style.css'; //  

الآن نحن لا نستورد ملفًا ذو أنماط (على سبيل المثال ، في ملف React للمكون) واستبدال القيم التي كانت معروفة لنا من قبل ، بل نستورد كائنًا. ستكون مفاتيح هذا الكائن هي المحددات الأصلية ، وسيتم تحويل القيم. هذا هو ، في هذا المثال ، الأنماط ['name'] = 'Logo__name__SVK0g'.

قصير

 //in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; } 

يضيف PostCSS Short مجموعة من الإدخالات المختصرة للقواعد المختلفة. الرمز يصبح أقصر ، وبالتالي هناك مساحة أقل للأخطاء. زائد يزيد من سهولة القراءة.

إعادة ضبط تلقائي

 //in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; } 

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

 //out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; } 

تذكر في بداية المقال قلت إن PostCSS ليس مجرد معالج نشر؟

PostCSS - المعالج؟

النظر في محلل واحد ومكون إضافي ، وبعد ذلك سوف تغير رأيك الحالي حول PostCSS.

السكر

 //in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black } 

SugarSS هو محلل (وليس مكونًا إضافيًا !) ، يعتمد على المسافة البادئة ، وليس على الأقواس المتعرجة ، وفقًا لمعاييرها. لها امتداد منفصل ".sss". تتشابه الكود المكتوب باستخدام SugarSS في الأسلوب مع بناء جملة Sass القديم ، ولكن بدون المستحضرات مثل المتغيرات والخلطات والميراث وما إلى ذلك.

هل تفكر في ما سوف يضيفه البرنامج المساعد التالي؟

Precss

 //in.sss $color: black .parent .child color: $color //  SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black } 

يضيف PreCSS فقط إمكانات المعالجات الأولية التي تتم كتابتها في النصف الأول من المقالة.

ولماذا PostCSS ليس المعالج المسبق الآن؟

Stylelint

لقد كتب الكثير بالفعل عن Stylelint . حصل على هذا الاستعراض لأنه يستخدم PostCSS كمحلل لخطوط ملفات CSS. لنفترض أن لدينا مثل هذا الملف.

 a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) } 

فيما يلي الإخراج الخاص به للملف الحالي:

  2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline 

من الصعب للغاية تقدير فائدة هذه الأداة.

الاستنتاجات

تضيف المعالجات المسبقة الكثير من الوظائف الجديدة غير الموجودة في CSS. بمجرد تجربة ذلك ، لن تعود إلى CSS العادي.

يعد PostCSS أقرب بكثير إلى CSS الأصلي من المعالجات المسبقة ، ولكن مع وجود بعض المكونات الإضافية المتصلة ، يمكن أن يكون لها نفس الوظيفة (وحتى بناء جملة مماثل). يمكن أن تكتب حروف الكتابة للمبتدئين دون حتى التفكير في أن التنسيقات ليست في CSS خالص. بعض الإضافات (على سبيل المثال ، Autoprefixer) ليس لها نظائرها في عالم ما قبل المعالجة.

لا أحد يزعج استخدام preprocessors و PostCSS بالتزامن. يعتبر الخيار جيدًا للمشاريع التي تستخدم بالفعل المعالجات المسبقة ولديها مكان للمعيشة.

بالنسبة للمشاريع الجديدة ، أوصي باستخدام PostCSS فقط. يتم استخدام مصممي التخطيط لبناء الجملة قبل المعالج؟ تثبيت البرنامج المساعد PreCSS ومحلل SugarSS. تحتاج التوافق عبر متصفح؟ تثبيت البرنامج المساعد Autoprefixer. لم تعد هناك حاجة للتوافق عبر المستعرض (على سبيل المثال ، تم تغليف مشروعك في الإلكترون وأصبح سطح المكتب)؟ فقط قم بإلغاء تثبيت Autoprefixer! مع PostCSS ، يمكنك ، كما هو الحال مع المنشئ ، بناء ما يحتاجه مشروعك بالضبط.