1
00:00:00,000 --> 00:00:04,466
[MUSIC]

2
00:00:04,466 --> 00:00:08,813
يتعامل هذا الدرس الخاص مع معالجات CSS المسبقة،

3
00:00:08,813 --> 00:00:11,880
ولا سيما أقل و Sass.

4
00:00:11,880 --> 00:00:17,420
من الواضح الآن أن هذه الموضوعات لها علاقة بـ CSS

5
00:00:17,420 --> 00:00:22,680
وتحديد فئات CSS، ولكن سيكون من غير المناسب

6
00:00:22,680 --> 00:00:26,940
لي إكمال دورة Bootstrap دون

7
00:00:26,940 --> 00:00:31,010
الخوض قليلاً في معالجات CSS المسبقة.

8
00:00:31,010 --> 00:00:37,265
ببساطة لأن Bootstrap تم بناؤه باستخدام Sass لمصدره.

9
00:00:37,265 --> 00:00:41,970
لذا، سنقوم بفحص معالجات CSS المسبقة،

10
00:00:41,970 --> 00:00:47,682
وما هي، وكيف تكون مفيدة في تعريف فئات CSS،

11
00:00:47,682 --> 00:00:51,166
ولماذا يستخدم Bootstrap منها.

12
00:00:52,972 --> 00:00:58,263
كما قد تفهم من تجربتك السابقة مع CSS،

13
00:00:58,263 --> 00:01:00,997
CSS رائع لتحديد الأنماط

14
00:01:00,997 --> 00:01:06,325
وتطبيق هذه الأنماط بشكل متكرر على عناصر HTML المختلفة.

15
00:01:06,325 --> 00:01:11,940
وهذه هي الطريقة التي نستخدم بها CSS عندما نحدد صفحات الويب الخاصة بنا.

16
00:01:11,940 --> 00:01:15,080
ولكن عندما تنظر إلى رمز CSS نفسه،

17
00:01:15,080 --> 00:01:19,620
تبدأ في إدراك قيود CSS بسرعة.

18
00:01:19,620 --> 00:01:23,660
خاصة إذا كنت قادمًا من خلفية برمجة، فأنت تدرك أن

19
00:01:23,660 --> 00:01:29,342
CSS لا يحتوي على ما تتوقعه عادةً في لغة برمجة، مثل المتغيرات،

20
00:01:29,342 --> 00:01:34,610
وتعشيش المحددات، والمتغيرات، والتعبيرات، والوظائف.

21
00:01:36,310 --> 00:01:40,580
وهذا يعني أن كتابة شفرة CSS تصبح مرهقة،

22
00:01:40,580 --> 00:01:44,370
والحفاظ على رمز CSS يصبح مرهقا بسبب

23
00:01:44,370 --> 00:01:49,550
عدم وجود صيغة تشبه لغة البرمجة التقليدية.

24
00:01:49,550 --> 00:01:54,770
الآن، هذا هو المكان الذي تأتي فيه المعالجات المسبقة CSS لإنقاذنا.

25
00:01:55,800 --> 00:02:01,090
هناك العديد من المعالجات المسبقة CSS الشائعة التي تحاول معالجة بعض

26
00:02:01,090 --> 00:02:07,290
أوجه القصور في CSS من خلال دعم العديد من هذه الميزات.

27
00:02:07,290 --> 00:02:13,000
اثنين على وجه الخصوص التي هي ذات أهمية بالنسبة لنا هو أقل وساس.

28
00:02:14,840 --> 00:02:19,940
سنلقي نظرة على هذين بمزيد من التفصيل في هذا الدرس.

29
00:02:19,940 --> 00:02:24,744
الآن، عندما تحدد فئات CSS الخاصة بك باستخدام واحدة

30
00:02:24,744 --> 00:02:29,760
من هذه اللغات preprocessor مثل Less أو

31
00:02:29,760 --> 00:02:34,990
Sass، فيجب تحويلها في النهاية إلى CSS،

32
00:02:34,990 --> 00:02:39,696
ولكن يمكن القيام بذلك تلقائيًا قبل استخدام CSS في صفحة الويب الخاصة بك.

33
00:02:39,696 --> 00:02:44,840
ما تقدمه لنا لغات المعالجة المسبقة هذه هو

34
00:02:44,840 --> 00:02:51,580
بناء جملة أكثر شبيهة بلغة البرمجة، كما سنرى في الشرائح القليلة القادمة.

35
00:02:51,580 --> 00:02:53,620
سنقوم بفحص أقل وساس لفترة وجيزة.

36
00:02:54,990 --> 00:03:00,890
على وجه الخصوص، السبب في أننا نلقي نظرة على هذا هو أن Bootstrap نفسه

37
00:03:00,890 --> 00:03:08,540
يستخدم Sass لتحديد مصدره لفئات CSS الخاصة به.

38
00:03:08,540 --> 00:03:12,980
وهكذا إذا ذهبت إلى تخصيص Bootstrap،

39
00:03:12,980 --> 00:03:16,230
فسيتعين عليك العمل مع رمز Sass.

40
00:03:16,230 --> 00:03:21,402
استخدم Bootstrap 3، الذي كان الإصدار السابق من Bootstrap

41
00:03:21,402 --> 00:03:26,260
، أقل، وبالتالي، اعتقدت أنه سيكون من المناسب تغطية كل من Less و

42
00:03:26,260 --> 00:03:32,330
Sass، لأنها تشبه إلى حد كبير بعضها البعض

43
00:03:32,330 --> 00:03:39,960
من حيث قدراتها والطريقة التي يتم بها تعريف بناء الجملة.

44
00:03:39,960 --> 00:03:45,630
الميزات النموذجية التي تجلبها معالجات CSS المسبقة هي دعم

45
00:03:45,630 --> 00:03:53,340
المتغيرات ومحددات التعشيش والتعبيرات والوظائف والمختلطات.

46
00:03:53,340 --> 00:03:59,580
لذلك سنلقي نظرة على بعض هذه مع بعض الأمثلة في الشرائح القليلة القادمة.

47
00:03:59,580 --> 00:04:02,270
أول شيء سننظر إليه هو المتغيرات.

48
00:04:02,270 --> 00:04:05,310
الآن في العديد من فئات CSS التي تحددها،

49
00:04:05,310 --> 00:04:11,540
قد يكون لديك بعض الاستخدام المتكرر لكميات معينة.

50
00:04:11,540 --> 00:04:16,600
قد يكون من المفيد أكثر إذا قمت بتعريف بعض المتغيرات التي

51
00:04:16,600 --> 00:04:21,590
تحتوي على هذه الكميات واستخدام هذه المتغيرات في تحديد فئات CSS الخاصة بك.

52
00:04:21,590 --> 00:04:24,240
هذا هو المكان الذي تأتي فيه المتغيرات لإنقاذك.

53
00:04:24,240 --> 00:04:29,720
هنا، سنلقي نظرة على كل من رمز أقل و SCSS.

54
00:04:29,720 --> 00:04:34,090
Scss هو نسخة من Sass،

55
00:04:34,090 --> 00:04:40,670
نسخة أكثر شعبية من بناء الجملة Sass، لذلك لهذا السبب أركز على Scss هنا.

56
00:04:40,670 --> 00:04:43,420
لذلك، إذا قمت بتعريف المتغيرات في أقل،

57
00:04:43,420 --> 00:04:47,610
فستتابع اسم المتغير بعلامة @.

58
00:04:47,610 --> 00:04:55,720
في حالة Scss، سوف تستخدم علامة الدولار قبل اسم المتغير.

59
00:04:55,720 --> 00:04:57,340
وبمجرد تحديد هذه المتغيرات،

60
00:04:57,340 --> 00:05:01,750
يمكنك بعد ذلك استخدام تلك المتغيرات عند تحديد الفئات.

61
00:05:01,750 --> 00:05:06,700
كما ترى في المثال، حيث نحدد navbar معكوس كخلفية،

62
00:05:06,700 --> 00:05:11,410
أو ارتفاع عنصر دائري كمتغيرات.

63
00:05:11,410 --> 00:05:16,350
الآن، ميزة تحديد المتغيرات في بداية فئة CSS الخاصة بك

64
00:05:16,350 --> 00:05:21,400
هي أن هناك نقطة واحدة حيث يمكنك تحديث قيمة،

65
00:05:21,400 --> 00:05:27,390
وسوف تقوم تلقائيًا بتحديث جميع فئات CSS التي تستخدم هذا المتغير.

66
00:05:27,390 --> 00:05:31,080
عادة الطريقة التي نستخدم بها المتغيرات في لغات البرمجة.

67
00:05:32,110 --> 00:05:38,340
المتغيرات في لغات المعالج المسبق CSS يمكن أيضا أن يكون لها نطاق خاص بها.

68
00:05:39,650 --> 00:05:44,510
في كثير من الأحيان عند تحديد فئات CSS، خاصة عندما

69
00:05:44,510 --> 00:05:49,760
يكون لديك لتحديد الفئات المتداخلة داخل فئات أخرى،

70
00:05:49,760 --> 00:05:53,330
ثم، قريبا جدا رمز CSS الخاص بك يصبح مرهقا جدا.

71
00:05:53,330 --> 00:05:58,370
لذلك هذا هو المكان الذي يتم فيه دعم التعشيش بواسطة معالجات CSS المسبقة.

72
00:05:58,370 --> 00:06:02,380
كما ترون، يمكنك تحديد على سبيل المثال، فئة دائري،

73
00:06:02,380 --> 00:06:05,876
وداخل فئة دائري، يمكنك تحديد فئة عنصر دائري.

74
00:06:05,876 --> 00:06:11,900
وبالمثل، فإن الفئة الفرعية للصورة داخل فئة عنصر دائري.

75
00:06:11,900 --> 00:06:18,161
حتى هنا يمكنك أن ترى أن كل من هذه متداخلة داخل فئة سابقة.

76
00:06:19,440 --> 00:06:25,410
مع المتغيرات، يمكنك الاحتفاظ بقيمة واحدة في كل مرة في متغير.

77
00:06:25,410 --> 00:06:30,730
لنفترض أن لديك مجموعة من المتغيرات التي لخصت معا

78
00:06:30,730 --> 00:06:37,275
تعلن مجموعة من إعلانات CSS، وهذا هو المكان الذي نستخدم فيه mixins.

79
00:06:37,275 --> 00:06:42,910
في أقل يمكنك تحديد ميكسين من خلال إعطائه اسم،

80
00:06:42,910 --> 00:06:47,650
وفي ساس كنت ببساطة تسبق ذلك مع @mixin

81
00:06:47,650 --> 00:06:52,530
أمام اسم إعلان ميكسين.

82
00:06:52,530 --> 00:06:58,560
وداخل mixin، يمكنك تحديد مجموعة من إعلانات CSS

83
00:06:58,560 --> 00:07:03,620
التي يمكن بعد ذلك إعادة استخدامها لفئات CSS المختلفة.

84
00:07:03,620 --> 00:07:08,110
كما ترى في هذا المثال هنا، فإننا نحدد هامش الصفر

85
00:07:08,110 --> 00:07:12,480
كميكسين، سواء في أقل و ساس.

86
00:07:12,480 --> 00:07:18,120
لاحظ الاختلاف الطفيف في بناء الجملة في كل من هذه الحالات.

87
00:07:18,120 --> 00:07:25,250
وبعد ذلك، يمكنك بعد ذلك استخدام هذا المزيج في تحديد فئات CSS إضافية.

88
00:07:25,250 --> 00:07:30,620
حتى هنا يمكنك أن ترى أنه بالنسبة لرأس الصف، فإننا نحدد الهامش صفر

89
00:07:30,620 --> 00:07:35,480
كميكسين في رأس الصف، مما يعني أن كل

90
00:07:35,480 --> 00:07:40,780
هذه الخصائص من الهامش صفر سوف تكون موروثة بواسطة فئة رأس الصف هذه.

91
00:07:40,780 --> 00:07:47,320
يمكن أن تأخذ Mixins نفسها معلمات إضافية إذا كنت ترغب في تعريفها.

92
00:07:47,320 --> 00:07:49,970
لذا في هذه الحالة، أنا أعرّف

93
00:07:49,970 --> 00:07:54,680
اختلافًا لميكسين الهامش الصفري الذي رأيناه في الشريحة السابقة.

94
00:07:54,680 --> 00:07:59,935
هنا، هذا الصفر الهامش مزيج يأخذ اثنين من المعلمات،

95
00:07:59,935 --> 00:08:03,011
وسادة لأعلى إلى أسفل وسادة اليسار اليمين.

96
00:08:03,011 --> 00:08:08,840
ومع أقل، يمكنك حتى تحديد القيمة الافتراضية لذلك،

97
00:08:08,840 --> 00:08:15,276
ولكن مع Scss تحتاج إلى تحديد القيم بشكل صريح.

98
00:08:15,276 --> 00:08:20,871
لذلك نحن هنا تحديد اثنين من خصائص CSS مختلفة، الهامش

99
00:08:20,871 --> 00:08:27,880
والحشو، ومن ثم يستخدم الحشو نفسه المعلمات لميكسين لدينا هناك.

100
00:08:27,880 --> 00:08:32,300
لذلك في هذه الحالة، يمكنك استخدام هذه mixins كما ترى في

101
00:08:32,300 --> 00:08:36,997
فئتي CSS المعرفة أسفل رأس الصف

102
00:08:36,997 --> 00:08:41,810
ومحتوى الصف عن طريق تحديد قيم المعلمات الخاصة بهم

103
00:08:41,810 --> 00:08:46,270
عند تضمين هذا المزيج في كتلة CSS الخاصة بك.

104
00:08:47,470 --> 00:08:52,570
ليس ذلك فقط، يمكنك حتى إجراء عمليات رياضية على

105
00:08:52,570 --> 00:08:58,120
المتغيرات المحددة مسبقًا عند استخدامها داخل فئات CSS الخاصة بك.

106
00:08:58,120 --> 00:09:03,470
حتى هنا يمكنك أن ترى أنني قد حددت اثنين من عناصر دائري مختلفة

107
00:09:03,470 --> 00:09:05,740
مع اثنين من الأحجام المختلفة، وهكذا

108
00:09:05,740 --> 00:09:10,060
يمكنك أن ترى أن ارتفاعات كل واحد منهم يتم تعريفها بشكل مختلف.

109
00:09:10,060 --> 00:09:15,105
في حالة واحدة أستخدم الارتفاع المحدد مسبقًا، في حالة أخرى

110
00:09:15,105 --> 00:09:20,244
أقوم بضرب هذا الارتفاع ثم استخدامه لتحديد

111
00:09:20,244 --> 00:09:25,230
خاصية الارتفاع داخل عنصر دائري لفئة العنصر الكبير.

112
00:09:25,230 --> 00:09:28,778
لذلك

113
00:09:28,778 --> 00:09:33,710
يسمح هذا النوع من العمليات الرياضية على المتغيرات أيضا في لغات CSS preprocessor.

114
00:09:35,060 --> 00:09:40,160
الميزات الأخرى التي تتضمن المعالجات المسبقة CSS

115
00:09:40,160 --> 00:09:47,365
هي الوظائف التي تسمح لك بتعريف الوظائف الرياضية، سلاسل أقل.

116
00:09:47,365 --> 00:09:53,015
يمكنك أيضًا إجراء عمليات الألوان وعمليات مزج الألوان باستخدام هذه الوظائف

117
00:09:53,015 --> 00:09:57,915
والاستفادة منها عند تحديد فئات CSS الخاصة بك.

118
00:09:57,915 --> 00:10:01,345
هذا متقدم بعض الشيء لذلك أنا لن أدخل في الكثير من التفاصيل هناك.

119
00:10:03,470 --> 00:10:11,552
أيضًا، يمكنك إدخال فئات preprocessor CSS المحددة مسبقًا في فئات أخرى.

120
00:10:11,552 --> 00:10:16,680
على سبيل المثال، إذا كان لديك فئة أقل كما هو محدد،

121
00:10:16,680 --> 00:10:20,100
ويمكنك إدخال هذا الملف في ملف أقل آخر.

122
00:10:20,100 --> 00:10:23,347
وبالمثل، إذا قمت بتعريف ملفات Scss،

123
00:10:23,347 --> 00:10:29,210
فيمكنك استيرادها إلى ملفات Scss الأخرى باستخدام عملية الاستيراد.

124
00:10:29,210 --> 00:10:32,670
بناء الجملة هو نفسه لكل من أقل و ساس.

125
00:10:33,890 --> 00:10:40,180
الآن بعد أن رأينا بعض ميزات لغات المعالج المسبق CSS، دعونا

126
00:10:40,180 --> 00:10:45,520
الآن ندرس كيف يمكننا بالفعل الاستفادة منها من خلال القيام ببعض التمارين.

127
00:10:45,520 --> 00:10:49,900
أولا، سنقوم بممارسة على أساس أقل.

128
00:10:49,900 --> 00:10:53,677
ثم سوف نتابع ذلك مع ممارسة على أساس ساس.

129
00:10:53,677 --> 00:10:57,099
[ موسيقى]