دوال Sass وتدفق التحكم
اكتب منطق CSS ديناميكيًا باستخدام دوال Sass المضمنة وتوجيهات @if و@each و@for.
دوال Sass وتدفق التحكم درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
الدوال المضمنة في Sass
يوفر Sass العديد من الدوال المضمنة لمعالجة الألوان والرياضيات وعمليات السلاسل النصية وغير ذلك. وتُنفّذ هذه الدوال أثناء التجميع.
<div class="darker">darken($base, 15%)</div>
<div class="lighter">lighten($base, 15%)</div>
<div class="faded">transparentize($base, 0.5)</div>
<div class="mixed">mix($base, white, 60%)</div>
دوال الألوان
أهم دوال الألوان في Sass:
darken($color, $amount)lighten($color, $amount)saturate($color, $amount)mix($color1, $color2, $weight)rgba($color, $alpha)color.scale($color, $lightness: 20%)
دوال مخصصة باستخدام @function
عرّفوا دوال قابلة لإعادة الاستخدام تعيد قيمًا، وليس قواعد CSS:
<h2 class="heading">Heading (2rem)</h2>
<p class="body">Body text (1.125rem)</p>
تدفق التحكم @if @else
أنتجوا CSS بشكل شرطي استنادًا إلى قيم المتغيرات:
<p class="text-large">Large text variant</p>
<p class="text-small">Small text variant</p>
<p class="text-default">Default text variant</p>
حلقة @each
كرّروا على قائمة أو خريطة لإنشاء عدة قواعد:
<button class="btn-primary">Primary</button>
<button class="btn-danger">Danger</button>
<button class="btn-success">Success</button>
حلقة @for
أنشئوا CSS لنطاق من القيم:
<div class="col-1">col-1 (20%)</div>
<div class="col-2">col-2 (40%)</div>
<div class="col-3">col-3 (60%)</div>
<div class="col-4">col-4 (80%)</div>
<div class="col-5">col-5 (100%)</div>
حلقة @while
كرّروا ما دام الشرط صحيحًا. استخدموها باعتدال، إذ تغطي @each و@for معظم الحالات:
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
خرائط Sass
الخرائط هي هياكل بيانات تتكون من أزواج مفتاح-قيمة في Sass:
<div class="box">Responsive box (resize wider than 768px to see color change)</div>
@error @warn @debug
يوفر Sass ثلاث دوال تشخيصية:
@error: يوقف التجميع مع عرض رسالة@warn: يسجّل تحذيرًا دون إيقاف التجميع@debug: يسجّل قيمة أثناء التطوير
الاستيفاء #{...}
استخدموا #{$variable} لإدراج قيم المتغيرات داخل المحددات أو أسماء الخصائص أو الاستعلامات الوسائطية:
<p class="element">Interpolated property (#{$property})</p>
تحقق سريع
ما الفرق بين @mixin و@function في Sass؟
مراجعة
تتيح دوال الألوان المضمّنة في Sass، مثل darken وlighten وmix، معالجة الألوان وقت الترجمة. تُرجع @function مخصّصة قيمةً محسوبة. تضيف @if/@else إخراجًا شرطيًا. تكرّر @each على القوائم والخرائط. تكرّر @for على نطاقات الأرقام. تتيح هذه الميزات إنشاء أوراق أنماط قوية وفق مبدأ DRY، مع أقل قدر من التكرار.
الأسئلة الشائعة
هل درس «دوال Sass وتدفق التحكم» مجاني؟
نعم — نص درس «دوال Sass وتدفق التحكم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «دوال Sass وتدفق التحكم»؟
اكتب منطق CSS ديناميكيًا باستخدام دوال Sass المضمنة وتوجيهات @if و@each و@for. تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «دوال Sass وتدفق التحكم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- المتغيرات والتداخل والملفات الجزئية
- Mixins وIncludes
- محددات Extend وPlaceholder
- دوال Sass وتدفق التحكم