كيفية البدء باستخدام SASS في Visual Studio Code

في هذه المقالة سأشرح كيفية إعداد مترجم الويب SASS باستخدام Visual Studio Code بحيث يمكنك البدء في كتابة كود SASS لمشاريعك.

ما هي SASS؟

SASS (أوراق الأنماط الرائعة صناعيًا) هي لغة برمجة نصية تسمح لك بإنشاء كود CSS بشكل أسرع وتوفير الوقت عن طريق تقليل المخرجات المتكررة. يتيح لك SASS تحديد معلمات المدخلات المتكررة من خلال المتغيرات وإنشاء الوظائف واستخدام بناء الجملة المتداخل للتكرار عبر العناصر.

لماذا نحتاج إلى مترجم SASS؟

لا يمكن للمتصفح قراءة SASS ، فهو يقرأ CSS. لذلك ستحتاج إلى طريقة لتحويل رمز SASS إلى رمز CSS ، وهي عملية تعرف باسم transpiling.

برنامج Visual Studio Code SASS مترجم

يعد ملحق Sass Compiler Web لـ Visual Studio Code أحد أفضل الطرق لنقل ملفات SASS إلى CSS.

للقيام بذلك ببساطة اكتب "Live Sass Compiler" في سوق الإضافات.

في الجزء السفلي الأيسر ، سترى ترسًا إذا كان مثبتًا بالفعل أو زر تثبيت إذا لم يكن كذلك. في هذه الحالة ، انقر ببساطة فوق الزر وسيتم تثبيت مترجم Live Sass.

بعد اكتمال التثبيت ، من المفترض أن ترى زر "Watch Sass" في شريط القائمة الأزرق أسفل الشاشة ، على غرار ما يلي:

بمجرد أن يبدأ المحول البرمجي ، قم ببساطة بإنشاء ملف جديد بنفس اسم الملف الذي يحتوي على رمز .css الخاص بك ، ولكن قم بتسميته .scss بدلاً من ذلك. بمجرد كتابة بعض رموز Sass في ملف 'scss' ، اضغط على حفظ أو CTRL + s وستظهر لك ملف .css.map مع ملف .css جديد إذا لم يكن لديك واحد بالفعل.

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