مقدمة عن القوائم Lists في SASS
تُعتبر القوائم في SASS واحدة من أهم البُنى البيانية التي تُستخدم لتمثيل مجموعة من القيم المرتبة. تُمكنك القوائم من تخزين العديد من العناصر داخل متغير واحد، مما يُسهل التعامل مع البيانات بكفاءة. يمكن أن تحتوي القوائم على أنواع متعددة من البيانات مثل الأرقام، السلاسل النصية، والألوان. يتم تعريف القوائم باستخدام الفواصل (,) أو المسافات، ويمكنك الوصول إلى العناصر باستخدام الدوال المدمجة في SASS.
$my-list: 10px 20px 30px 40px;في هذا المثال، تم تعريف قائمة تحتوي على أربعة قيم. يُمكنك استخدام هذه القيم في أنماط CSS بتكرارها أو تغييرها حسب الحاجة. تتيح لك SASS العديد من الدوال للتعامل مع القوائم مثل `nth` لاختيار عنصر معين، و`join` لدمج قائمتين معًا.
التعامل مع الخرائط Maps في SASS
تُعد الخرائط في SASS هيكلة بيانات مُشابهة للكائنات في جافا سكريبت أو القواميس في بايثون، حيث تُخزن البيانات كأزواج من المفتاح والقيمة. تُستخدم الخرائط بكثرة في SASS لتنظيم البيانات المعقدة بشكل سهل ومرن. يُمكنك استخدام الخرائط لتخزين أزواج من الألوان، أو إعدادات التصميم المختلفة، ويمكنك الوصول إلى القيم باستخدام المفاتيح الخاصة بها.
$theme-colors: (
\"primary\": #007bff,
\"secondary\": #6c757d,
\"success\": #28a745
);في المثال أعلاه، تم تعريف خريطة تحتوي على ألوان مختلفة يمكن استخدامها في تصميم الموقع. للوصول إلى قيمة معينة، يمكنك استخدام الدالة `map-get` مع المفتاح المطلوب. توفر SASS دوال أخرى مثل `map-merge` لدمج خرائط متعددة و`map-remove` لحذف عنصر من الخريطة.
استخدام القوائم والخرائط في التنسيق المتقدم
يُمكن دمج القوائم والخرائط معاً لتحقيق تنسيقات معقدة ومتقدمة في مشاريع تصميم الويب. على سبيل المثال، يمكنك استخدام القوائم لتعريف مقاسات متعددة واستدعاء هذه القيم داخل خريطة تحتوي على إعدادات التصميم لكل عنصر. هذا يُساعد في الحفاظ على تنظيم أكواد SASS وجعلها أكثر قابلية للصيانة.
$spacing-sizes: 5px 10px 15px;
$layout-settings: (
\"header-height\": 60px,
\"footer-height\": 40px,
\"gutter\": nth($spacing-sizes, 2)
);في هذا المثال، تم استخدام القائمة لتعريف مقاسات التباعد، وتم دمجها داخل خريطة تُحدد إعدادات التصميم مثل ارتفاع الترويسة والتذييل، واستخدام قيمة معينة من القائمة كقيمة للـ ‘gutter’. هذه الطريقة تُمكنك من تعديل القيم بسهولة دون الحاجة لتغيير العديد من الأسطر في أكواد CSS.