قبل المعالج CSS: نظرة عامة، والاختيار، وتطبيق

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

كيف CSS المعالج

من أجل فهم أفضل خصائص هذه التكنولوجيا، والخوض لفترة وجيزة في تاريخ العرض المرئي من صفحات ويب.

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

في عام 1994، وضعت النرويجي هاكون عالم الكذب ورقة أنماط التي يمكن استخدامها لظهور الصفحات بشكل منفصل عن وثيقة HTML. وpriglanulas فكرة أعضاء W3C، الذين وضعوا على الفور على الانتهاء. وبعد سنوات قليلة قام بنشر النسخة الأولى من مواصفات CSS. ثم كانت تحسن مستمر، يجري وضع اللمسات الأخيرة ... ولكن بقي مفهوم كل نفس: كل نمط تعيين خصائص معينة.

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

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

CSS للمبتدئين: ميزات المعالج

لديهم عدة وظائف:

• توحيد البادئات المتصفح والكاكي.

• تبسيط الجملة؛

• إعطاء الفرصة للعمل مع محددات متداخلة دون أخطاء.

• تحسين المنطق التصميم.

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

رؤية شعبية هذه الوظائف الإضافية، قد بدأت W3C لإضافة تدريجيا إمكانية منهم في كود CSS. على سبيل المثال، في مواصفات لذلك هناك وظيفة احسب ()، الذي يدعمه العديد من المتصفحات. ومن المتوقع أن قريبا سيكون من الممكن لضبط المتغيرات وإنشاء سمك الجريث. ومع ذلك، وهذا سوف يحدث في المستقبل البعيد، وpreprocessors هنا بالفعل، والآن يعمل بشكل جيد.

شعبية preprocessors CSS. ساس

صممت في عام 2007. في الأصل Haml مكون - وHTML القالب. ميزات جديدة لعناصر CSS تتحكم المطورين استمتع على روبي على القضبان، والتي بدأت في الانتشار في كل مكان. وساس عدد كبير من الميزات التي مدرجة الآن في أي المعالج: (ثم، ومع ذلك، لا يمكن إضافة هذه الحجج) سمك الجريث المتغيرات، تضمين محددات.

تصريح المتغيرات في ساس

المتغيرات أعلنت مع علامة $. ويمكن أن الحفاظ على ممتلكاتهم ومجموعات، على سبيل المثال: "$ borderSolid: أحمر الصلبة 1PX.". في هذا المثال، أعلنا متغير يسمى borderSolid وحفظه قيمة الأحمر الصلبة 1PX. الآن، إذا كان في CSS نحن بحاجة إلى إنشاء عرض الحدود الحمراء من 1PX، ببساطة يشير إلى أن المتغير بعد اسم الخاصية. بعد الاعلان عن المتغيرات لا يمكن تغييرها. هناك العديد من المدمج في وظائف. على سبيل المثال، تعريف متغير بقيمة $ redcolor # FF5050. الآن، في رمز CSS في خصائص أي عنصر، واستخدامها لتعيين لون الخط: ع {لون: $ redColor. }. هل تريد تجربة مع اللون؟ استخدام وظيفة ظلم أو التخفيف. ويتم ذلك حتى: ع {اللون: تلقي بظلالها ($ redColor، 20٪)؛ }. ونتيجة لذلك، فإن redColor اللون تكون أخف وزنا بنسبة 20٪.

والعديد من المدمج في وظائف ساس. قيمتها ما لا يقل عن قراءتها، ولكن أفضل - للتعلم.

التعشيش

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

شعبة {

اللون: الأحمر،

}

شعبة ع {

اللون: الأصفر.

}

شعبة ع تمتد {

اللون: وردي.

}

مع المعالج CSS فقط يصبح من الأسهل وأكثر إحكاما:

شعبة {

اللون: الأحمر،

ع {

اللون: الأصفر.

.span {

اللون: وردي.

}

}

}

عناصر حرفيا "استثمار" واحد آخر.

توجيهات المعالج

باستخدام توجيهاتimport يمكن استيراد الملفات. على سبيل المثال، لدينا ملف fonts.sass أن يعلن الاساليب الخطوط. توصيله إلى style.sass ملف رئيسية هي: "الخطوط"import. القيام به! بدلا من ملف واحد كبير مع الأنماط لدينا عدد قليل من التي يمكن استخدامها للوصول السريع والسهل إلى الخصائص المطلوبة.

سمك الجريث

واحدة من الأفكار الأكثر إثارة للاهتمام. انها تسمح سطر واحد لطرح مجموعة من الخصائص. العمل على النحو التالي:

mixin largeFont {

الخط بين أفراد الأسرة: 'تايمز الرومانية الجديدة'؛

FONT-SIZE: 64px؛

خط الطول: 80px؛

الخط الوزن: جريئة.

}

سمك الجريث لتطبيق عنصر على الصفحة، استخدمinclude التوجيه. على سبيل المثال، ونحن نريد لتطبيقه على رأس H1. لدينا البنية التالية: H1 {include: largeFont. }

يتم تعيين كافة خصائص سمك الجريث عنصر H1.

المعالج أقل

يذكر جملة ساس البرمجة. إذا كنت تبحث عن خيار هو أكثر ملاءمة للمبتدئين دراسة CSS، والبحث عن أقل. تم إنشاؤه في عام 2009. السمة الرئيسية - دعم جملة الأصلي CSS، لذلك غير مألوفة مع الفارض البرمجة سيكون من الأسهل للتعلم.

وأعلن المتغيرات باستخدام الرمز @. على سبيل المثال:fontSize: 14px؛ يعمل التعشيش على نفس المبادئ في ساس. وأعلن سمك الجريث على النحو التالي: .largeFont () {الخط بين أفراد الأسرة: 'تايمز الرومانية الجديدة'؛ FONT-SIZE: 64px؛ خط الطول: 80px؛ الخط الوزن: جريئة. }. لتوصيله ليس من الضروري استخدام توجيهات المعالج - فقط إضافة سمك الجريث التي أنشئت حديثا في خصائص العنصر المحدد. على سبيل المثال: H1 {.largeFont. }.

مرقم

المعالج آخر. تم إنشاؤها في عام 2011 من قبل المؤلف نفسه، الذي أعطى العالم اليشم، وعبر عن وغيرها من منتجات مفيدة.

يمكن تعريف المتغيرات بطريقتين - إما صراحة أو ضمنا. على سبيل المثال: الخط = "تايمز نيو رومان '؛ - خيار ضمني. ولكن $ الخط = "تايمز نيو رومان" - واضح. وأعلن سمك الجريث ومتصلة ضمنا. بناء الجملة كما يلي: redColor () اللون الأحمر. الآن يمكننا أن نضيف هذا البند، على سبيل المثال: redColor H1 ()؛

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

ما قبل المعالج تختار؟

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

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

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