ما هو ساس؟ تعرف على كيفية استخدام لغة امتداد CSS هذه

أوراق الأنماط الرائعة من الناحية النحوية (Sass) هي لغة امتدادات CSS شائعة. اللغة موجودة منذ حوالي 15 عامًا. إنه يعمل جيدًا مع كل إصدار من CSS ، مما يجعله متوافقًا مع كل مكتبة وإطار عمل لـ CSS ، من Bootstrap إلى Foundation.

تتيح لك اللغة كتابة كود Sass ثم ترجمة هذا الرمز في CSS. تكمن قيمة استخدام Sass بدلاً من CSS العادي في أنه يوفر ميزات إضافية خارج نطاق CSS حاليًا.

في هذا البرنامج التعليمي ، ستتعلم كيفية استخدام Sass وأهم ميزاته.

تركيب ساس

هناك عدة طرق لاستخدام Sass على جهازك. يتضمن ذلك تشغيل تطبيق (مثل LiveReload أو Scout-App) أو التنزيل ساس من جيثبأو تثبيته باستخدام npm.

تثبيت برنامج Sass مع npm

لتثبيت Sass باستخدام npm ، ستحتاج إلى تثبيت NodeJS و npm على جهازك. ثم ستحتاج إلى إنشاء ملف package.json ملف (وهي ممارسة جيدة عند تثبيت أي حزمة npm في مشاريعك). يمكنك إنشاء ملف package.json ملف في دليل المشروع الخاص بك باستخدام الأمر الطرفي التالي:

npm الحرف الأول

سيؤدي تنفيذ هذا الأمر إلى إنشاء ملف package.json بالمحتوى التالي:

{
 "الاسم": "my_app"،
 "الإصدار": "1.0.0"،
 "وصف": ""،
 "main": "index.js"،
 "نصوص": {





instagram viewer


 "اختبار": "صدى \" خطأ: لم يتم تحديد اختبار \ "&& خروج 1"
 },
 "الكلمات الدالة": []،
 "مؤلف": ""،
 "ترخيص": "ISC"
}

ال package.json الملف مهم لأنه يعمل كتكوين لمشروعك. في كل مرة تقوم فيها بتثبيت حزمة npm جديدة ، يكون ملف package.json الملف سوف يعكس هذا.

يمكنك الآن تثبيت Sass عن طريق إدخال الأمر التالي في جهازك الطرفي:

npm تثبيت sass

سيقوم هذا الأمر بتحديث ملف package.json ملف عن طريق إنشاء ملف مجال التبعية، والتي ستحتوي على حزمة Sass الجديدة. كما أنه سيولد ملفًا جديدًا الحزمة-lock.json ملف وتثبيت sass (بالإضافة إلى التبعيات) في ملف node_modules الدليل.

الأنواع المختلفة لملف Sass

يمكن أن يحتوي ملف Sass على أحد الامتدادات اثنين ، .sass أو .scss. الفرق الرئيسي بينهما هو أن ملف .scss يستخدم الملف الأقواس المتعرجة والفاصلة المنقوطة (مثل CSS) ، بينما يستخدم ملف .sass هياكل الملفات CSS باستخدام المسافة البادئة (مثل Python). يفضل بعض المطورين استخدام ملحق .scss ملف لأن هيكله أقرب إلى CSS.

مثال على ملف .scss

اللون الأساسي $: أزرق؛
الجسم {
 اللون: $ اللون الأساسي ؛
 ص {
 لون احمر؛
 }
}

مثال على ملف .sass

اللون الأساسي $: أزرق
الجسم
 اللون: اللون الأساسي $
 ص
 لون احمر

تجميع ملف Sass إلى CSS

يمكنك تجميع ملف Sass فردي باستخدام امتداد ساس برنامج سطر الأوامر:

sass file.scss> file.css

يمكنك أيضًا تشغيل sass عبر جميع الملفات داخل دليل معين:

sass scss: dist / css /

يقوم هذا الأمر بتجميع جميع ملفات Sass داخل ملف scss الدليل ويخزن الملفات الناتجة بتنسيق dist / المغلق.

إذا كنت تستخدم npm ، فيمكنك إعداد اختصار مناسب لتجميع sass باستخدام ملف نصوص مجال في الخاص بك package.json ملف:

"نصوص": {
 "اختبار": "صدى \" خطأ: لم يتم تحديد اختبار \ "&& خروج 1" ،
 "sass": "sass --watch scss: dist / css /"
 },

يستخدم هذا التكوين ملف --راقب اختيار. إنها تحافظ على تشغيل sass وتضمن إعادة تجميع تلك الملفات متى تغيرت. لكل ملف ، سيقوم sass بإنشاء ملف .css و أ .css.map ملف.

لتنفيذ نص Sass أعلاه ، ستحتاج إلى تنفيذ الأمر التالي في جهازك الطرفي:

npm تشغيل ساس

سيؤدي تشغيل هذا الأمر إلى إنشاء مخرجات مشابهة لما يلي:

> [email protected] sass C: \ Users \ kadeisha \ Documents \ my_app
> sass --watch scss: dist / css /
تجميع scss \ main.scss إلى dist \ css \ main.css.
ساس يراقب التغييرات. اضغط على Ctrl-C للتوقف.

متغيرات ساس

يمكنك إنشاء متغيرات في CSS اليوم ، ولكن منذ 15 عامًا لم تكن متغيرات CSS موجودة ، لذا كان دعم Sass لها ذا قيمة. تعمل متغيرات Sass بنفس الطريقة التي تعمل بها متغيرات CSS. يقومون بتخزين القيم (مثل الألوان) التي تنوي استخدامها في ملف CSS. تتمثل إحدى الفوائد الرئيسية للمتغيرات في أنها تسمح لك بتحديث العديد من تكرارات القيمة عن طريق تغييرها في مكان واحد فقط.

يبدأ كل متغير Sass بعلامة الدولار ، متبوعة بأي مجموعة من الأحرف. حاول أن تجعل متغيراتك وصفية ، مثل $ اللون الأساسي المثال أعلاه. من المهم ملاحظة أن متغير Sass لا يتم تجميعه في متغيرات CSS. على سبيل المثال ، ملف .scss هذا:

اللون الأساسي $: أزرق؛
الجسم {
 اللون: $ اللون الأساسي ؛
}

سيتم تجميعها إلى CSS التالية:

الجسم {
 لون أزرق؛
}

كما ترى من الملف أعلاه ، لا توجد متغيرات CSS. ميزة المتغيرات هي أن أي تعديل يتم إجراؤه على ملف Sass سيؤدي إلى تحديث ملف CSS المقابل.

ميكس ساس

إذا كانت لديك خاصية واحدة ترغب في استخدامها عدة مرات خلال مشروعك ، فإن المتغير يكون رائعًا. ولكن إذا كان لديك مجموعة من الخصائص التي ترغب في استخدامها كوحدة واحدة ، فإن mixin سيفي بالغرض.

كل مزيج يبدأ بـ تضمين التغريدة الكلمة الرئيسية ، متبوعة بالاسم الذي تريد تعيينه إلى mixin. لديك خيار تمرير المتغيرات إلى mixin كمعلمات واستخدام تلك المتغيرات داخل جسم mixin ، بنفس طريقة الوظيفة.

باستخدام Mixin

mixin light-theme ($ Primary-color: white، $ second-color: # 2c2c2c) {
 عائلة الخطوط: 'Franklin Gothic Medium'، 'Arial Narrow'، Arial، sans-serif؛
 لون الخلفية: $ اللون الأساسي ؛
 اللون: اللون الثانوي $ ؛
}
#الصفحة الرئيسية {
 تضمين @ موضوع الضوء (أزرق) ؛
}

أول شيء قد تلاحظه في الكود أعلاه هو أن mixin يقبل وسيطين. يمكنك تعيين قيم افتراضية للوسيطات وتجاوزها عند تضمينها.

بعد إنشاء مزيجك ، يمكنك استخدامه في أي قسم على موقع الويب الخاص بك باستخدام ملف @تتضمن الكلمة الأساسية متبوعة باسم المزيج.

سيؤدي تجميع كود Sass أعلاه إلى إنشاء كود CSS التالي في ملف الوجهة الخاص بك:

#الصفحة الرئيسية {
 عائلة الخطوط: "Franklin Gothic Medium"، "Arial Narrow"، Arial، sans-serif؛
 لون الخلفية: أزرق ؛
 اللون: # 2c2c2c ؛
}

وظائف ساس

بصرف النظر عن الكلمات الرئيسية المختلفة ، فإن الاختلاف الرئيسي بين الوظيفة و mixin هو أن الدالة يجب أن تُرجع شيئًا ما. يمكنك استخدام وظائف Sass لحساب القيم أو إجراء عمليات.

function add-numbers ($ num-one، $ num-two) {
 المجموع بالدولار: 0 ؛
 المجموع: $ num-one + $ num-two ؛
 return $ sum 
}

تقبل هذه الوظيفة أعلاه رقمين وترجع مجموعهما. يمكن أن تحتوي دوال Sass حتى على عبارات if و for loops وبيانات تدفق التحكم الأخرى.

وحدات ساس

إذا كان عليك تضمين جميع المتغيرات والمزج والوظائف في نفس الملف ، فسيكون لديك ملف Sass ضخم عند إنشاء تطبيقات كبيرة. توفر الوحدات النمطية طريقة لتقسيم الملفات الكبيرة إلى ملفات أصغر يجمعها sass أثناء التجميع. على سبيل المثال ، يمكن أن يكون لديك وحدة دالة ووحدة mixin ، كل ما تحتاج إلى تذكره هو ملف @استعمال كلمة رئيسية.

إليك مثال يوضح كيف يمكنك فصل مزيج المزيج السابق في ملف خاص به:

ملف mixins.scss

mixin light-theme ($ Primary-color: white، $ second-color: # 2c2c2c) {
 عائلة الخطوط: 'Franklin Gothic Medium'، 'Arial Narrow'، Arial، sans-serif؛
 لون الخلفية: $ اللون الأساسي ؛
 اللون: اللون الثانوي $ ؛
}

ملف main.scss

@ استخدام "mixins" ؛
#الصفحة الرئيسية{
 تضمين mixins.light-theme ؛
}

لاستيراد ملف خارجي واستخدامه كوحدة نمطية ، ستحتاج إلى استخدام ملحق @استعمال الكلمة الأساسية لاستيرادها. بعد ذلك ، لاستخدام مزيج معين من الملف المستورد ، ابدأ اسم mixin المحدد باسم الملف متبوعًا بنقطة. سيؤدي تجميع الملفات أعلاه إلى إنشاء رمز CSS التالي:

#الصفحة الرئيسية {
 عائلة الخطوط: "Franklin Gothic Medium"، "Arial Narrow"، Arial، sans-serif؛
 لون الخلفية: أبيض؛
 اللون: # 2c2c2c ؛
}

استخدم Sass لتوسيع وتنظيم CSS

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

تعلمك هذه المقالة كيفية تثبيت واستخدام Sass. لقد تعلمت كيفية إنشاء متغيرات ومزج ووظائف ووحدات Sass. الآن كل ما تبقى لك هو إنشاء مستند HTML ومشاهدة كود Sass وهو ينبض بالحياة.

8 نصائح وحيل أساسية لـ CSS يجب على كل مطور معرفتها

اقرأ التالي

عن المؤلف