1
00:00:03,250 --> 00:00:06,680
Wir gehen nun zur nächsten Übung über,

2
00:00:06,680 --> 00:00:11,535
wo wir die SCSS-Syntax verwenden, um

3
00:00:11,535 --> 00:00:18,325
unsere SCSS-Klassen zu definieren und sie automatisch in ihre entsprechenden CSS-Klassen umzuwandeln.

4
00:00:18,325 --> 00:00:22,220
Wir werden genau die gleichen Schritte machen, die

5
00:00:22,220 --> 00:00:26,890
wir für die letzte Übung gemacht haben, die wir gerade abgeschlossen haben,

6
00:00:26,890 --> 00:00:31,470
aber mit der SCSS-Syntax.

7
00:00:31,470 --> 00:00:38,885
Um zu beginnen, in Ihrem Projekt im CSS-Ordner,

8
00:00:38,885 --> 00:00:47,180
lassen Sie uns eine neue Datei erstellen und nennen sie als Stil starten SCSS.

9
00:00:47,180 --> 00:00:51,660
Jetzt werden wir in dieser Datei unsere SCSS-Klassen definieren und diese dann automatisch

10
00:00:51,660 --> 00:00:56,795
in unsere CSS-Klassen konvertieren.

11
00:00:56,795 --> 00:01:01,350
Also, fangen wir an, indem wir zuerst die Variablen definieren,

12
00:01:01,350 --> 00:01:05,110
also beginne ich mit hellgrau,

13
00:01:06,810 --> 00:01:11,820
ich habe jetzt ein paar weitere Variablen hier wieder mit

14
00:01:11,820 --> 00:01:16,940
den gleichen Namen hinzugefügt, wie wir in der letzten Übung früher verwendet haben,

15
00:01:16,940 --> 00:01:20,760
aber mit der SCSS-Syntax, so dass

16
00:01:20,760 --> 00:01:25,630
alle Variablen mit der Dollarzeichen, um sie als Variablen zu definieren.

17
00:01:25,630 --> 00:01:27,750
Als nächstes wird das Mixin definieren.

18
00:01:27,750 --> 00:01:43,888
Also für das Mixin würde ich sagen mixin zero-margin, pad-up-down,

19
00:01:43,888 --> 00:01:48,920
pad-links-rechts,

20
00:01:48,920 --> 00:01:54,920
und wir definieren die Werte wie zuvor.

21
00:02:17,930 --> 00:02:21,130
Jetzt, da wir das Mixin definiert haben,

22
00:02:21,130 --> 00:02:26,690
können wir es in unseren SCSS-Klassen verwenden, die wir später definieren.

23
00:02:27,480 --> 00:02:31,280
Lassen Sie uns nun einige SCSS-Klassen definieren,

24
00:02:31,280 --> 00:02:44,740
also werde ich den Zeilenkopf definieren, den ich

25
00:02:44,740 --> 00:02:52,900
hier das Null-Margen-Mixin mit den Werten Null Pixel verwenden werde.

26
00:02:53,620 --> 00:02:59,055
Wir werden weiterhin ein paar weitere Klassen definieren, die sie hier hinzufügen werden,

27
00:02:59,055 --> 00:03:01,910
so dass Sie sehen können, dass ich zusammen mit

28
00:03:01,910 --> 00:03:05,290
dem Zeilenkopf und dem Zeileninhalt definiert habe, wo ich

29
00:03:05,290 --> 00:03:12,730
die Mixins und die Fußzeile und die Jumbotron-Adresse verwendet habe und so weiter,

30
00:03:12,730 --> 00:03:15,230
und Sie können die Verwendung

31
00:03:15,230 --> 00:03:21,190
der Variablen sehen, die wir haben , die zuvor in diesem Beispiel definiert wurden.

32
00:03:21,190 --> 00:03:27,875
Der Code ist offensichtlich in den Übungsanweisungen, die diesem Video folgen, verfügbar.

33
00:03:27,875 --> 00:03:32,295
Als nächstes werden wir hinzufügen, wenn Sie Klassen verschachteln.

34
00:03:32,295 --> 00:03:35,395
Genau wie wir es in der letzten Übung getan

35
00:03:35,395 --> 00:03:40,780
haben, fügen wir in der Karussellklasse mit dem Hintergrund dunkel und dann

36
00:03:40,780 --> 00:03:42,345
innen, wo wir

37
00:03:42,345 --> 00:03:47,065
eine Karussellartikelklasse mit der Höhe auf Karussell Elementhöhe eingestellt,

38
00:03:47,065 --> 00:03:51,945
und dann eine andere innere Klasse Farben Bild mit einigen Eigenschaften dort verschachteln,

39
00:03:51,945 --> 00:03:56,945
und dann die Karussellknopf-Klasse, wie wir zuvor definiert haben.

40
00:03:56,945 --> 00:04:02,070
Damit haben wir die Änderungen an unseren SCSS-Klassen vorgenommen,

41
00:04:02,070 --> 00:04:03,925
also lassen Sie uns die Änderungen speichern.

42
00:04:03,925 --> 00:04:09,200
Jetzt müssen wir dies in seine entsprechende CSS-Datei konvertieren.

43
00:04:09,200 --> 00:04:13,835
Um unseren SCSS Quellcode in den entsprechenden CSS-Code

44
00:04:13,835 --> 00:04:19,395
zu konvertieren, werden wir die Hilfe eines weiteren Knotenmoduls namens Node-sass nehmen.

45
00:04:19,395 --> 00:04:24,485
Lässt das Knotenmodul installieren, indem Sie npm

46
00:04:24,485 --> 00:04:33,845
install save dev—save dev und dann node-sass eingeben.

47
00:04:33,845 --> 00:04:37,690
Auf diese Weise werden wir dieses node-sass-Paket

48
00:04:37,690 --> 00:04:42,020
als Entwicklungsabhängigkeit in unserer package.json-Datei speichern.

49
00:04:42,020 --> 00:04:44,160
Sobald die Installation abgeschlossen ist,

50
00:04:44,160 --> 00:04:52,020
fügen wir ein Skript in unsere package.json-Datei ein.

51
00:04:52,020 --> 00:04:56,430
Wenn Sie zu unserer package.json-Datei gehen, würden Sie sehen, dass in den Dev-Abhängigkeiten

52
00:04:56,430 --> 00:05:00,380
jetzt der Knoten-Sass auch in die Dev-Abhängigkeiten hinzugefügt wird.

53
00:05:00,380 --> 00:05:04,520
Wir werden nun ein Skript in unsere package.jsm-Datei hinzufügen,

54
00:05:04,520 --> 00:05:07,015
also rechte Hälfte dieser Folie,

55
00:05:07,015 --> 00:05:11,225
werde ich ein Skript namens SCSS hinzufügen und dann

56
00:05:11,225 --> 00:05:20,185
wird dieses Skript node-sass -o CSS/ sein,

57
00:05:20,185 --> 00:05:26,500
was bedeutet, dass die Ausgabe dieses die konvertierten Dateien im CSS-Ordner sein wird,

58
00:05:26,500 --> 00:05:29,715
und die Quelle hier wird auch in den CSS-Ordner.

59
00:05:29,715 --> 00:05:34,950
So werden alle Dateien mit der Erweiterung.scss

60
00:05:34,950 --> 00:05:41,960
konvertiert und die corresponding.CSS Dateien werden von diesem node-sass.module generiert.

61
00:05:42,270 --> 00:05:47,450
Lassen Sie uns die Änderungen speichern und dann gehen wir zur Eingabeaufforderung und geben Sie dann

62
00:05:47,450 --> 00:05:54,310
npm ausführen SCSS ein und dies kümmert sich um unsere Konvertierung.

63
00:05:54,310 --> 00:05:56,500
Gehen Sie zur Eingabeaufforderung,

64
00:05:56,500 --> 00:06:02,005
geben wir npm run SCSS ein und dies sollte

65
00:06:02,005 --> 00:06:09,795
automatisch alle unsere SCSS-Dateien in die entsprechenden CSS-Dateien konvertieren. Wenn Sie

66
00:06:09,795 --> 00:06:11,905
zu unserem Editor gehen,

67
00:06:11,905 --> 00:06:16,525
sehen Sie jetzt, dass es eine styles.css Dateien, die generiert wurde.

68
00:06:16,525 --> 00:06:18,530
Wenn Sie sich den Inhalt dieser Datei ansehen,

69
00:06:18,530 --> 00:06:25,000
werden Sie sehen, dass dieser CSS-Code, der aus unserem SCSS-Code generiert wurde, ziemlich

70
00:06:25,000 --> 00:06:32,050
der gleiche ist wie der ursprüngliche CSS-Code, den wir selbst geschrieben haben.

71
00:06:32,050 --> 00:06:35,875
Damit schließen wir diese Übung ab.

72
00:06:35,875 --> 00:06:40,220
In dieser Übung haben wir gesehen, wie wir

73
00:06:40,220 --> 00:06:48,195
SCSS-Code schreiben und diesen dann automatisch in ihren entsprechenden CSS-Code konvertieren können.

74
00:06:48,195 --> 00:06:53,115
Der Grund, warum wir dies im Detail untersuchen, ist, weil

75
00:06:53,115 --> 00:06:59,190
Bootstrap seine Quelldateien im SCSS-Format bereitstellt.

76
00:06:59,190 --> 00:07:02,370
Wenn Sie die Bootstrap-Seite besuchen,

77
00:07:02,370 --> 00:07:11,795
werden Sie feststellen, dass Bootstrap mit dem Sass-Präprozessor entwickelt wurde.

78
00:07:11,795 --> 00:07:19,745
Also, wenn Sie sich ansehen, wie dies von Sass konvertiert wird

79
00:07:19,745 --> 00:07:23,475
und wie Sie Ihre eigene Anpassung

80
00:07:23,475 --> 00:07:28,115
mit dem Bootstrap Sass Code durchführen können, können Sie in die Dokumentation gehen,

81
00:07:28,115 --> 00:07:32,025
und dann würden Sie unter

82
00:07:32,025 --> 00:07:37,610
„Optionen“ sehen Sie einige Anpassungsoptionen, die hier definiert werden.

83
00:07:39,630 --> 00:07:43,800
Verschiedene Anpassungsoptionen können Sie sehen, dass

84
00:07:43,800 --> 00:07:49,780
diese Variablen alle mit der Sass-Syntax hier definiert sind,

85
00:07:49,780 --> 00:07:53,460
und auch unter „Build-Tools“

86
00:07:53,460 --> 00:08:00,455
wird es Ihnen erklären, wie Sie Ihre eigene Anpassung von Bootstrap durchführen können.

87
00:08:00,455 --> 00:08:05,330
Nun würde ich Ihnen dringend empfehlen, dies nicht zu versuchen, bis Sie

88
00:08:05,330 --> 00:08:10,515
genügend Erfahrung mit Bootstrap in Ihrem täglichen Leben haben.

89
00:08:10,515 --> 00:08:12,784
Damit ist unsere Übung abgeschlossen.

90
00:08:12,784 --> 00:08:21,250
Dies kann ein guter Zeitpunkt für Sie sein, ein gutes Commit mit der Nachrichtenübung SCSS zu tun.