الخلاطات (Mixins) في SASS
تشرح هذه المقالة الخلاطات في SASS۔
سنشرح الخلاطات في SASS باستخدام أمثلة عملية۔
YouTube Video
الخلاطات (Mixins) في SASS
نظرة عامة – ما هو الخلاط (Mixin)؟
المزجيات (Mixins) هي آلية تتيح لك تعريف مجموعات من خصائص الأنماط الشائعة الاستخدام كدوال قابلة لإعادة الاستخدام، والتي يمكنك استدعاؤها في أي مكان تحتاج إليه۔ هي مفيدة جداً للحفاظ على كود CSS الخاص بك ومجموعة الخصائص متوافقة مع مبدأ DRY (لا تكرر نفسك)۔
مثال: أبسط خلاط
فيما يلي مثال بسيط لخلاط يعيد استخدام خصائص border-radius و box-shadow معاً۔ من خلال استدعاء هذا الخلاط، يمكنك تطبيق نفس المظهر على عدة عناصر۔
1// Simple mixin that applies border-radius and box-shadow
2@mixin card-style {
3 border-radius: 8px;
4 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
5 background: #fff;
6}
7
8.card {
9 @include card-style;
10 padding: 1rem;
11}- مع هذا الخلاط، لن تحتاج إلى تكرار الأنماط بشكل مباشر۔
- استدعائه يتطلب سطرًا واحدًا فقط:
@include card-style;۔
الخلاطات التي تحتوي على معلمات (Arguments)
يمكن للخلاطات قبول معلمات، تمامًا مثل الدوال۔ هذا يتيح لك تغيير المظهر بنفس المنطق۔ التالي مثال حيث يتم أخذ اللون كمُعامل۔
1// Mixin with parameters: accepts a color and optional radius
2@mixin colored-box($bg-color, $radius: 4px) {
3 background-color: $bg-color;
4 border-radius: $radius;
5 padding: 0.75rem;
6}
7
8.box-primary {
9 @include colored-box(#007acc);
10}
11
12.box-custom {
13 @include colored-box(#ffcc00, 12px);
14}- من خلال توفير قيمة افتراضية، يمكنك التحكم في السلوك عند تجاهل مُعامل ما۔
- في هذا المثال، يُستخدم نصف القطر الافتراضي ويتم فقط تجاوز لون الخلفية۔
حالات استخدام المعاملات المتغيرة (...)
عندما تريد قبول قيم متعددة، يمكنك استخدام المعاملات المتغيرة ($args...)۔ هذا مفيد لإنشاء الفئات المساعدة أو تمرير قوائم احتياطية۔
إنه مفيد عندما تحتاج إلى تمرير عدة عائلات خطوط أو عدة قيم ظل۔
1// Mixin that accepts variable arguments and forwards them to box-shadow
2@mixin multi-shadow($shadows...) {
3 box-shadow: $shadows;
4}
5
6.panel {
7 @include multi-shadow(0 2px 4px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.06));
8}- على جهة الاستدعاء، يمكنك تمرير عدة ظلال مفصولة بفواصل۔
- بهذه الطريقة، يمكنك استخدام نفس الخلاط للظلال البسيطة والمعقدة معًا۔
الخلاطات مع @content — استقبال كتلة أنماط
مع @content، يمكن للخلاط استقبال كتلة من الأنماط من الجهة المستدعية۔ هذا يمكّن الخلاط من توفير إطار مشترك، بينما يحدد المستدعي التفاصيل الداخلية۔
1// Mixin that sets up a responsive container and yields to caller via @content
2@mixin responsive-container($max-width: 1200px) {
3 margin-left: auto;
4 margin-right: auto;
5 padding-left: 1rem;
6 padding-right: 1rem;
7 max-width: $max-width;
8
9 @content; // place where caller's styles are inserted
10}
11
12.header {
13 @include responsive-container(1000px) {
14 display: flex;
15 align-items: center;
16 justify-content: space-between;
17 }
18}- على جهة الاستدعاء، يمكنك إضافة كتلة إلى
@includeلإدخال الأنماط بالداخل۔ - هذا النمط مفيد لأطر التخطيط مثل الشبكات (grids)، البطاقات (cards)، والنماذج (forms)۔
خلاطات متقدمة باستخدام الشروط والحلقات
يمكن استخدام تراكيب التحكم مثل @if و@for داخل الخلاطات۔ يمكنك استخدام ذلك لأتمتة إنشاء الفئات المساعدة وجمع إعدادات الاستجابة۔
فيما يلي مثال على إنشاء فئات العرض المساعدة تلقائيًا۔
1@use 'sass:math';
2
3// Mixin that generates width utility classes from a list of fractions
4@mixin generate-widths($fractions) {
5 @each $name, $fraction in $fractions {
6 .w-#{$name} {
7 width: math.percentage($fraction);
8 }
9 }
10}
11
12$widths: (
13 '1-4': 0.25,
14 '1-3': 0.3333,
15 '1-2': 0.5,
16 '3-4': 0.75
17);
18
19@include generate-widths($widths);- من خلال تمرير خريطة الكسور التي ترغب في إنشائها فقط أثناء الاستدعاء، يمكنك توليد جميع الأصناف المساعدة المناسبة تلقائيًا دفعة واحدة۔
- يساعدك استخدام هذا الأسلوب على تقليل تعريف الأنماط يدويًا، مع الحفاظ على التناسق في التصميم الخاص بك۔
الخلاطات مقابل المعرفات الوهمية (%placeholder)
بينما تقوم المزجيات بإدراج مجموعة من الخصائص مباشرةً، تُستخدم العناصر النائبة (placeholders) مع @extend عند وراثة الأنماط۔ قد تؤدي المزجيات إلى توليد شفرة CSS مكررة في بعض الحالات، بينما يمكن أن ينتج عن استخدام @extend شفرة CSS أكثر إحكاماً في أوضاع معينة۔
من خلال فهم الأهداف والاختلافات في شفرة CSS الناتجة عن كل طريقة، ستكون قادرًا على اختيار النهج الأنسب۔
1// Placeholder example (for comparison)
2%btn-base {
3 display: inline-block;
4 padding: 0.5rem 1rem;
5 border-radius: 4px;
6}
7
8.btn-primary {
9 @extend %btn-base;
10 background: #007acc;
11 color: #fff;
12}
13
14.btn-secondary {
15 @extend %btn-base;
16 background: #e0e0e0;
17}- عند استخدام
@extendمع عنصر نائب، يمكن دمج عدة محددات في قاعدة واحدة، مما ينتج شفرة CSS أكثر إحكامًا۔ - من ناحية أخرى، وبما أن المزجيات تُدرج الخصائص مباشرة في المكان المطلوب، فهي توفر مرونة وتساعد في تجنب دمج المحددات غير المقصود۔
أنماط عملية شائعة (الاستجابة، البوادئ الخاصة بالمتصفح، إلخ)
في التطبيق العملي، من المفيد وضع عمليات شائعة مثل البوادئ الخاصة بالمتصفح وخصائص الاستجابة داخل الخلاطات۔ فيما يلي مثال يجمع خصائص التحويل (transform) مع البوادئ۔ يمكنك توحيد الشيفرة لدعم توافق المتصفحات، مما يسهل الصيانة۔
1// Mixin for transform with vendor prefixes
2@mixin transform($value) {
3 -webkit-transform: $value;
4 -ms-transform: $value;
5 transform: $value;
6}
7
8.icon-rotate {
9 @include transform(rotate(45deg));
10}- الاستخدام بسيط ويمكنك استعماله في أي مكان، مثل:
@include transform(rotate(10deg));۔ - حتى إذا أصبحت البوادئ (prefixes) غير ضرورية في المستقبل، تصبح الصيانة أسهل لأن تحديث المزجية سينعكس في جميع أنحاء قاعدة الشيفرة الخاصة بك۔
مثال عملي: دمج البطاقات مع الأزرار
فيما يلي مثال حيث تم توحيد أنماط الأزرار المستخدمة داخل البطاقة مع mixin، مما يسمح بتغييرها وفقًا للون السمة۔
هذا ينظم نمط 'البطاقة + الزر' الشائع باستخدام الخلاطات۔
1// Simple mixin that applies border-radius and box-shadow
2@mixin card-style {
3 border-radius: 8px;
4 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
5 background: #fff;
6}
7
8// Mixin for transform with vendor prefixes
9@mixin transform($value) {
10 -webkit-transform: $value;
11 -ms-transform: $value;
12 transform: $value;
13}
14
15// Button mixin with theme and size parameters
16@mixin btn($bg, $color: #fff, $padding: 0.5rem 1rem) {
17 display: inline-block;
18 padding: $padding;
19 background: $bg;
20 color: $color;
21 border-radius: 6px;
22 text-decoration: none;
23 cursor: pointer;
24 @include transform(translateY(0)); // reuse earlier transform mixin
25}
26
27// Card mixin that accepts inner button styling via @content
28@mixin card($gap: 1rem) {
29 @include card-style; // reuse earlier card-style mixin
30 padding: $gap;
31 @content;
32}
33
34.card-feature {
35 @include card {
36 .title { font-size: 1.125rem; margin-bottom: 0.5rem; }
37 .cta {
38 @include btn(#007acc);
39 }
40 }
41}
42
43.card-warning {
44 @include card {
45 .title { font-weight: bold; }
46 .cta {
47 @include btn(#ff6600);
48 }
49 }
50}- باستخدام هذه الخلاطات، يمكنك كتابة المكونات بشكل مختصر۔
انتبه للأداء وCSS الناتج
نظرًا لأن الخلاطات تدرج الخصائص في كل مرة تُستدعى فيها، فإن الاستخدام المكثف لـ@include لنفس القاعدة قد يجعل CSS النهائي أكبر حجمًا۔ يمكنك تحسين ذلك بدمجها مع المعرفات الوهمية وتصميم المكونات حسب الحاجة۔
علاوة على ذلك، فإن التدابير التالية فعالة أيضًا۔
- يجب تحويل الأنماط المستخدمة بشكل متكرر إلى فئات لإعادة استخدامها۔
- يجب تجميع الأنماط الشائعة باستخدام
@content۔ - يجب إنشاء الأدوات المعقدة فقط عند وقت البناء (build time)۔
نصائح لتصحيح الأخطاء بسهولة أكبر
عند استخدام mixins، من المهم أيضًا ابتكار طرق لتحسين التصحيح وسهولة الصيانة۔ من خلال استخدام أسماء متغيرات واضحة وإضافة تعليقات داخل المزجيات، سيكون فهم الشيفرة أسهل عند مراجعتها لاحقًا۔ أيضًا، إذا أصبحت الوظائف معقدة، فإن تقسيم الـ mixin إلى وحدات أصغر يسهل الاختبار ويحسن القابلية للصيانة۔
بالإضافة إلى ذلك، تفعيل خرائط المصدر (source maps) يسمح بتتبع أي mixin قام بإنشاء أي CSS، مما يسهل عزل المشكلات۔
فيما يلي مثال لـ mixin سهل الفهم مع تعليقات توثيقية۔
1// Example: readable mixin with clear param names and comments
2/// Adds a subtle focus ring for accessibility
3/// $color - ring color
4/// $size - thickness of the ring
5@mixin focus-ring($color: #007acc, $size: 2px) {
6 outline: none;
7 box-shadow: 0 0 0 $size rgba(blue($color), 0.15);
8}- وجود تعليقات توثيقية منظمة بهذا الشكل يجعل من الأسهل مشاركتها وفهمها داخل الفريق۔
- نظرًا لأن تعليقات توثيق SASS يمكن استخراجها تلقائيًا باستخدام الأدوات المتوافقة، فهي مفيدة أيضًا لإنشاء مستندات مثل أدلة الأنماط (style guides)۔
الملخص
نظرًا لأن الخلاطات تسمح لك بتجميع الأنماط الشائعة للاستخدام المتكرر، فإنها تساعد في تقليل التكرار وتحسين قابلية الصيانة۔ أيضًا، عندما تشترك عدة محددات في نفس القواعد، فكر في استخدام ليس فقط الخلاطات بل أيضًا @extend (المعرفات الوهمية)۔ علاوة على ذلك، بينما يسمح @content بفصل أطر التخطيط والمحتويات بشكل مرن، فإن الإفراط في استخدام @include قد يؤدي إلى تضخم CSS الناتج، لذا يُنصح بالحذر۔ من المهم الاستفادة الكاملة من المعاملات والقيم الافتراضية والمعاملات المتغيرة لتصميم خلاطات عامة وسهلة التوسيع۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔