السلام عليكم ورحمه الله

أنا من عشاق Sass & Compass وأحب قرأة ومعرفة الجديد وكل ما يخص هذة التكنولوجيا لتحسين المستوى الشخصى فى البرمجة, وبفضل الله ترجمت هذا الموضع ليستفيد غيرى مثل ما إستفدت.

المتغيرات في Sass هي وسيلة قوية لتحديد القيم في مكان واحد والتي يمكن استخدامها في أماكن متعددة خلال العمل فى مشروعك.

المتغيرات تسمح لك لإجراء تغييرات من نقطة مركزية دون الحاجة إلى استخدام البحث والاستبدال عبر الملفات المتعددة.

ولكن من الصعب اختيار أسماء جيدة لهذة المتغيرات !

إذا لم تتوخى الحذر فى أسماء المتغيرات، فإنه من السهل جدا ان تنسى، وتفقد السيطرة على المتغيرات.

ومع ذلك، من خلال اتباع بعض الإرشادات البسيطة يمكنك الحفاظ على السيطرة ... والتحكم فى إطار العمل الخاص بك!

إستخدم أسماء دلالية للمتغيرات (semantic variable names)

تخيل للحظة أن لون العلامة التجارية الأساسية للعميل هو اللون الأحمر، فسميت أنت المتغير red$. وبعد ستة أشهر قرر قسم التسويق بإعادة تصميم لون العلامة التجارية للشركة الأساسي للون الأزرق بدلاً من الأحمر.

تغيير قيمة red$ من السهل بما فيه الكفاية، ولكن المتغير لا يحتوي على وصف من الغرض المقصود منه.

بدلاً من وصف ما المتغير يشبه في الاسم، إصف وظيفته أو الغرض منة. وبعبارة أخرى، في محاولة لاختيار الأسماء الدلالية للمتغيرات الخاصة بك.

// مثل سىء
$red: red;
$yellow: yellow;

// مثل أفضل
$brand-color: red;
$accent-color: yellow;

الإعتماد على إتفاقية تبادل مفيدة (useful conventions)

من المهم أن تأتي مع بعض الإتفاقيات جيدة التسمية للمتغيرات الخاصة بك بحيث تكون سهلة التذكر. على سبيل المثال، يمكنك تسمية الألوان كالأتى -color:

// الألوان الأساية
$base-color: #333;
$brand-color: red;
$brand-80-color: rgba($color-brand, 0.8);
$accent-color: yellow;

أو، إضافة أقسام مثل -header أو -footer لأقسام محددة:

// Header
$header-height: 100px;
$header-background-color: $color-brand;

// Footer
$footer-height: 200px;
$footer-background-color: #aaa;

الحفاظ على مركزية التكوين (config)

افضل بوضع كل متغيراتى فى ملف واحد تحت إسم _config.scss , واستخدام import@ لتوجيهه وبهذه الطريقة، فإن كل الملفات الأخرى يمكنها الوصول إلى هذه المتغيرات.

مرجع

الناشر - iFrankZA@

تمت الترجمه - ElmahdiMahmoud@