1
00:00:03,290 --> 00:00:09,780
حان الوقت للانتقال إلى التمرين التالي، ودعا التمرين: أقل.

2
00:00:09,780 --> 00:00:12,860
شيء ترغب في أن

3
00:00:12,860 --> 00:00:16,380
يخبرك طبيبك عندما تزوره أو تزوره في المرة القادمة.

4
00:00:16,380 --> 00:00:25,515
ومع ذلك، دعونا ندرس أقل بمزيد من التفصيل الآن لفهم كيف يمكننا تحديد

5
00:00:25,515 --> 00:00:31,830
فئات CSS باستخدام بناء الجملة الأقل من المعالج ثم

6
00:00:31,830 --> 00:00:38,725
إنشاء فئات CSS المقابلة تلقائيًا من فصولنا الأقل.

7
00:00:38,725 --> 00:00:42,630
للبدء، دعنا نذهب إلى

8
00:00:42,630 --> 00:00:51,865
مشروعنا في محرر النصوص ثم داخل مجلد CSS،

9
00:00:51,865 --> 00:00:58,750
سأقوم بإعادة تسمية هذا الملف styles.css كـ styles-old.css.

10
00:00:58,750 --> 00:01:03,870
سأقوم بحفظ الإصدار الحالي من

11
00:01:03,870 --> 00:01:08,685
ملف styles.css لأنه الآن سيكتبون رمز أقل

12
00:01:08,685 --> 00:01:13,200
ورمز SCSS ثم يقوم تلقائيًا بإنشاء

13
00:01:13,200 --> 00:01:19,165
ملف styles.css عن طريق تجميع لغات المعالج المسبق لـ CSS هذه.

14
00:01:19,165 --> 00:01:23,300
بعد القيام بذلك، ثم في مجلد CSS الخاص بي،

15
00:01:23,300 --> 00:01:31,280
سنقوم بإنشاء ملف جديد باسم styles.less.

16
00:01:32,070 --> 00:01:37,290
وداخل هنا، وسوف تحدد بلدي أقل رمز.

17
00:01:37,290 --> 00:01:41,800
دعونا أولا تحديد بعض المتغيرات أقل.

18
00:01:41,800 --> 00:01:52,420
سأقول، lt-gray: ddd وهلم جرا.

19
00:01:52,420 --> 00:01:57,980
يمكنك أن ترى أنني أضفت في عدد قليل من المتغيرات أقل هنا.

20
00:01:57,980 --> 00:02:02,310
لذلك، قمت بتعريف الخلفية المظلمة لتكون القيمة الأولى،

21
00:02:02,310 --> 00:02:05,850
ضوء الخلفية والخلفية شاحبة وأيضا

22
00:02:05,850 --> 00:02:11,235
متغير واحد آخر يسمى دائري البند ارتفاع 300 بكسل.

23
00:02:11,235 --> 00:02:17,305
سأستخدم هذه المتغيرات عندما أقوم بتعريف فئات CSS لاحقًا.

24
00:02:17,305 --> 00:02:22,995
اسمحوا لي الآن أن أضيف في ميكسين

25
00:02:22,995 --> 00:02:31,130
لبلدي أقل ملف يسمى الصفر الهامش وأنا سوف تعريف pad-up-dn

26
00:02:41,320 --> 00:02:48,760
والوسادة اليسار

27
00:02:48,760 --> 00:02:55,725
واليمين، 0px كونها القيمة الافتراضية ثم هنا،

28
00:02:55,725 --> 00:03:01,620
أنا تعيين الهامش: 0px السيارات،

29
00:03:01,620 --> 00:03:11,520
الحشو: بات-up-dn

30
00:03:11,520 --> 00:03:14,460
والوسادة اليسار واليمين.

31
00:03:14,460 --> 00:03:20,180
لذلك مع هذا، قمت بتعريف Mixin الذي

32
00:03:20,180 --> 00:03:25,785
سأستخدمه في فصول CSS الخاصة بي التي سنقوم بتحديدها لاحقًا.

33
00:03:25,785 --> 00:03:31,265
وهذا يحمل اثنين من المعلمات pad-up-dn والوسادة اليسار واليمين.

34
00:03:31,265 --> 00:03:39,740
بعد ذلك، سأضيف في عدد قليل من فئات CSS حتى أبدأ

35
00:03:39,740 --> 00:03:50,435
برأس الصف وأعرف هذا على أنه هامش صفري.

36
00:03:50,435 --> 00:03:57,560
اسمحوا لي أن أضيف في عدد قليل من فئات CSS أخرى ثم أعود لإلقاء نظرة عليها.

37
00:03:57,560 --> 00:04:01,170
هنا، لقد قمت بتعريف فئة CSS أخرى

38
00:04:01,170 --> 00:04:06,480
باستخدام mixin صفر الهامش مع المعلمات 50 بكسل و 0 بكسل،

39
00:04:06,480 --> 00:04:10,790
وهو تذييل حيث أقوم بتعريف لون الخلفية باستخدام

40
00:04:10,790 --> 00:04:15,660
المتغير الذي تم تعريفه في وقت سابق

41
00:04:15,660 --> 00:04:19,940
كخلفية شاحبة ثم jumbotron مع

42
00:04:19,940 --> 00:04:25,885
mixin الهامش صفر و يعرف لون الخلفية على أنه ضوء الخلفية،

43
00:04:25,885 --> 00:04:30,200
وبعض من هذه الأخرى التي هي فئات CSS القياسية،

44
00:04:30,200 --> 00:04:34,610
والتي قمت بتضمينها هناك لأنني ذاهب للاستفادة منها في

45
00:04:34,610 --> 00:04:38,010
صفحة الويب الخاصة بي ومن ثم لديك

46
00:04:38,010 --> 00:04:42,850
navbar-dark التي لون الخلفية أنا لم تحدد لنا خلفية الظلام.

47
00:04:42,850 --> 00:04:46,980
ومحتوى علامة التبويب التي تراني مرة أخرى

48
00:04:46,980 --> 00:04:51,820
باستخدام الرمادي الفاتح المتغير للون الحدود هنا.

49
00:04:51,820 --> 00:04:58,700
بعد ذلك، أضيف في فئة دائري هنا والتي أقوم بتعريف

50
00:04:58,700 --> 00:05:06,010
الخلفية كخلفية مظلمة هنا وبعد ذلك،

51
00:05:06,010 --> 00:05:10,540
أقوم بتعريف هذا العنصر الدائري.

52
00:05:10,540 --> 00:05:18,225
لاحظ، كيف أقوم بتعريف ذلك كعنصر متداخل داخل داخل دائري ولعنصر دائري،

53
00:05:18,225 --> 00:05:24,225
أقوم بتعريف الارتفاع كارتفاع دائري للعنصر هنا،

54
00:05:24,225 --> 00:05:28,965
وهو متغير قمت بتعريفه في وقت سابق وداخل هناك،

55
00:05:28,965 --> 00:05:31,005
أقوم بتعريف الصورة،

56
00:05:31,005 --> 00:05:36,635
وهو مرة أخرى عنصر متداخل آخر داخل العنصر الدائري و ثم بالنسبة للصورة،

57
00:05:36,635 --> 00:05:40,010
سأحدد بعض خصائص CSS بعد ذلك.

58
00:05:40,010 --> 00:05:42,650
كما ترون،

59
00:05:42,650 --> 00:05:46,200
لقد حددت بعض الخصائص للصورة.

60
00:05:46,200 --> 00:05:50,950
هنا، ترى استخدام الطبقات المتداخلة هنا،

61
00:05:50,950 --> 00:05:55,305
لذلك لديك دائري وداخل ذلك لدي عنصر دائري وداخل ذلك،

62
00:05:55,305 --> 00:05:57,145
صورة محددة هنا.

63
00:05:57,145 --> 00:05:58,945
وأخيرا في الجزء السفلي،

64
00:05:58,945 --> 00:06:02,075
أضيف في فئة كاروسيلبوتون،

65
00:06:02,075 --> 00:06:07,605
والذي يستخدم لتحديد كاروسيلبوتون.

66
00:06:07,605 --> 00:06:14,935
مع هذه التغييرات على ملف styles.less الخاص بي إضافة في جميع الطبقات أقل هنا،

67
00:06:14,935 --> 00:06:16,465
اسمحوا لي حفظ التغييرات.

68
00:06:16,465 --> 00:06:23,230
الآن، أريد أن أكون قادرًا على تحويل هذا تلقائيًا إلى ملف CSS المقابل له.

69
00:06:23,230 --> 00:06:28,875
لتحويل ملفي الأقل تلقائيًا إلى ملف CSS المطابق له،

70
00:06:28,875 --> 00:06:32,660
سأستخدم وحدة نمطية للعقدة تسمى أقل.

71
00:06:32,660 --> 00:06:35,015
لتثبيت ذلك في موجه،

72
00:06:35,015 --> 00:06:41,085
اكتب sudo npm تثبيت ناقص g أقل.

73
00:06:41,085 --> 00:06:47,150
أقوم بتثبيت هذا كوحدة عقدة عالمية.

74
00:06:47,150 --> 00:06:54,555
وبمجرد أن يتم تثبيت

75
00:06:54,555 --> 00:07:01,985
ذلك، فإنه سيتم توفير مترجم أقل يسمى أقل أقل في موجه الأوامر.

76
00:07:01,985 --> 00:07:04,570
إذا كنت تقوم بتشغيل هذا على جهاز كمبيوتر يعمل بنظام التشغيل Windows،

77
00:07:04,570 --> 00:07:06,130
فلن تحتاج إلى القيام بـ sudo،

78
00:07:06,130 --> 00:07:09,900
كما قد تتذكر بالفعل.

79
00:07:09,900 --> 00:07:14,565
الآن بعد أن قمنا بتثبيت مترجم lessc،

80
00:07:14,565 --> 00:07:21,010
سأقوم بتجميع الكود الأقل في رمز CSS المقابل له.

81
00:07:21,010 --> 00:07:26,290
للقيام بذلك، اسمحوا لي أن أذهب إلى مجلد CSS ثم هنا،

82
00:07:26,290 --> 00:07:29,650
سترى أن لديك ملف.less الأنماط.

83
00:07:29,650 --> 00:07:38,909
في موجه، اكتب lessc styles.less styles.css،

84
00:07:38,909 --> 00:07:43,010
وبمجرد أن يكمل التجميع،

85
00:07:43,010 --> 00:07:45,580
سيكون لديك ملف CSS المقابل.

86
00:07:45,580 --> 00:07:47,580
لذلك كما ترى الآن،

87
00:07:47,580 --> 00:07:53,565
لديك أقل رمز يتم تحويله إلى رمز CSS المقابل.

88
00:07:53,565 --> 00:07:59,310
إلقاء نظرة على رمز CSS الذي تم إنشاؤه من الشفرة الأقل،

89
00:07:59,310 --> 00:08:02,910
سترى أن هذا الرمز يبدو إلى حد كبير

90
00:08:02,910 --> 00:08:08,075
نفس ما حددناه في ملف CSS الأصلي.

91
00:08:08,075 --> 00:08:11,270
مع هذا، نكمل هذا التمرين.

92
00:08:11,270 --> 00:08:15,515
في هذا التمرين، تعلمنا كيفية كتابة

93
00:08:15,515 --> 00:08:21,525
رمز أقل ثم تحويله تلقائيًا إلى رمز CSS المقابل.

94
00:08:21,525 --> 00:08:26,155
عند هذه النقطة، قد ترغب في حفظ التغييرات في

95
00:08:26,155 --> 00:08:32,410
مستودع Git الخاص بك مع الرسالة التمرين: أقل.