فيسوال ستوديو كود (مقابل كود) هي واحدة من المحررين رمز الأكثر شعبية وقوية بين المطورين. يقدم مجموعة واسعة من الميزات والأدوات لتطوير تطبيقات الويب بسهولة. في هذه المقالة ، سوف ننظر في كيفية توصيل المعالج ساس كس إلى رمز فيسوال ستوديو وتكوينه للعمل مع أنماط أكثر كفاءة.
ساس يوفر القدرة على استخدام المتغيرات ، ميكسينز ، التعشيش وغيرها من الوظائف التي تبسيط كبير وتسريع كتابة الأنماط. وبالإضافة إلى ذلك ، ساس يسمح لك لاستخدام بناء الجملة أكثر مرونة ومعبرة مقارنة كس العادية. وربط ساس لرمز فيسوال ستوديو تساعدك على جعل تطوير نمط أكثر إنتاجية ومريحة.
أولا ، تحتاج إلى تثبيت ملحق ساس لرمز فيسوال ستوديو. للقيام بذلك ، افتح قسم الإضافات في علامة التبويب شريط النشاط واكتب "ساس" في مربع البحث. انتقل إلى ملحق" ساس/أقل/سس " وانقر فوق تثبيت. بعد اكتمال التثبيت ، أعد تشغيل رمز الاستوديو المرئي.
- كيفية استخدام ساس في فيسوال ستوديو كود
- تثبيت التمديد ل ساس
- إنشاء مشروع جديد في كود الاستوديو المرئي
- إنشاء ملف نمط بامتداد .سس
- توصيل ملف نمط بمستند هتمل
- باستخدام وظائف المعالج والمتغيرات في ساس
- تجميع ساس إلى المغلق
- تجميع التلقائي من ساس عند حفظ ملف
- تصحيح الأخطاء والتحقق من الأنماط في كود الاستوديو المرئي
- سؤال وجواب
- ما هو ساس?
- لماذا استخدام ساس?
- كيف يمكنني توصيل ساس إلى رمز فيسوال ستوديو?
- كيف يمكنني تثبيت تمديد مترجم لايف ساس?
- كيف يمكنني تكوين الملف المصدر ساس في كود ستوديو البصرية?
- كيف يمكنني تشغيل تجميع ساس في البصرية ستوديو كود?
كيفية استخدام ساس في فيسوال ستوديو كود
ساس (أوراق الأنماط رهيبة نحويا) هي لغة تمديد كس التي تسمح لك لاستخدام المتغيرات والقواعد المتداخلة ، ميكسينز ، وأكثر من ذلك لكتابة أنماط صفحة ويب أكثر كفاءة وسهولة.
فيسوال ستوديو كود هو محرر نصوص خفيف الوزن وقوي يتمتع بقدرات واسعة لتطوير تطبيقات الويب. مع ذلك ، يمكنك بسهولة إعداد بيئة عمل للعمل مع ساس.
فيما يلي الخطوات التي تحتاج إلى اتباعها لاستخدام ساس في كود الاستوديو المرئي:
- تثبيت" لايف ساس مترجم " التمديد من فيسوال ستوديو كود السوق. هذا التمديد يسمح لك لتجميع ساس إلى كس في الوقت الحقيقي عند حفظ ملف.
- افتح مجلد المشروع في كود الاستوديو المرئي.
- إنشاء ملف جديد مع التمديد.سس وكتابة الأنماط الخاصة بك في ذلك في لغة ساس.
- افتح لوحة الأوامر (التي يطلق عليها اختصار لوحة المفاتيح كترل + شيفت + ف على ويندوز / لينكس أو كمد + شيفت + ف على ماك) واكتب " ساس: مشاهدة ساس " لتشغيل مترجم ساس. حدد هذا الخيار.
- سيظهر ملف جديد بالملحق في مساحة العمل.المغلق التي تحتوي على أنماط المترجمة من .ملف سس.
ملاحظة: يمكنك أيضا تكوين تجميع ساس إلى كس تلقائيا عند حفظ ملف عن طريق إضافة الإعداد المناسب في ملف الإعدادات.جسون فيسوال ستوديو كود.
الآن يمكنك استخدام ساس لتطوير الأنماط الخاصة بك في كود الاستوديو المرئي. ساس يسمح لك لكتابة رمز أنظف وأكثر تنظيما ، مما يجعل من الاسهل للحفاظ على والحجم.
استخدام ساس في فيسوال ستوديو كود سوف تساعدك على تحسين عملية التنمية وجعل أنماط تطبيق الويب الخاص بك أكثر مرونة وكفاءة.
تثبيت التمديد ل ساس
للعمل مع ساس في فيسوال ستوديو كود ، تحتاج إلى تثبيت التمديد المناسب. سوف تحتاج إلى اتباع الخطوات التالية:
- افتح رمز فيسوال ستوديو وانتقل إلى قسم" الإضافات " (أو اضغط كنترول+ شيفت + س).
- في شريط البحث ، اكتب " ساس "وحدد" لايف ساس مترجم "من مؤلف"ريتويك داي".
- انقر فوق الزر" تثبيت " لبدء تثبيت الامتداد.
- بعد اكتمال التثبيت ، انقر فوق الزر" إعادة تحميل " لإعادة تشغيل محرر كود فيسوال ستوديو.
بعد تثبيت" لايف ساس مترجم " التمديد ، سوف تكون على استعداد لاستخدام ساس في كود ستوديو البصرية. الخطوة التالية هي تكوين تجميع ملفات ساس في كس.
إنشاء مشروع جديد في كود الاستوديو المرئي
خطوات إنشاء مشروع جديد في كود الاستوديو المرئي:
- افتح رمز فيسوال ستوديو وانقر على زر" فتح مجلد " أو استخدم اختصار لوحة المفاتيح كترل + ك ، كترل+ س. حدد المجلد حيث سيتم وضع المشروع.
- إذا لم تكن هناك ملفات مشروع في المجلد المحدد ، فقم بإنشاء ملف جديد بالملحق ".أتش تي أم أل "أو".كس " (اعتمادا على نوع المشروع).
- توسيع وظائف كود فيسوال ستوديو عن طريق تثبيت ملحق ساس للعمل مع المعالج ساس. للقيام بذلك ، افتح قسم الإضافات عن طريق كتابة "ساس" في مربع البحث وتثبيت الامتداد المطلوب.
- افتح موجه الأوامر فيسوال ستوديو كود بالضغط كنترول + ` أو تحديد " عرض "- > "طرفية" - > "طرفية جديدة"
- في موجه الأوامر ، اكتب الأمر ساس ووتش الإدخال.إخراج سس.المغلق ، حيث " المدخلات.سس "هو ملف شفرة المصدر ساس ، و" الإخراج.كس " هو الملف الذي سيتم تجميع رمز ساس. اضغط على إدخال لتنفيذ الأمر.
- بعد تنفيذ الأمر ، سوف ساس تتبع التغييرات في الملف المصدر وترجمة تلقائيا إلى كس ، وتوفير التحديثات إلى ملف الإخراج.
- الآن يمكنك البدء في تطوير المشروع الخاص بك عن طريق إجراء تغييرات على الملف المصدر ساس. سيتم عرض جميع التغييرات تلقائيا في ملف كس وعلى صفحة الويب.
إنشاء مشروع جديد في فيسوال ستوديو كود مع ساس تمكين يجعل من السهل ومريحة لتطوير الأساليب باستخدام المعالج ساس. هذا يقلل من وقت التطوير ويحسن الإنتاجية.
إنشاء ملف نمط بامتداد .سس
عندما نقوم بتوصيل ساس إلى رمز فيسوال ستوديو ، يمكننا إنشاء ملف نمط مع التمديد.سس لاستخدام جميع ميزات هذا المعالج. إليك كيفية إنشاء ملف .ملف نمط سس:
افتح رمز الاستوديو المرئي.
قم بإنشاء ملف جديد بالنقر فوق الزر" إنشاء ملف "في اللوحة اليسرى أو استخدم اختصار لوحة المفاتيح"كترل + ن".
أدخل اسم الملف وأضف الامتداد".سس": على سبيل المثال ، " الأنماط.سس".
ابدأ في كتابة أنماطك بلغة ساس في الملف الذي تم إنشاؤه.
يرجى ملاحظة أن ملفات النمط لها امتداد.يستخدم سس بناء الجملة ساس ، حتى تتمكن من استخدام المتغيرات ، التعشيش ، وغيرها من ميزات المعالج.
بعد إنشاء ملف النمط .سس يمكنك البدء في العمل على المشروع الخاص بك عن طريق تطبيق أنماط لعناصر هتمل الخاص بك وتحقيق المظهر المطلوب من صفحة ويب.
توصيل ملف نمط بمستند هتمل
المستند ، ويسمح لك بتحديد المسار إلى ملف النمط.
مثال:
في هذا المثال ، ملف نمط يسمى " الأنماط.يقع " كس " في نفس الدليل مثل مستند هتمل ، وسيتم تطبيقه تلقائيا على هذا المستند عند تحميله في المتصفح.
إذا كان ملف النمط موجودا في دليل آخر ، فيجب عليك تحديد المسار إليه بالنسبة إلى موقع مستند هتمل.
مثال:
في هذا المثال ، ملف الأنماط " الأنماط.كس "يقع في دليل" كس " دليل واحد فوق موقع وثيقة هتمل.
يمكنك أيضا استخدام المسار المطلق لملف النمط عن طريق تحديد عنوان ورل الكامل.
مثال:
في هذا المثال ، ملف الأنماط " الأنماط.كس " يقع في "https://example.com/css /".
ربط ملف نمط يسمح لك لإضافة أنماط خارجية إلى وثيقة هتمل التي سيتم تطبيقها على جميع عناصر الصفحة ، وفقا لقواعد كس المحددة في الملف.
باستخدام وظائف المعالج والمتغيرات في ساس
مع ساس ، وظائف مختلفة قبل المعالج والمتغيرات يمكن استخدامها ، مما يسهل كثيرا من عملية التصميم ويزيد من كفاءتها.
واحدة من السمات الرئيسية ل ساس هو استخدام المتغيرات. عند الإعلان عن متغير ، يمكنك تعيين قيمة له واستخدام هذه القيمة في أماكن مختلفة من الأنماط الخاصة بك. على سبيل المثال:
- اللون الأساسي: # 0000;
- لون النص: #333333;
الجسم {
لون الخلفية:-اللون الأساسي;
اللون:-لون النص;
}
في هذا المثال ، تحتوي المتغيرات - اللون الأساسي و text لون النص-على قيم ألوان. ثم يتم استخدام هذه القيم في الأنماط لتعيين الخلفية ولون النص لعناصر الجسم.
بالإضافة إلى استخدام المتغيرات ، وظائف المعالج المسبق وتتوفر أيضا في ساس. تسمح لك وظائف المعالج المسبق بإجراء عمليات مختلفة على القيم أو الحصول على معلومات عنها. على سبيل المثال:
- حجم الخط: 14 بكسل;
ص {
حجم الخط: - حجم الخط;
ارتفاع الخط: احسب ارتفاع الخط (font حجم الخط) ؛ / / استدعاء وظيفة المعالج المسبق
}
@وظيفة حساب الخط الارتفاع (font حجم الخط) {
@العودة-حجم الخط * 1.5 ؛ / / إرجاع القيمة المحسوبة
}
في هذا المثال ، يتم استخدام وظيفة المعالج المسبق لارتفاع الخط ، والتي تأخذ وسيطة واحدة - حجم الخط وتعيد القيمة المحسوبة بناء على هذه الوسيطة. ثم يتم استخدام هذه القيمة لتعيين ارتفاع الصف من عناصر ص.
يمكن أن يؤدي استخدام وظائف ومتغيرات المعالج المسبق إلى تبسيط وتسريع عملية التصميم بشكل كبير ، حيث يسمح لك باستخدام نفس القيم والعمليات في أماكن مختلفة في الكود ، وكذلك تغيير هذه القيم والعمليات بسهولة عن طريق تغيير سطر واحد فقط من التعليمات البرمجية.
تجميع ساس إلى المغلق
تجميع ساس إلى كس هو عملية تحويل الملفات في شكل ساس (.سس أو .ساس) لملفات المغلق العادية. هذه العملية ضرورية حتى يتمكن المتصفح من تفسير الأنماط المكتوبة في ساس بشكل صحيح وعرض التصميم المرئي لصفحة الويب.
يمكن استخدام أدوات وبيئات التطوير المختلفة لتجميع ساس في كس. واحدة من الأدوات الشعبية هي فيسوال ستوديو كود ، محرر رمز قوي يدعم بناء جملة ساس ويسمح لك لتجميع ملفات ساس تلقائيا.
لإعداد تجميع ساس في كود فيسوال ستوديو ، اتبع الخطوات التالية:
- تثبيت" لايف ساس مترجم " التمديد من فيسوال ستوديو كود السوق.
- افتح الملف مع الامتداد.سس أو .ساس في كود الاستوديو المرئي.
- اضغط على السيطرة + مفتاح الجمع تحول + ص لفتح شريط الأوامر.
- اكتب "لايف ساس: ترجمة ساس" وحدد هذا الأمر من القائمة.
- انتظر بعض الوقت حتى يقوم الامتداد بتجميع ملف ساس في كس.
بشكل افتراضي ، سيتم إنشاء ملف كس المترجمة في نفس المجلد حيث يوجد ملف ساس الأصلي. ومع ذلك ، يمكنك أيضا تكوين المسار لحفظ الملف المترجم في إعدادات ملحق "لايف ساس مترجم".
:
بعد توصيل ملف كس ، سيستخدم المتصفح الأنماط منه لتصميم صفحة الويب المقابلة.
تجميع التلقائي من ساس عند حفظ ملف
واحدة من وظائف مريحة من ساس هو تجميع التلقائي من التعليمات البرمجية عند حفظ ملف. هذا يتجنب الحاجة إلى تشغيل التجميع يدويا في كل مرة ويبسط عملية تطوير النمط.
لإعداد تجميع ساس التلقائي عند حفظ ملف في رمز فيسوال ستوديو ، سوف تحتاج إلى تثبيت تمديد مترجم ساس الحية. سيسمح لك ذلك بتجميع ملفات ساس تلقائيا في كس عند الحفظ.
- افتح لوحة الامتدادات في فيسوال ستوديو كود بالنقر فوق الرمز بأربعة مربعات رأسية على الحافة اليسرى من النافذة.
- في شريط البحث ، اكتب "مترجم ساس لايف" وحدد الامتداد الذي يحمل نفس الاسم في قائمة النتائج.
- انقر فوق الزر" تثبيت " لتثبيت الامتداد.
- بعد تثبيت التمديد ، يجب أن تشاهد لوحة جديدة تسمى "لايف ساس مترجم" في الجزء السفلي من النافذة.
الآن بعد أن تم تثبيت التمديد ، تحتاج إلى تحديد المجلد حيث توجد ملفات ساس الخاص بك ، فضلا عن المجلد حيث يجب تجميع ملفات كس. للقيام بذلك ، اتبع الخطوات التالية:
- افتح ملف تكوين كود الاستوديو المرئي عن طريق تحديد خيارات من قائمة ملف.
- في نافذة الإعدادات التي تفتح ، ابحث عن قسم" إعدادات الملف "وحدد"الإعدادات".
- افتح الإعدادات.ملف جسون على الجانب الأيمن من النافذة.
],
"ليفيساسكومبيلي.الإعدادات.جينيراتماب": خطأ
}
- هنا "سافيباث" هو المسار إلى المجلد حيث سيتم تجميع ملفات كس. يمكنك تغيير هذا المسار وفقا لهيكل الدليل الخاص بك.
- احفظ ملف الإعدادات " الإعدادات.جسون".
- الآن تفعيل التمديد عن طريق النقر على زر "لايف ساس مترجم" في الجزء السفلي من النافذة. سيسمح لك ذلك بتجميع رمز ساس تلقائيا في كس في كل مرة تقوم فيها بحفظ ملف.
الآن ، عند حفظ ملف ساس ، فإن التمديد تجميعه في ملف كس المناسب وحفظه إلى المجلد الذي حددته. يمكنك مراقبة عملية التجميع في نافذة" لايف ساس مترجم " ، وأيضا الحصول على خيار لتعطيل تجميع التلقائي إذا لزم الأمر.
- وهكذا ، تجميع التلقائي من ساس عند حفظ ملف يسمح لك للعمل بشكل أكثر كفاءة على الأساليب وتجنب تكرار نفس النوع من الإجراءات.
- تصحيح الأخطاء والتحقق من الأنماط في كود الاستوديو المرئي
- واحدة من الأدوات الرئيسية لتطوير الأساليب في رمز فيسوال ستوديو هو مصحح كس ، والذي يسمح لك لإيجاد وإصلاح الأخطاء في رمز النمط.
لاستخدام مصحح كس في رمز فيسوال ستوديو ، تحتاج إلى تثبيت" كس نظرة خاطفة " التمديد ، الذي يضيف القدرة على التنقل من ملفات هتمل إلى رمز كس المقابلة والعكس بالعكس.
لفتح مصحح أخطاء كس في كود فيسوال ستوديو ، اتبع الخطوات التالية:
حدد العنصر في صفحة الويب التي تريد تصحيح أنماطها.
انقر بزر الماوس الأيمن وحدد" هناك مثل هذه الفئة أو المعرف " ؛ نافذة مع رمز كس يفتح ، والذي يعرض جميع الأنماط المطبقة على هذا العنصر.
يمكنك إجراء تغييرات على رمز النمط مباشرة في هذه النافذة ورؤية النتيجة على الفور على صفحة الويب.
أيضا ، فيسوال ستوديو كود لديها أدوات فحص نمط المتاحة لمساعدتك على التأكد من أن رمز نمط يتبع القواعد وأفضل الممارسات للتنمية. على سبيل المثال:
يتحقق مدقق كس المدمج من رمز أخطاء بناء الجملة ويحذر من المشاكل المحتملة.
ملحق ستايللينت يسمح لك لتكوين نمط التحقق باستخدام مجموعة من القواعد وأنماط كتابة التعليمات البرمجية.
يسمح لك ملحق" كسكومب " بتهيئة رمز النمط تلقائيا وفقا للمعايير المحددة.
باستخدام هذه الأدوات ، يمكنك تسهيل التصحيح والتحقق من النمط في كود فيسوال ستوديو ، مما سيساعد على تحسين جودة التعليمات البرمجية الخاصة بك وتسريع عملية التطوير.
سؤال وجواب
ما هو ساس?
ساس (ستايلشيتس رهيبة نحويا) هي لغة تمديد كس التي توفر العديد من الميزات والراحة عند كتابة أنماط لمواقع الويب أو التطبيقات.
لماذا استخدام ساس?