العوامل في SASS

تشرح هذه المقالة العوامل في SASS۔

سنشرح العوامل في SASS مع أمثلة عملية۔

YouTube Video

العوامل في SASS

تشمل عوامل SASS العمليات العددية، وعمليات المقارنة، والعمليات المنطقية، ومعالجات السلاسل النصية.۔

العمليات الحسابية (الجمع، الطرح، الضرب، القسمة، باقي القسمة)

يدعم SASS العمليات الحسابية القياسية، لكن القسمة / مربكة مع / في CSS، لذا يُنصح باستخدام math.div()۔ يمكن أن تحتوي الأرقام على وحدات، ولا يمكن إجراء العمليات إلا بين الوحدات المتوافقة.۔

فيما يلي أمثلة على العمليات الحسابية البسيطة واستخدام وحدة math.۔

 1@use "sass:math";
 2
 3$base: 16px;
 4$gutter: 8px;
 5
 6/* Addition and multiplication (allowed since both units are px) */
 7.container {
 8  width: $base + $gutter * 3; // -> 40px
 9}
10
11/* Use math.div() for division (/ is deprecated and triggers a warning) */
12.half {
13  padding: math.div($base, 2); // -> 8px
14}

• هذا الكود مثال على الجمع والضرب بوحدة px، والقسمة باستخدام math.div().۔
• الوحدات غير المتوافقة مثل 10px + 2em ستؤدي إلى خطأ أو نتائج غير مقصودة۔ وَحِد الوحدات أو استخدم دوال unit() و unitless()۔

معالجة التحويل التلقائي للوحدات

يتعامل SASS مع الأرقام ذات الوحدات، وقواعد الوحدات في نتائج العمليات تتبع القواعد الفيزيائية العامة۔ على سبيل المثال، px/px يصبح بدون وحدة۔ كن حذرًا عند إدارة الوحدات عند استخدام دالة unit() أو بعد math.div()۔

فيما يلي أمثلة توضح كيفية معالجة مزج القيم ذات الوحدة وغير ذات الوحدة۔

1$width: 100px;
2$ratio: 0.5;
3
4.box {
5  /* Multiply width by a ratio (multiplying by a unitless value is fine) */
6  width: $width * $ratio; // -> 50px
7}
8
9/* If you want to remove the unit, combine it with math.div() for the operation */

• ضرب القيم التي لها وحدات والتي ليس لها وحدات يعمل كما هو متوقع، لكن كن حذرًا من الوحدة الناتجة (أو عدم وجودها) عند القسمة۔

عوامل المقارنة (==, !=, <, >, <=, >=)

يحتوي SASS على عوامل مقارنة يمكن استخدامها للتفرع في الشروط (@if) والمزج (mixins)۔ مقارنة الأنواع المعقدة مثل الألوان والقوائم تتبع قواعدها الخاصة. لاحظ أن مقارنة الألوان تختلف حسب مساحة اللون۔

يوجد أدناه مثال يقارن رقمين ويفرّع النمط بناءً على ذلك۔

1$breakpoint: 768px;
2
3.container {
4  @if $breakpoint >= 768px {
5    max-width: 1200px;
6  } @else {
7    max-width: 100%;
8  }
9}

• يمكن دمج عوامل المقارنة مع @if لقواعد أنماط تفاعلية وشرطية۔

العمليات المنطقية (and، or، not)

يدعم SASS العمليات and، or، وnot۔ استخدم and أو or لدمج شروط متعددة۔ يمكن توضيح أسبقية العمليات وترتيب التنفيذ باستخدام الأقواس۔

يوجد أدناه مثال على معالجة الشروط المعقدة باستخدام العوامل المنطقية۔

 1$mobile: false;
 2$logged-in: true;
 3
 4.notice {
 5  @if $logged-in and not $mobile {
 6    display: block;
 7  } @else {
 8    display: none;
 9  }
10}

• يمكن توضيح أسبقية and و or باستخدام الأقواس۔ بالنسبة للشروط المعقدة، تساعد الأقواس في الحفاظ على القابلية للقراءة والسلامة۔

عمليات النص — الدمج والاستبدال

في SASS، يمكن دمج النصوص باستخدام عامل + أو الاستبدال بـ #{}۔ تعتمد نتيجة عامل + على ما إذا كان النص على اليسار محاطًا بعلامات اقتباس أم لا، لذا فإن استخدام الاستبدال المتوقع بـ#{} أكثر أمانًا۔

فيما يلي أمثلة على الدمج والاستبدال في النصوص۔

 1@use "sass:string";
 2
 3$base: "icon-";
 4$variant: string.unquote("arrow");
 5
 6.icon {
 7  /* Concatenation using + (old style) */
 8  &--old { content: $base + $variant; } // -> icon-arrow
 9
10  /* Interpolation is more reliable */
11  &--new { content: "#{$base}#{$variant}"; } // -> icon-arrow
12}
13
14/* Interpolation is useful for generating selector names, URLs, or animation names */
15@keyframes slide-#{$variant} {
16  from { transform: translateX(0); }
17  to   { transform: translateX(100%); }
18}

• استخدام الاستبدال بـ#{} يتجنب المشكلات المتعلقة بعلامات الاقتباس وإضافة المسافات البيضاء غير المقصودة۔

العمليات الحسابية على الألوان (ملغاة)

في السابق، كان SASS يدعم 'الحسابات اللونية' التي تسمح بإضافة أو طرح أرقام على الألوان. ومع ذلك، تم إهمال الحسابات اللونية الآن، وينبغي استخدام الدوال من وحدة sass:color لمعالجة الألوان.۔

فيما يلي أمثلة توضح أن العمليات الحسابية المباشرة على الألوان ملغاة مع البدائل المقترحة۔

 1/* Deprecated (old code example – no longer works or recommended) */
 2/* background: $base-color + 10; */
 3
 4@use "sass:color";
 5
 6$base: #336699;
 7
 8.bg {
 9  /* For example, to increase lightness, use color.scale() or color.adjust() */
10  /* Safe manipulation based on color space */
11  background: color.scale($base, $lightness: 20%);
12  /* Or make it lighter by mixing white */
13  background: color.mix(white, $base, 20%);
14}

• إذا كنت ترغب في معالجة الألوان، استخدم الدوال من وحدة sass:color.۔

الأقواس وأسبقية العوامل

استخدم الأقواس للتحكم في ترتيب تنفيذ العمليات۔ يتم دائمًا تنفيذ العمليات داخل الأقواس قبل العمليات خارجها۔ استخدم الأقواس في التعبيرات المعقدة للحفاظ على القابلية للقراءة۔

فيما يلي أمثلة لتوضيح ترتيب التنفيذ باستخدام الأقواس۔

1@debug (1 + 2) * 3; // 9
2@debug 1 + 2 * 3;   // 7 (multiplication first)

• كما في الرياضيات، هناك قواعد للأسبقية، لذا استخدم الأقواس لضمان إجراء العمليات الحسابية بالترتيب المقصود۔

الملخص

عند استخدام العوامل في SASS، من المهم كتابة الكود مع مراعاة قابلية التطوير المستقبلية وسهولة القراءة۔ في التعبيرات المعقدة، وضح ترتيب الحساب باستخدام الأقواس، وضع أولوية على قابلية قراءة الكود۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video