سننتقل الآن إلى التمرين التالي،
حيث سنستخدم بناء جملة SCSS لتحديد
فئات SCSS الخاصة بنا وتحويلها تلقائيًا إلى فئات CSS المقابلة لها.
سنقوم بالضبط بنفس مجموعة الخطوات
التي فعلناها في التمرين الأخير الذي أكملناه الآن،
ولكن باستخدام بناء جملة SCSS.
للبدء، في مشروعك في مجلد CSS،
دعنا ننشئ ملفًا جديدًا ونسميه كبداية نمط SCSS.
الآن في هذا الملف سوف نحدد فئات SCSS الخاصة بنا ثم نقوم تلقائيًا
بتحويل ذلك إلى فئات CSS الخاصة بنا.
حتى في هناك، دعونا نبدأ أولا بتحديد المتغيرات،
لذلك سأبدأ مع الرمادي الفاتح،
لقد أضفت الآن في عدد قليل من المتغيرات هنا مرة أخرى مع
نفس الأسماء التي استخدمناها في التمرين الأخير في وقت سابق،
ولكن مع بناء جملة SCSS بحيث
تسبق جميع المتغيرات مع علامة الدولار لتعريفها كمتغيرات.
بعد ذلك سوف يحدد المزيج.
لذلك بالنسبة للميكسين، أود أن أقول ميكسين صفر الهامش، لوحة لأعلى لأسفل،
وسادة اليسار
واليمين، ونحن نحدد القيم كما كان من قبل.
الآن بعد أن أكملنا تحديد mixin،
يمكننا الاستفادة منه في فصول SCSS التي نحددها لاحقًا.
دعونا الآن تحديد بعض فئات سس،
لذلك سوف تحديد رأس الصف الذي سأستفيد من
ميكسين الهامش الصفر
مع القيم صفر بكسل هنا.
سنستمر في تحديد بعض الفئات الأخرى التي ستضيفها هنا،
حتى تتمكن من رؤية أنني قمت بتعريفها مع
رأس الصف ومحتوى الصف حيث استخدمت
mixins والتذييل وعنوان Jumbotron
وما إلى ذلك، ويمكنك رؤية استخدام
المتغيرات التي لدينا المحددة في وقت سابق في هذا المثال هناك.
من الواضح أن الشفرة متوفرة في تعليمات التمرين التي تتبع هذا الفيديو.
بعد ذلك سوف نضيف إذا كنت تعشيش الطبقات.
تماما كما فعلنا في التمرين الأخير،
سنضيف في فئة دائري مع مجموعة الخلفية إلى الخلفية المظلمة ثم
داخل حيث سنقوم بتعشيق
فئة عنصر دائري مع تعيين الارتفاع إلى ارتفاع عنصر دائري،
ثم صورة ألوان الطبقة الداخلية الأخرى مع بعض الخصائص هناك،
ثم فئة زر دائري كما حددناها في وقت سابق.
لذلك مع هذا، قمنا بإجراء التغييرات على فصول SCSS لدينا،
لذلك دعونا حفظ التغييرات.
الآن، نحن بحاجة إلى تحويل هذا إلى ملف CSS المقابل له.
لتحويل شفرة المصدر SCSS إلى شفرة CSS المقابلة،
سنأخذ مساعدة وحدة عقدة أخرى تسمى عقدة sass.
يتيح تثبيت وحدة العقدة عن طريق كتابة npm
install save dev—save dev ثم عقدة sass.
وبهذه الطريقة، سوف نقوم بحفظ حزمة العقدة sass هذه
كتبعية تطوير في ملف package.json الخاص بنا.
بمجرد اكتمال التثبيت،
سنقوم بإضافة برنامج نصي إلى ملف package.json الخاص بنا.
الذهاب إلى ملف package.json الخاص بنا،
إذا قمت بالتمرير لأعلى سترى أنه في تبعيات dev،
يتم الآن إضافة عقدة sass أيضًا إلى تبعيات dev.
سنقوم الآن بإضافة برنامج نصي إلى ملف package.jsm الخاص بنا
، لذلك النصف الأيمن من هذه الشريحة،
سأقوم بإضافة برنامج نصي باسم
SCSS ثم سيكون هذا البرنامج النصي عقدة sass -o CSS/،
مما يعني أن إخراج هذه الملفات المحولة سيكون في مجلد CSS،
وسيكون المصدر هنا أيضًا في المجلد CSS.
لذلك سيتم
تحويل كافة الملفات مع ملحق. scss وسيتم إنشاء ملفات corresponding.CSS بواسطة هذه العقدة sass.module.
دعونا حفظ التغييرات ومن ثم سنذهب إلى موجه الأوامر ثم اكتب
في نبم تشغيل سس وهذا سوف تأخذ الرعاية من القيام التحويل لدينا.
الذهاب إلى موجه الأوامر،
سنقوم بكتابة npm run SCSS وهذا يجب
تحويل جميع ملفات SCSS تلقائيًا إلى ملفات CSS المقابلة.
الذهاب إلى محررنا،
ترى الآن أن هناك ملفات styles.css التي تم إنشاؤها.
بالنظر إلى محتوى هذا الملف،
سترى أن رمز CSS هذا الذي تم إنشاؤه من رمز SCSS الخاص بنا هو إلى حد كبير
نفس رمز CSS الأصلي الذي كتبناه بأنفسنا.
مع هذا، نكمل هذا التمرين.
في هذا التمرين، رأينا كيف يمكننا كتابة
رمز SCSS ثم تحويل ذلك تلقائيًا إلى رمز CSS المقابل.
السبب في فحصنا هذا بالتفصيل هو أن
Bootstrap يوفر ملفات المصدر الخاصة به بتنسيق SCSS.
إذا قمت بزيارة صفحة Bootstrap،
فستلاحظ أنه يقول أن Bootstrap مصمم باستخدام المعالج المسبق Sass.
لذا، إذا نظرت إلى كيفية تحويل هذا من ساس
وكيف يمكنك إجراء التخصيص الخاص بك
باستخدام رمز Bootstrap Sass، يمكنك الانتقال إلى الوثائق،
ثم سترى تحت
«خيارات» سيكون لديك بعض خيارات التخصيص التي يتم تعريفها هنا.
خيارات التخصيص المختلفة التي يمكنك أن ترى أن
جميع هذه المتغيرات يتم تعريفها باستخدام بناء جملة Sass هنا،
وأيضًا تحت «أدوات البناء»،
ستشرح لك كيف يمكنك إجراء التخصيص الخاص بك لـ Bootstrap.
الآن، أوصي بشدة بعدم محاولة هذا حتى يكون لديك
خبرة كافية باستخدام Bootstrap في حياتك اليومية.
و هذا يكمل ممارستنا.
قد يكون هذا هو الوقت المناسب بالنسبة لك للقيام بالتزام جيد مع ممارسة الرسالة SCSS.