الشروط في SASS
هذه المقالة تشرح الشروط في SASS۔
نشرح بوضوح كل شيء من الأساسيات إلى الاستخدامات المتقدمة للشروط باستخدام التوجيهات @if و@else if و@else، مع أمثلة عملية۔
YouTube Video
الشروط في SASS
SASS هي لغة أنماط تُوسِّع CSS، ويمكنك التحكم في الأنماط بمرونة باستخدام الشروط۔ في SASS، يمكنك استخدام @if و@else if و@else للتبديل بين مخرجات الأنماط وقت التحويل۔
البنية الأساسية للشروط
تُكتب الشروط الأساسية في SASS بالبنية التالية۔
1@if condition {
2 // Code executed when the condition is true
3} @else if condition {
4 // Code executed when another condition is true
5} @else {
6 // Code executed when all conditions are false
7}@ifتُقيّم الشرط الأول، وإذا كان غير صحيح يتم تقييم كتلتي@else ifأو@elseبالترتيب۔
مثال على شرط بسيط
في المثال التالي، يتبدل لون الخلفية اعتمادًا على المتغير $theme۔
1$theme: "dark";
2
3body {
4 @if $theme == "dark" {
5 background-color: #333;
6 color: #fff;
7 } @else if $theme == "light" {
8 background-color: #fff;
9 color: #000;
10 } @else {
11 background-color: #f0f0f0;
12 color: #333;
13 }
14}CSS الناتج بعد التحويل
1body {
2 background-color: #333;
3 color: #fff;
4}- عندما تكون قيمة
$themeهي"dark"، تُطبَّق خلفية داكنة ولون نص أبيض۔
دمج الشروط مع العمليات الحسابية
لا تتعامل الشروط مع مقارنات السلاسل والألوان فحسب، بل مع العمليات الحسابية الرقمية أيضًا۔
1$width: 1200px;
2
3.container {
4 @if $width > 1000px {
5 max-width: 1200px;
6 } @else {
7 max-width: 800px;
8 }
9}CSS الناتج بعد التحويل
1.container {
2 max-width: 1200px;
3}- المقارنات الرقمية ممكنة أيضًا، وعندما تتجاوز قيمة
$widthمقدار 1000px يتم توليدmax-width: 1200px۔
شروط متداخلة
من خلال تداخل الشروط، يمكنك التعبير عن شروط معقدة۔
1$theme: "dark";
2$size: "large";
3
4button {
5 @if $theme == "dark" {
6 background-color: #000;
7 color: #fff;
8
9 @if $size == "large" {
10 padding: 20px;
11 } @else {
12 padding: 10px;
13 }
14 } @else {
15 background-color: #fff;
16 color: #000;
17
18 @if $size == "large" {
19 padding: 15px;
20 } @else {
21 padding: 8px;
22 }
23 }
24}CSS الناتج بعد التحويل
1button {
2 background-color: #000;
3 color: #fff;
4 padding: 20px;
5}- يُتيح تداخل الشروط تطبيق الأنماط بناءً على السمة والحجم معًا۔
استخدام الشروط داخل الدوال المخصّصة
استخدام الشروط داخل الدوال المخصصة يمكن أن يحسّن قابلية إعادة الاستخدام۔
1@function adjust-color($theme) {
2 @if $theme == "dark" {
3 @return #333;
4 } @else if $theme == "light" {
5 @return #fff;
6 } @else {
7 @return #ccc;
8 }
9}
10
11.card {
12 background-color: adjust-color("dark");
13}CSS الناتج بعد التحويل
1.card {
2 background-color: #333;
3}- من خلال تغليف الشروط داخل دوال، يمكنك زيادة قابلية إعادة الاستخدام وسهولة الصيانة۔
مثال عملي - تبديل التصاميم
لننظر إلى مثال على تبديل التصميم العام بناءً على شروط معينة۔
1$theme: "light";
2
3body {
4 font-family: Arial, sans-serif;
5
6 @if $theme == "dark" {
7 background-color: #121212;
8 color: #e0e0e0;
9 } @else if $theme == "light" {
10 background-color: #f9f9f9;
11 color: #333;
12 } @else {
13 background-color: #fff;
14 color: #000;
15 }
16}
17
18header {
19 @if $theme == "dark" {
20 border-bottom: 1px solid #333;
21 } @else {
22 border-bottom: 1px solid #ccc;
23 }
24}CSS الناتج بعد التحويل
1body {
2 font-family: Arial, sans-serif;
3 background-color: #f9f9f9;
4 color: #333;
5}
6
7header {
8 border-bottom: 1px solid #ccc;
9}- يمكنك تبديل مخطط الألوان للصفحة بأكملها ديناميكيًا وفقًا لمتغير السمة۔
ملاحظات وأفضل الممارسات
عند استخدام العبارات الشرطية في SASS، يمكنك مراعاة النقاط التالية۔
-
اجعل الشروط بسيطة
التداخل المعقد يضر بقابلية القراءة، لذا فإن الاستفادة من الدوال والـ mixins يساعد على إبقاء الأمور بسيطة۔
-
جرّد باستخدام المتغيرات والدوال
إذا استخدمت شروطًا متشابهة في عدة أماكن، فإن تجميعها في متغيرات أو دوال يحسّن سهولة الصيانة۔
-
تجنّب تضخّم المنطق
وحّد قواعد التصميم قدر الإمكان وتجنّب الإفراط في استخدام الشروط۔
الخاتمة
الشروط في SASS أداة فعّالة جدًا لإنشاء أنماط مرنة وديناميكية۔ هنا شرحنا كل شيء خطوة بخطوة من الأساسيات إلى الأمثلة العملية۔ عند استخدام الشروط في المشاريع الحقيقية، صمّم مع مراعاة كتابة كود قابل لإعادة الاستخدام مع الحرص على عدم تعقيد الأمور أكثر من اللازم۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔