حان الوقت للانتقال إلى التمرين التالي، ودعا التمرين: أقل.
شيء ترغب في أن
يخبرك طبيبك عندما تزوره أو تزوره في المرة القادمة.
ومع ذلك، دعونا ندرس أقل بمزيد من التفصيل الآن لفهم كيف يمكننا تحديد
فئات CSS باستخدام بناء الجملة الأقل من المعالج ثم
إنشاء فئات CSS المقابلة تلقائيًا من فصولنا الأقل.
للبدء، دعنا نذهب إلى
مشروعنا في محرر النصوص ثم داخل مجلد CSS،
سأقوم بإعادة تسمية هذا الملف styles.css كـ styles-old.css.
سأقوم بحفظ الإصدار الحالي من
ملف styles.css لأنه الآن سيكتبون رمز أقل
ورمز SCSS ثم يقوم تلقائيًا بإنشاء
ملف styles.css عن طريق تجميع لغات المعالج المسبق لـ CSS هذه.
بعد القيام بذلك، ثم في مجلد CSS الخاص بي،
سنقوم بإنشاء ملف جديد باسم styles.less.
وداخل هنا، وسوف تحدد بلدي أقل رمز.
دعونا أولا تحديد بعض المتغيرات أقل.
سأقول، lt-gray: ddd وهلم جرا.
يمكنك أن ترى أنني أضفت في عدد قليل من المتغيرات أقل هنا.
لذلك، قمت بتعريف الخلفية المظلمة لتكون القيمة الأولى،
ضوء الخلفية والخلفية شاحبة وأيضا
متغير واحد آخر يسمى دائري البند ارتفاع 300 بكسل.
سأستخدم هذه المتغيرات عندما أقوم بتعريف فئات CSS لاحقًا.
اسمحوا لي الآن أن أضيف في ميكسين
لبلدي أقل ملف يسمى الصفر الهامش وأنا سوف تعريف pad-up-dn
والوسادة اليسار
واليمين، 0px كونها القيمة الافتراضية ثم هنا،
أنا تعيين الهامش: 0px السيارات،
الحشو: بات-up-dn
والوسادة اليسار واليمين.
لذلك مع هذا، قمت بتعريف Mixin الذي
سأستخدمه في فصول CSS الخاصة بي التي سنقوم بتحديدها لاحقًا.
وهذا يحمل اثنين من المعلمات pad-up-dn والوسادة اليسار واليمين.
بعد ذلك، سأضيف في عدد قليل من فئات CSS حتى أبدأ
برأس الصف وأعرف هذا على أنه هامش صفري.
اسمحوا لي أن أضيف في عدد قليل من فئات CSS أخرى ثم أعود لإلقاء نظرة عليها.
هنا، لقد قمت بتعريف فئة CSS أخرى
باستخدام mixin صفر الهامش مع المعلمات 50 بكسل و 0 بكسل،
وهو تذييل حيث أقوم بتعريف لون الخلفية باستخدام
المتغير الذي تم تعريفه في وقت سابق
كخلفية شاحبة ثم jumbotron مع
mixin الهامش صفر و يعرف لون الخلفية على أنه ضوء الخلفية،
وبعض من هذه الأخرى التي هي فئات CSS القياسية،
والتي قمت بتضمينها هناك لأنني ذاهب للاستفادة منها في
صفحة الويب الخاصة بي ومن ثم لديك
navbar-dark التي لون الخلفية أنا لم تحدد لنا خلفية الظلام.
ومحتوى علامة التبويب التي تراني مرة أخرى
باستخدام الرمادي الفاتح المتغير للون الحدود هنا.
بعد ذلك، أضيف في فئة دائري هنا والتي أقوم بتعريف
الخلفية كخلفية مظلمة هنا وبعد ذلك،
أقوم بتعريف هذا العنصر الدائري.
لاحظ، كيف أقوم بتعريف ذلك كعنصر متداخل داخل داخل دائري ولعنصر دائري،
أقوم بتعريف الارتفاع كارتفاع دائري للعنصر هنا،
وهو متغير قمت بتعريفه في وقت سابق وداخل هناك،
أقوم بتعريف الصورة،
وهو مرة أخرى عنصر متداخل آخر داخل العنصر الدائري و ثم بالنسبة للصورة،
سأحدد بعض خصائص CSS بعد ذلك.
كما ترون،
لقد حددت بعض الخصائص للصورة.
هنا، ترى استخدام الطبقات المتداخلة هنا،
لذلك لديك دائري وداخل ذلك لدي عنصر دائري وداخل ذلك،
صورة محددة هنا.
وأخيرا في الجزء السفلي،
أضيف في فئة كاروسيلبوتون،
والذي يستخدم لتحديد كاروسيلبوتون.
مع هذه التغييرات على ملف styles.less الخاص بي إضافة في جميع الطبقات أقل هنا،
اسمحوا لي حفظ التغييرات.
الآن، أريد أن أكون قادرًا على تحويل هذا تلقائيًا إلى ملف CSS المقابل له.
لتحويل ملفي الأقل تلقائيًا إلى ملف CSS المطابق له،
سأستخدم وحدة نمطية للعقدة تسمى أقل.
لتثبيت ذلك في موجه،
اكتب sudo npm تثبيت ناقص g أقل.
أقوم بتثبيت هذا كوحدة عقدة عالمية.
وبمجرد أن يتم تثبيت
ذلك، فإنه سيتم توفير مترجم أقل يسمى أقل أقل في موجه الأوامر.
إذا كنت تقوم بتشغيل هذا على جهاز كمبيوتر يعمل بنظام التشغيل Windows،
فلن تحتاج إلى القيام بـ sudo،
كما قد تتذكر بالفعل.
الآن بعد أن قمنا بتثبيت مترجم lessc،
سأقوم بتجميع الكود الأقل في رمز CSS المقابل له.
للقيام بذلك، اسمحوا لي أن أذهب إلى مجلد CSS ثم هنا،
سترى أن لديك ملف.less الأنماط.
في موجه، اكتب lessc styles.less styles.css،
وبمجرد أن يكمل التجميع،
سيكون لديك ملف CSS المقابل.
لذلك كما ترى الآن،
لديك أقل رمز يتم تحويله إلى رمز CSS المقابل.
إلقاء نظرة على رمز CSS الذي تم إنشاؤه من الشفرة الأقل،
سترى أن هذا الرمز يبدو إلى حد كبير
نفس ما حددناه في ملف CSS الأصلي.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، تعلمنا كيفية كتابة
رمز أقل ثم تحويله تلقائيًا إلى رمز CSS المقابل.
عند هذه النقطة، قد ترغب في حفظ التغييرات في
مستودع Git الخاص بك مع الرسالة التمرين: أقل.