1
00:00:03,250 --> 00:00:06,680
سننتقل الآن إلى التمرين التالي،

2
00:00:06,680 --> 00:00:11,535
حيث سنستخدم بناء جملة SCSS لتحديد

3
00:00:11,535 --> 00:00:18,325
فئات SCSS الخاصة بنا وتحويلها تلقائيًا إلى فئات CSS المقابلة لها.

4
00:00:18,325 --> 00:00:22,220
سنقوم بالضبط بنفس مجموعة الخطوات

5
00:00:22,220 --> 00:00:26,890
التي فعلناها في التمرين الأخير الذي أكملناه الآن،

6
00:00:26,890 --> 00:00:31,470
ولكن باستخدام بناء جملة SCSS.

7
00:00:31,470 --> 00:00:38,885
للبدء، في مشروعك في مجلد CSS،

8
00:00:38,885 --> 00:00:47,180
دعنا ننشئ ملفًا جديدًا ونسميه كبداية نمط SCSS.

9
00:00:47,180 --> 00:00:51,660
الآن في هذا الملف سوف نحدد فئات SCSS الخاصة بنا ثم نقوم تلقائيًا

10
00:00:51,660 --> 00:00:56,795
بتحويل ذلك إلى فئات CSS الخاصة بنا.

11
00:00:56,795 --> 00:01:01,350
حتى في هناك، دعونا نبدأ أولا بتحديد المتغيرات،

12
00:01:01,350 --> 00:01:05,110
لذلك سأبدأ مع الرمادي الفاتح،

13
00:01:06,810 --> 00:01:11,820
لقد أضفت الآن في عدد قليل من المتغيرات هنا مرة أخرى مع

14
00:01:11,820 --> 00:01:16,940
نفس الأسماء التي استخدمناها في التمرين الأخير في وقت سابق،

15
00:01:16,940 --> 00:01:20,760
ولكن مع بناء جملة SCSS بحيث

16
00:01:20,760 --> 00:01:25,630
تسبق جميع المتغيرات مع علامة الدولار لتعريفها كمتغيرات.

17
00:01:25,630 --> 00:01:27,750
بعد ذلك سوف يحدد المزيج.

18
00:01:27,750 --> 00:01:43,888
لذلك بالنسبة للميكسين، أود أن أقول ميكسين صفر الهامش، لوحة لأعلى لأسفل،

19
00:01:43,888 --> 00:01:48,920
وسادة اليسار

20
00:01:48,920 --> 00:01:54,920
واليمين، ونحن نحدد القيم كما كان من قبل.

21
00:02:17,930 --> 00:02:21,130
الآن بعد أن أكملنا تحديد mixin،

22
00:02:21,130 --> 00:02:26,690
يمكننا الاستفادة منه في فصول SCSS التي نحددها لاحقًا.

23
00:02:27,480 --> 00:02:31,280
دعونا الآن تحديد بعض فئات سس،

24
00:02:31,280 --> 00:02:40,025
لذلك سوف تحديد رأس الصف الذي سأستفيد من

25
00:02:40,025 --> 00:02:44,740
ميكسين الهامش الصفر

26
00:02:44,740 --> 00:02:52,900
مع القيم صفر بكسل هنا.

27
00:02:53,620 --> 00:02:59,055
سنستمر في تحديد بعض الفئات الأخرى التي ستضيفها هنا،

28
00:02:59,055 --> 00:03:01,910
حتى تتمكن من رؤية أنني قمت بتعريفها مع

29
00:03:01,910 --> 00:03:05,290
رأس الصف ومحتوى الصف حيث استخدمت

30
00:03:05,290 --> 00:03:12,730
mixins والتذييل وعنوان Jumbotron

31
00:03:12,730 --> 00:03:15,230
وما إلى ذلك، ويمكنك رؤية استخدام

32
00:03:15,230 --> 00:03:21,190
المتغيرات التي لدينا المحددة في وقت سابق في هذا المثال هناك.

33
00:03:21,190 --> 00:03:27,875
من الواضح أن الشفرة متوفرة في تعليمات التمرين التي تتبع هذا الفيديو.

34
00:03:27,875 --> 00:03:32,295
بعد ذلك سوف نضيف إذا كنت تعشيش الطبقات.

35
00:03:32,295 --> 00:03:35,395
تماما كما فعلنا في التمرين الأخير،

36
00:03:35,395 --> 00:03:40,780
سنضيف في فئة دائري مع مجموعة الخلفية إلى الخلفية المظلمة ثم

37
00:03:40,780 --> 00:03:42,345
داخل حيث سنقوم بتعشيق

38
00:03:42,345 --> 00:03:47,065
فئة عنصر دائري مع تعيين الارتفاع إلى ارتفاع عنصر دائري،

39
00:03:47,065 --> 00:03:51,945
ثم صورة ألوان الطبقة الداخلية الأخرى مع بعض الخصائص هناك،

40
00:03:51,945 --> 00:03:56,945
ثم فئة زر دائري كما حددناها في وقت سابق.

41
00:03:56,945 --> 00:04:02,070
لذلك مع هذا، قمنا بإجراء التغييرات على فصول SCSS لدينا،

42
00:04:02,070 --> 00:04:03,925
لذلك دعونا حفظ التغييرات.

43
00:04:03,925 --> 00:04:09,200
الآن، نحن بحاجة إلى تحويل هذا إلى ملف CSS المقابل له.

44
00:04:09,200 --> 00:04:13,835
لتحويل شفرة المصدر SCSS إلى شفرة CSS المقابلة،

45
00:04:13,835 --> 00:04:19,395
سنأخذ مساعدة وحدة عقدة أخرى تسمى عقدة sass.

46
00:04:19,395 --> 00:04:24,485
يتيح تثبيت وحدة العقدة عن طريق كتابة npm

47
00:04:24,485 --> 00:04:33,845
install save dev—save dev ثم عقدة sass.

48
00:04:33,845 --> 00:04:37,690
وبهذه الطريقة، سوف نقوم بحفظ حزمة العقدة sass هذه

49
00:04:37,690 --> 00:04:42,020
كتبعية تطوير في ملف package.json الخاص بنا.

50
00:04:42,020 --> 00:04:44,160
بمجرد اكتمال التثبيت،

51
00:04:44,160 --> 00:04:49,090
سنقوم بإضافة برنامج نصي إلى ملف package.json الخاص بنا.

52
00:04:49,090 --> 00:04:52,020
الذهاب إلى ملف package.json الخاص بنا،

53
00:04:52,020 --> 00:04:56,430
إذا قمت بالتمرير لأعلى سترى أنه في تبعيات dev،

54
00:04:56,430 --> 00:05:00,380
يتم الآن إضافة عقدة sass أيضًا إلى تبعيات dev.

55
00:05:00,380 --> 00:05:04,520
سنقوم الآن بإضافة برنامج نصي إلى ملف package.jsm الخاص بنا

56
00:05:04,520 --> 00:05:07,015
، لذلك النصف الأيمن من هذه الشريحة،

57
00:05:07,015 --> 00:05:11,225
سأقوم بإضافة برنامج نصي باسم

58
00:05:11,225 --> 00:05:20,185
SCSS ثم سيكون هذا البرنامج النصي عقدة sass -o CSS/،

59
00:05:20,185 --> 00:05:26,500
مما يعني أن إخراج هذه الملفات المحولة سيكون في مجلد CSS،

60
00:05:26,500 --> 00:05:29,715
وسيكون المصدر هنا أيضًا في المجلد CSS.

61
00:05:29,715 --> 00:05:34,950
لذلك سيتم

62
00:05:34,950 --> 00:05:41,960
تحويل كافة الملفات مع ملحق. scss وسيتم إنشاء ملفات corresponding.CSS بواسطة هذه العقدة sass.module.

63
00:05:42,270 --> 00:05:47,450
دعونا حفظ التغييرات ومن ثم سنذهب إلى موجه الأوامر ثم اكتب

64
00:05:47,450 --> 00:05:54,310
في نبم تشغيل سس وهذا سوف تأخذ الرعاية من القيام التحويل لدينا.

65
00:05:54,310 --> 00:05:56,500
الذهاب إلى موجه الأوامر،

66
00:05:56,500 --> 00:06:02,005
سنقوم بكتابة npm run SCSS وهذا يجب

67
00:06:02,005 --> 00:06:09,795
تحويل جميع ملفات SCSS تلقائيًا إلى ملفات CSS المقابلة.

68
00:06:09,795 --> 00:06:11,905
الذهاب إلى محررنا،

69
00:06:11,905 --> 00:06:16,525
ترى الآن أن هناك ملفات styles.css التي تم إنشاؤها.

70
00:06:16,525 --> 00:06:18,530
بالنظر إلى محتوى هذا الملف،

71
00:06:18,530 --> 00:06:25,000
سترى أن رمز CSS هذا الذي تم إنشاؤه من رمز SCSS الخاص بنا هو إلى حد كبير

72
00:06:25,000 --> 00:06:32,050
نفس رمز CSS الأصلي الذي كتبناه بأنفسنا.

73
00:06:32,050 --> 00:06:35,875
مع هذا، نكمل هذا التمرين.

74
00:06:35,875 --> 00:06:40,220
في هذا التمرين، رأينا كيف يمكننا كتابة

75
00:06:40,220 --> 00:06:48,195
رمز SCSS ثم تحويل ذلك تلقائيًا إلى رمز CSS المقابل.

76
00:06:48,195 --> 00:06:53,115
السبب في فحصنا هذا بالتفصيل هو أن

77
00:06:53,115 --> 00:06:59,190
Bootstrap يوفر ملفات المصدر الخاصة به بتنسيق SCSS.

78
00:06:59,190 --> 00:07:02,370
إذا قمت بزيارة صفحة Bootstrap،

79
00:07:02,370 --> 00:07:11,795
فستلاحظ أنه يقول أن Bootstrap مصمم باستخدام المعالج المسبق Sass.

80
00:07:11,795 --> 00:07:19,745
لذا، إذا نظرت إلى كيفية تحويل هذا من ساس

81
00:07:19,745 --> 00:07:23,475
وكيف يمكنك إجراء التخصيص الخاص بك

82
00:07:23,475 --> 00:07:28,115
باستخدام رمز Bootstrap Sass، يمكنك الانتقال إلى الوثائق،

83
00:07:28,115 --> 00:07:32,025
ثم سترى تحت

84
00:07:32,025 --> 00:07:37,610
«خيارات» سيكون لديك بعض خيارات التخصيص التي يتم تعريفها هنا.

85
00:07:39,630 --> 00:07:43,800
خيارات التخصيص المختلفة التي يمكنك أن ترى أن

86
00:07:43,800 --> 00:07:49,780
جميع هذه المتغيرات يتم تعريفها باستخدام بناء جملة Sass هنا،

87
00:07:49,780 --> 00:07:53,460
وأيضًا تحت «أدوات البناء»،

88
00:07:53,460 --> 00:08:00,455
ستشرح لك كيف يمكنك إجراء التخصيص الخاص بك لـ Bootstrap.

89
00:08:00,455 --> 00:08:05,330
الآن، أوصي بشدة بعدم محاولة هذا حتى يكون لديك

90
00:08:05,330 --> 00:08:10,515
خبرة كافية باستخدام Bootstrap في حياتك اليومية.

91
00:08:10,515 --> 00:08:12,784
و هذا يكمل ممارستنا.

92
00:08:12,784 --> 00:08:21,250
قد يكون هذا هو الوقت المناسب بالنسبة لك للقيام بالتزام جيد مع ممارسة الرسالة SCSS.