مقاييس Sass

مقاييس Sass

المتغير هو طريقة لتخزين المعلومات، يمكنك استخدامها في وقت لاحق.

من خلال Sass، يمكنكالمعلوماتيتم تخزينها في المتغيرات، مثلًا:

• خط
• رقم
• لون
• حقيقي
• قائمة
• لا شيء

يستخدم Sass رمز $ يتبعه الاسم لإعلان المتغيرات:

نحوغة المتغيرات Sass

$اسم المتغير: القيمة;

المثال أدناه يدل على إعلان 4 متغيرات:

• myFont
• myColor
• myFontSize
• myWidth

بعد إعلان المتغيرات، يمكنك استخدام هذه المتغيرات في أي مكان:

جملة SCSS:

$myFont: Helvetica, sans-serif;
$myColor: الأحمر;
$myFontSize: 18px;
$myWidth: 680px;
الجسم {
  عائلة الخط: $myFont;
  حجم الخط: $myFontSize;
  اللون: $myColor;
}
#container {
  عرض: $myWidth;
}

لذلك، عند تحويل ملف Sass، سيستخدم المتغيرات (myFont، myColor، إلخ) وسيقوم بإخراج CSS عادي ووضع القيم المتغيرة في CSS، مثلما يلي:

إخراج CSS:

الجسم {
  عائلة الخط: Helvetica, sans-serif;
  حجم الخط: 18px;
  اللون: الأحمر;
}
#container {
  عرض: 680px;
}

مجال المتغيرات Sass

المتغيرات Sass متاحة فقط في مستوى التشبيك الذي تم تعريفها فيه.

الرجاء النظر في المثال أدناه：

جملة SCSS:

$myColor: الأحمر;
h1 {
  $myColor: الأخضر;
  اللون: $myColor;
}
p {
  اللون: $myColor;
}

<p> لون النص داخل العلامة سيكون أخضرًا أو أحمر؟ هو الأحمر!

تعريف آخر، $myColor: الأخضر; موجود في <h1> داخل القاعدة، ويكون هناك فقط!

لذلك، إخراج CSS سيكون:

إخراج CSS:

h1 {
  اللون: الأخضر;
}
p {
  اللون: الأحمر;
}

حسنًا، هذا هو سلوك نطاق المتغيرات العالمية الافتراضي.

استخدام Sass !global

يمكن استخدام !global يغطي تغيير سلوك نطاق المتغيرات العالمية.

!global يُشير إلى أن المتغير هو عالمي، مما يعني أنه يمكن الوصول إليه في جميع المستويات.

انظر إلى المثال أدناه (مثل السابق، لكن مع إضافة !global):

جملة SCSS:

$myColor: الأحمر;
h1 {
  $myColor: الأخضر !global;
  اللون: $myColor;
}
p {
  اللون: $myColor;
}

الآن <p> لون النص داخل العلامة سيكون أخضر!

لذلك، إخراج CSS سيكون:

إخراج CSS:

h1 {
  اللون: الأخضر;
}
p {
  اللون: الأخضر;
}

نصيحة:يجب تعريف المتغيرات العالمية خارج أي قواعد. من الذكاء أن تعرف جميع المتغيرات العالمية في ملف خاص، يُسمى "_globals.scss"، وأن تستخدم @include الكلمات المفتاحية تحتوي على هذا الملف.