[MUSIC]
يتعامل هذا الدرس الخاص مع معالجات CSS المسبقة،
ولا سيما أقل و Sass.
من الواضح الآن أن هذه الموضوعات لها علاقة بـ CSS
وتحديد فئات CSS، ولكن سيكون من غير المناسب
لي إكمال دورة Bootstrap دون
الخوض قليلاً في معالجات CSS المسبقة.
ببساطة لأن Bootstrap تم بناؤه باستخدام Sass لمصدره.
لذا، سنقوم بفحص معالجات CSS المسبقة،
وما هي، وكيف تكون مفيدة في تعريف فئات CSS،
ولماذا يستخدم Bootstrap منها.
كما قد تفهم من تجربتك السابقة مع CSS،
CSS رائع لتحديد الأنماط
وتطبيق هذه الأنماط بشكل متكرر على عناصر HTML المختلفة.
وهذه هي الطريقة التي نستخدم بها CSS عندما نحدد صفحات الويب الخاصة بنا.
ولكن عندما تنظر إلى رمز CSS نفسه،
تبدأ في إدراك قيود CSS بسرعة.
خاصة إذا كنت قادمًا من خلفية برمجة، فأنت تدرك أن
CSS لا يحتوي على ما تتوقعه عادةً في لغة برمجة، مثل المتغيرات،
وتعشيش المحددات، والمتغيرات، والتعبيرات، والوظائف.
وهذا يعني أن كتابة شفرة CSS تصبح مرهقة،
والحفاظ على رمز CSS يصبح مرهقا بسبب
عدم وجود صيغة تشبه لغة البرمجة التقليدية.
الآن، هذا هو المكان الذي تأتي فيه المعالجات المسبقة CSS لإنقاذنا.
هناك العديد من المعالجات المسبقة CSS الشائعة التي تحاول معالجة بعض
أوجه القصور في CSS من خلال دعم العديد من هذه الميزات.
اثنين على وجه الخصوص التي هي ذات أهمية بالنسبة لنا هو أقل وساس.
سنلقي نظرة على هذين بمزيد من التفصيل في هذا الدرس.
الآن، عندما تحدد فئات CSS الخاصة بك باستخدام واحدة
من هذه اللغات preprocessor مثل Less أو
Sass، فيجب تحويلها في النهاية إلى CSS،
ولكن يمكن القيام بذلك تلقائيًا قبل استخدام CSS في صفحة الويب الخاصة بك.
ما تقدمه لنا لغات المعالجة المسبقة هذه هو
بناء جملة أكثر شبيهة بلغة البرمجة، كما سنرى في الشرائح القليلة القادمة.
سنقوم بفحص أقل وساس لفترة وجيزة.
على وجه الخصوص، السبب في أننا نلقي نظرة على هذا هو أن Bootstrap نفسه
يستخدم Sass لتحديد مصدره لفئات CSS الخاصة به.
وهكذا إذا ذهبت إلى تخصيص Bootstrap،
فسيتعين عليك العمل مع رمز Sass.
استخدم Bootstrap 3، الذي كان الإصدار السابق من Bootstrap
، أقل، وبالتالي، اعتقدت أنه سيكون من المناسب تغطية كل من Less و
Sass، لأنها تشبه إلى حد كبير بعضها البعض
من حيث قدراتها والطريقة التي يتم بها تعريف بناء الجملة.
الميزات النموذجية التي تجلبها معالجات CSS المسبقة هي دعم
المتغيرات ومحددات التعشيش والتعبيرات والوظائف والمختلطات.
لذلك سنلقي نظرة على بعض هذه مع بعض الأمثلة في الشرائح القليلة القادمة.
أول شيء سننظر إليه هو المتغيرات.
الآن في العديد من فئات CSS التي تحددها،
قد يكون لديك بعض الاستخدام المتكرر لكميات معينة.
قد يكون من المفيد أكثر إذا قمت بتعريف بعض المتغيرات التي
تحتوي على هذه الكميات واستخدام هذه المتغيرات في تحديد فئات CSS الخاصة بك.
هذا هو المكان الذي تأتي فيه المتغيرات لإنقاذك.
هنا، سنلقي نظرة على كل من رمز أقل و SCSS.
Scss هو نسخة من Sass،
نسخة أكثر شعبية من بناء الجملة Sass، لذلك لهذا السبب أركز على Scss هنا.
لذلك، إذا قمت بتعريف المتغيرات في أقل،
فستتابع اسم المتغير بعلامة @.
في حالة Scss، سوف تستخدم علامة الدولار قبل اسم المتغير.
وبمجرد تحديد هذه المتغيرات،
يمكنك بعد ذلك استخدام تلك المتغيرات عند تحديد الفئات.
كما ترى في المثال، حيث نحدد navbar معكوس كخلفية،
أو ارتفاع عنصر دائري كمتغيرات.
الآن، ميزة تحديد المتغيرات في بداية فئة CSS الخاصة بك
هي أن هناك نقطة واحدة حيث يمكنك تحديث قيمة،
وسوف تقوم تلقائيًا بتحديث جميع فئات CSS التي تستخدم هذا المتغير.
عادة الطريقة التي نستخدم بها المتغيرات في لغات البرمجة.
المتغيرات في لغات المعالج المسبق CSS يمكن أيضا أن يكون لها نطاق خاص بها.
في كثير من الأحيان عند تحديد فئات CSS، خاصة عندما
يكون لديك لتحديد الفئات المتداخلة داخل فئات أخرى،
ثم، قريبا جدا رمز CSS الخاص بك يصبح مرهقا جدا.
لذلك هذا هو المكان الذي يتم فيه دعم التعشيش بواسطة معالجات CSS المسبقة.
كما ترون، يمكنك تحديد على سبيل المثال، فئة دائري،
وداخل فئة دائري، يمكنك تحديد فئة عنصر دائري.
وبالمثل، فإن الفئة الفرعية للصورة داخل فئة عنصر دائري.
حتى هنا يمكنك أن ترى أن كل من هذه متداخلة داخل فئة سابقة.
مع المتغيرات، يمكنك الاحتفاظ بقيمة واحدة في كل مرة في متغير.
لنفترض أن لديك مجموعة من المتغيرات التي لخصت معا
تعلن مجموعة من إعلانات CSS، وهذا هو المكان الذي نستخدم فيه mixins.
في أقل يمكنك تحديد ميكسين من خلال إعطائه اسم،
وفي ساس كنت ببساطة تسبق ذلك مع @mixin
أمام اسم إعلان ميكسين.
وداخل mixin، يمكنك تحديد مجموعة من إعلانات CSS
التي يمكن بعد ذلك إعادة استخدامها لفئات CSS المختلفة.
كما ترى في هذا المثال هنا، فإننا نحدد هامش الصفر
كميكسين، سواء في أقل و ساس.
لاحظ الاختلاف الطفيف في بناء الجملة في كل من هذه الحالات.
وبعد ذلك، يمكنك بعد ذلك استخدام هذا المزيج في تحديد فئات CSS إضافية.
حتى هنا يمكنك أن ترى أنه بالنسبة لرأس الصف، فإننا نحدد الهامش صفر
كميكسين في رأس الصف، مما يعني أن كل
هذه الخصائص من الهامش صفر سوف تكون موروثة بواسطة فئة رأس الصف هذه.
يمكن أن تأخذ Mixins نفسها معلمات إضافية إذا كنت ترغب في تعريفها.
لذا في هذه الحالة، أنا أعرّف
اختلافًا لميكسين الهامش الصفري الذي رأيناه في الشريحة السابقة.
هنا، هذا الصفر الهامش مزيج يأخذ اثنين من المعلمات،
وسادة لأعلى إلى أسفل وسادة اليسار اليمين.
ومع أقل، يمكنك حتى تحديد القيمة الافتراضية لذلك،
ولكن مع Scss تحتاج إلى تحديد القيم بشكل صريح.
لذلك نحن هنا تحديد اثنين من خصائص CSS مختلفة، الهامش
والحشو، ومن ثم يستخدم الحشو نفسه المعلمات لميكسين لدينا هناك.
لذلك في هذه الحالة، يمكنك استخدام هذه mixins كما ترى في
فئتي CSS المعرفة أسفل رأس الصف
ومحتوى الصف عن طريق تحديد قيم المعلمات الخاصة بهم
عند تضمين هذا المزيج في كتلة CSS الخاصة بك.
ليس ذلك فقط، يمكنك حتى إجراء عمليات رياضية على
المتغيرات المحددة مسبقًا عند استخدامها داخل فئات CSS الخاصة بك.
حتى هنا يمكنك أن ترى أنني قد حددت اثنين من عناصر دائري مختلفة
مع اثنين من الأحجام المختلفة، وهكذا
يمكنك أن ترى أن ارتفاعات كل واحد منهم يتم تعريفها بشكل مختلف.
في حالة واحدة أستخدم الارتفاع المحدد مسبقًا، في حالة أخرى
أقوم بضرب هذا الارتفاع ثم استخدامه لتحديد
خاصية الارتفاع داخل عنصر دائري لفئة العنصر الكبير.
لذلك
يسمح هذا النوع من العمليات الرياضية على المتغيرات أيضا في لغات CSS preprocessor.
الميزات الأخرى التي تتضمن المعالجات المسبقة CSS
هي الوظائف التي تسمح لك بتعريف الوظائف الرياضية، سلاسل أقل.
يمكنك أيضًا إجراء عمليات الألوان وعمليات مزج الألوان باستخدام هذه الوظائف
والاستفادة منها عند تحديد فئات CSS الخاصة بك.
هذا متقدم بعض الشيء لذلك أنا لن أدخل في الكثير من التفاصيل هناك.
أيضًا، يمكنك إدخال فئات preprocessor CSS المحددة مسبقًا في فئات أخرى.
على سبيل المثال، إذا كان لديك فئة أقل كما هو محدد،
ويمكنك إدخال هذا الملف في ملف أقل آخر.
وبالمثل، إذا قمت بتعريف ملفات Scss،
فيمكنك استيرادها إلى ملفات Scss الأخرى باستخدام عملية الاستيراد.
بناء الجملة هو نفسه لكل من أقل و ساس.
الآن بعد أن رأينا بعض ميزات لغات المعالج المسبق CSS، دعونا
الآن ندرس كيف يمكننا بالفعل الاستفادة منها من خلال القيام ببعض التمارين.
أولا، سنقوم بممارسة على أساس أقل.
ثم سوف نتابع ذلك مع ممارسة على أساس ساس.
[ موسيقى]