1
00:00:03,290 --> 00:00:09,780
Es ist Zeit, mit der nächsten Übung fortzufahren, die als Übung: Weniger bezeichnet wird.

2
00:00:09,780 --> 00:00:12,860
Etwas, das Sie wünschen,

3
00:00:12,860 --> 00:00:16,380
wird Ihnen Ihr Arzt sagen, wenn Sie ihn oder sie das nächste Mal besuchen.

4
00:00:16,380 --> 00:00:25,515
Lassen Sie uns jedoch weniger genauer untersuchen, um zu verstehen, wie wir

5
00:00:25,515 --> 00:00:31,830
CSS-Klassen mit der weniger Präprozessor-Syntax definieren und dann

6
00:00:31,830 --> 00:00:38,725
automatisch die entsprechenden CSS-Klassen aus unseren weniger Klassen generieren können.

7
00:00:38,725 --> 00:00:42,630
Um zu beginnen, gehen wir zu

8
00:00:42,630 --> 00:00:51,865
unserem Projekt im Texteditor und dann innerhalb des CSS-Ordners,

9
00:00:51,865 --> 00:00:58,750
werde ich diese styles.css Datei in styles-old.css umbenennen.

10
00:00:58,750 --> 00:01:03,870
Ich werde meine aktuelle Version der

11
00:01:03,870 --> 00:01:08,685
Datei styles.css speichern, weil sie jetzt weniger Code

12
00:01:08,685 --> 00:01:13,200
und SCSS-Code schreiben und dann automatisch die

13
00:01:13,200 --> 00:01:19,165
Datei styles.css generieren, indem sie diese CSS-Präprozessorsprachen kompilieren.

14
00:01:19,165 --> 00:01:23,300
Danach

15
00:01:23,300 --> 00:01:31,280
erstellen wir in meinem CSS-Ordner eine neue Datei namens styles.less.

16
00:01:32,070 --> 00:01:37,290
Und hier drinnen werde ich meinen weniger Code definieren.

17
00:01:37,290 --> 00:01:41,800
Lassen Sie uns zunächst einige weniger Variablen definieren.

18
00:01:41,800 --> 00:01:52,420
Ich werde sagen, lt-grey: ddd und so weiter.

19
00:01:52,420 --> 00:01:57,980
Sie können sehen, dass ich hier ein paar mehr weniger Variablen hinzugefügt habe.

20
00:01:57,980 --> 00:02:02,310
Also habe ich Hintergrund dunkel als erster Wert definiert,

21
00:02:02,310 --> 00:02:05,850
Hintergrundlicht und Hintergrund blass und auch

22
00:02:05,850 --> 00:02:11,235
eine weitere Variable namens Karussel-Element-Höhe als 300 Pixel.

23
00:02:11,235 --> 00:02:17,305
Ich werde diese Variablen verwenden, wenn ich später meine CSS-Klassen definiere.

24
00:02:17,305 --> 00:02:22,995
Lassen Sie mich jetzt ein Mixin für

25
00:02:22,995 --> 00:02:31,130
meine weniger Datei namens Zero-Margin hinzufügen und ich werde pad-up-dn

26
00:02:41,320 --> 00:02:48,760
und pad-links-rechts definieren,

27
00:02:48,760 --> 00:02:55,725
0px ist der Standardwert und dann

28
00:02:55,725 --> 00:03:01,620
setze ich Marge: 0px auto,

29
00:03:01,620 --> 00:03:11,520
padding: pat-up-dn

30
00:03:11,520 --> 00:03:14,460
und pad-links-rechts.

31
00:03:14,460 --> 00:03:20,180
Damit habe ich das Mixin definiert, das ich

32
00:03:20,180 --> 00:03:25,785
in meinen CSS-Klassen verwenden werde, die wir später definieren werden.

33
00:03:25,785 --> 00:03:31,265
Und das trägt zwei Parameter pad-up-dn und pad-links-rechts.

34
00:03:31,265 --> 00:03:39,740
Als nächstes werde ich ein paar weitere CSS-Klassen hinzufügen, also beginne ich mit

35
00:03:39,740 --> 00:03:50,435
Zeilenheader und definiere dies als Null-Marge.

36
00:03:50,435 --> 00:03:57,560
Lassen Sie mich noch ein paar CSS-Klassen hinzufügen und dann zurückkommen, um sie anzusehen.

37
00:03:57,560 --> 00:04:01,170
Hier habe ich noch eine andere CSS-Klasse

38
00:04:01,170 --> 00:04:06,480
mit dem Null-Marge Mixin mit den Parametern 50 Pixel und 0 Pixel

39
00:04:06,480 --> 00:04:10,790
definiert, eine Fußzeile, in der ich die Hintergrundfarbe mit der

40
00:04:10,790 --> 00:04:15,660
Variablen definiere, die früher als

41
00:04:15,660 --> 00:04:19,940
background-blass definiert haben und dann Jumbotron mit

42
00:04:19,940 --> 00:04:25,885
dem Null-Marge Mixin und dem Hintergrundfarbe definiert als Hintergrundlicht,

43
00:04:25,885 --> 00:04:30,200
und einige dieser anderen, die Standard-CSS-Klassen sind,

44
00:04:30,200 --> 00:04:34,610
die ich dort aufgenommen habe, weil ich sie in

45
00:04:34,610 --> 00:04:38,010
meiner Webseite verwenden werde und dann haben Sie

46
00:04:38,010 --> 00:04:42,850
navbar-dark für die die Hintergrundfarbe, die ich uns hintergrunddunkel definiert habe.

47
00:04:42,850 --> 00:04:46,980
Und der Tab-Inhalt, für den Sie mich wieder sehen,

48
00:04:46,980 --> 00:04:51,820
indem Sie die Variable hellgrau für die Rahmenfarbe hier verwenden.

49
00:04:51,820 --> 00:04:58,700
Als nächstes füge ich hier die Karussellklasse hinzu, für die ich

50
00:04:58,700 --> 00:05:06,010
hier den Hintergrund als Hintergrunddunkel definiere, und dann

51
00:05:06,010 --> 00:05:10,540
definiere ich diesen Karussell.

52
00:05:10,540 --> 00:05:18,225
Beachten Sie, wie ich das als verschachteltes Element in meinem Karussell und für das Karussell-Element

53
00:05:18,225 --> 00:05:24,225
definiere ich hier die Höhe als Karussel-Element-Höhe,

54
00:05:24,225 --> 00:05:28,965
was eine Variable ist, die ich früher und innen definiert

55
00:05:28,965 --> 00:05:31,005
habe, definiere ich das Bild, das

56
00:05:31,005 --> 00:05:36,635
wiederum ein weiteres verschachteltes Element innerhalb des Karussellelements ist und dann für das Bild,

57
00:05:36,635 --> 00:05:40,010
werde ich als nächstes einige CSS-Eigenschaften definieren.

58
00:05:40,010 --> 00:05:42,650
Wie Sie sehen können,

59
00:05:42,650 --> 00:05:46,200
habe ich einige Eigenschaften für das Bild definiert.

60
00:05:46,200 --> 00:05:50,950
Hier sehen Sie die Verwendung von verschachtelten Klassen hier,

61
00:05:50,950 --> 00:05:55,305
also haben Sie Karussell und innen, dass ich ein Karussell und darin

62
00:05:55,305 --> 00:05:57,145
ein Bild habe, das hier definiert ist.

63
00:05:57,145 --> 00:05:58,945
Schließlich

64
00:05:58,945 --> 00:06:02,075
füge ich unten die CarouselButton-Klasse hinzu,

65
00:06:02,075 --> 00:06:07,605
die zum Angeben des CarouselButton verwendet wird.

66
00:06:07,605 --> 00:06:14,935
Mit diesen Änderungen an meiner styles.less-Datei, die in all den weniger Klassen hier hinzugefügt wird,

67
00:06:14,935 --> 00:06:16,465
lassen Sie mich die Änderungen speichern.

68
00:06:16,465 --> 00:06:23,230
Jetzt möchte ich in der Lage sein, dies automatisch in ihre entsprechende CSS-Datei zu konvertieren.

69
00:06:23,230 --> 00:06:28,875
Um meine less Datei automatisch in ihre entsprechende CSS-Datei

70
00:06:28,875 --> 00:06:32,660
zu konvertieren, werde ich ein Knotenmodul verwenden, das als weniger genannt wird.

71
00:06:32,660 --> 00:06:35,015
Um das an der Eingabeaufforderung zu installieren,

72
00:06:35,015 --> 00:06:41,085
tippe ich sudo npm install minus g weniger ein.

73
00:06:41,085 --> 00:06:47,150
Ich installiere dies als globales Knotenmodul.

74
00:06:47,150 --> 00:06:54,555
Und sobald das installiert ist,

75
00:06:54,555 --> 00:07:01,985
stellt es an der Eingabeaufforderung einen weniger Compiler zur Verfügung, der als lessc bezeichnet wird.

76
00:07:01,985 --> 00:07:04,570
Wenn Sie dies auf einem Windows-Rechner ausführen,

77
00:07:04,570 --> 00:07:06,130
müssen Sie nicht sudo tun,

78
00:07:06,130 --> 00:07:09,900
wie Sie sich wahrscheinlich bereits erinnern.

79
00:07:09,900 --> 00:07:14,565
Jetzt, da wir den lessc-Compiler installiert haben,

80
00:07:14,565 --> 00:07:21,010
werde ich meinen weniger Code in seinen entsprechenden CSS-Code kompilieren.

81
00:07:21,010 --> 00:07:26,290
Um dies zu tun, lassen Sie mich in den CSS-Ordner gehen und dann hier

82
00:07:26,290 --> 00:07:29,650
werden Sie sehen, dass Sie die Datei styles.less haben.

83
00:07:29,650 --> 00:07:38,909
Geben Sie an der Eingabeaufforderung lessc styles.less styles.css ein,

84
00:07:38,909 --> 00:07:43,010
und sobald die Kompilierung abgeschlossen ist,

85
00:07:43,010 --> 00:07:45,580
erhalten Sie die entsprechende CSS-Datei.

86
00:07:45,580 --> 00:07:47,580
Wie Sie jetzt sehen,

87
00:07:47,580 --> 00:07:53,565
haben Sie den weniger Code, der in den entsprechenden CSS-Code konvertiert wird.

88
00:07:53,565 --> 00:07:59,310
Wenn Sie sich den generierten CSS-Code aus dem weniger Code ansehen,

89
00:07:59,310 --> 00:08:02,910
würden Sie sehen, dass dieser Code so ziemlich

90
00:08:02,910 --> 00:08:08,075
wie das aussieht, was wir in unserer ursprünglichen CSS-Datei definiert haben.

91
00:08:08,075 --> 00:08:11,270
Damit schließen wir diese Übung ab.

92
00:08:11,270 --> 00:08:15,515
In dieser Übung haben wir gelernt,

93
00:08:15,515 --> 00:08:21,525
weniger Code zu schreiben und diesen dann automatisch in den entsprechenden CSS-Code zu konvertieren.

94
00:08:21,525 --> 00:08:26,155
Zu diesem Zeitpunkt möchten Sie möglicherweise die Änderungen in

95
00:08:26,155 --> 00:08:32,410
Ihrem Git-Repository mit der Meldung Übung: Weniger speichern.