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

2
00:00:04,466 --> 00:00:08,813
Diese spezielle Lektion befasst sich mit CSS-Präprozessoren,

3
00:00:08,813 --> 00:00:11,880
insbesondere Less und Sass.

4
00:00:11,880 --> 00:00:17,420
Nun haben diese Themen offensichtlich mehr mit CSS und der

5
00:00:17,420 --> 00:00:22,680
Definition von CSS-Klassen zu tun, aber es wäre unangemessen für

6
00:00:22,680 --> 00:00:26,940
mich, einen Bootstrap-Kurs abzuschließen, ohne

7
00:00:26,940 --> 00:00:31,010
ein wenig in CSS-Präprozessoren zu vertiefen.

8
00:00:31,010 --> 00:00:37,265
Einfach, weil Bootstrap mit Sass für seine Quelle erstellt wird.

9
00:00:37,265 --> 00:00:41,970
Wir werden also kurz CSS-Präprozessoren untersuchen,

10
00:00:41,970 --> 00:00:47,682
was sie sind, wie sie bei der Definition

11
00:00:47,682 --> 00:00:51,166
von CSS-Klassen nützlich sind und warum Bootstrap sie nutzt.

12
00:00:52,972 --> 00:00:58,263
Wie Sie wahrscheinlich aus Ihren bisherigen Erfahrungen mit CSS verstehen,

13
00:00:58,263 --> 00:01:00,997
ist CSS ideal, um Stile zu definieren und

14
00:01:00,997 --> 00:01:06,325
diese Stile wiederholt auf verschiedene HTML-Elemente anzuwenden.

15
00:01:06,325 --> 00:01:11,940
Und so verwenden wir CSS, wenn wir unsere Webseiten definieren.

16
00:01:11,940 --> 00:01:15,080
Aber wenn Sie sich den CSS-Code selbst ansehen,

17
00:01:15,080 --> 00:01:19,620
beginnen Sie schnell die Einschränkungen von CSS zu erkennen.

18
00:01:19,620 --> 00:01:23,660
Vor allem, wenn Sie aus einem Programmierhintergrund kommen, erkennen Sie, dass

19
00:01:23,660 --> 00:01:29,342
CSS nicht das hat, was Sie normalerweise in einer Programmiersprache erwarten, wie Variablen,

20
00:01:29,342 --> 00:01:34,610
Verschachtelung von Selektoren, Variablen, Ausdrücken und Funktionen.

21
00:01:36,310 --> 00:01:40,580
Dies bedeutet, dass das Schreiben von CSS-Code umständlich wird und die

22
00:01:40,580 --> 00:01:44,370
Aufrechterhaltung von CSS-Code wegen des

23
00:01:44,370 --> 00:01:49,550
Fehlens der traditionellen Programmiersprachenähnlichen Syntax umständlich wird.

24
00:01:49,550 --> 00:01:54,770
Nun, hier kommen die CSS-Präprozessoren zu unserer Rettung.

25
00:01:55,800 --> 00:02:01,090
Es gibt mehrere beliebte CSS-Präprozessoren, die versuchen, einige

26
00:02:01,090 --> 00:02:07,290
der Mängel von CSS zu beheben, indem viele dieser Funktionen unterstützt werden.

27
00:02:07,290 --> 00:02:13,000
Zwei insbesondere das ist von Interesse für uns ist Weniger und Sass.

28
00:02:14,840 --> 00:02:19,940
Wir werden diese beiden in dieser Lektion genauer betrachten.

29
00:02:19,940 --> 00:02:24,744
Wenn Sie nun Ihre CSS-Klassen mit einer

30
00:02:24,744 --> 00:02:29,760
dieser Präprozessorsprachen wie Less oder

31
00:02:29,760 --> 00:02:34,990
Sass definieren, müssen sie schließlich in CSS konvertiert werden,

32
00:02:34,990 --> 00:02:39,696
aber dies kann automatisch geschehen, bevor das CSS in Ihrer Webseite verwendet wird.

33
00:02:39,696 --> 00:02:44,840
Was diese Vorverarbeitungssprachen zu uns bringen, ist

34
00:02:44,840 --> 00:02:51,580
mehr Programmiersprachenähnliche Syntax, wie wir in den nächsten Folien sehen werden.

35
00:02:51,580 --> 00:02:53,620
Wir werden Less und Sass kurz untersuchen.

36
00:02:54,990 --> 00:03:00,890
Insbesondere der Grund für uns, dies zu betrachten, ist, weil Bootstrap selbst

37
00:03:00,890 --> 00:03:08,540
Sass verwendet, um seine Quelle für seine CSS-Klassen zu definieren.

38
00:03:08,540 --> 00:03:12,980
Und wenn Sie also Bootstrap anpassen,

39
00:03:12,980 --> 00:03:16,230
müssten Sie mit Sass-Code arbeiten.

40
00:03:16,230 --> 00:03:21,402
Bootstrap 3, die die vorherige Version von Bootstrap war, benutzte Less,

41
00:03:21,402 --> 00:03:26,260
und daher dachte ich, es wäre eine angemessene Sache, sowohl Less als auch

42
00:03:26,260 --> 00:03:32,330
Sass abzudecken, weil sie sich

43
00:03:32,330 --> 00:03:39,960
in Bezug auf ihre Fähigkeiten und die Art und Weise, wie die Syntax definiert ist, ziemlich ähnlich sind.

44
00:03:39,960 --> 00:03:45,630
Die typischen Merkmale, die CSS-Präprozessoren bringen, ist die Unterstützung für

45
00:03:45,630 --> 00:03:53,340
Variablen, Verschachtelungsselektoren, Ausdrücke, Funktionen und Mixins.

46
00:03:53,340 --> 00:03:59,580
Also werden wir einige davon mit einigen Beispielen in den nächsten Folien betrachten.

47
00:03:59,580 --> 00:04:02,270
Das erste, was wir uns ansehen werden, sind Variablen.

48
00:04:02,270 --> 00:04:05,310
In vielen CSS-Klassen, die Sie definieren,

49
00:04:05,310 --> 00:04:11,540
haben Sie möglicherweise einige wiederholte Verwendung bestimmter Mengen.

50
00:04:11,540 --> 00:04:16,600
Es könnte sich lohnen, wenn Sie einige Variablen definieren, die

51
00:04:16,600 --> 00:04:21,590
diese Mengen enthalten, und diese Variablen bei der Definition Ihrer CSS-Klassen verwenden.

52
00:04:21,590 --> 00:04:24,240
Das ist also, wo Variablen zu Ihrer Rettung kommen.

53
00:04:24,240 --> 00:04:29,720
Hier werden wir uns sowohl Less als auch Scss Code ansehen.

54
00:04:29,720 --> 00:04:34,090
Scss ist eine Version von Sass,

55
00:04:34,090 --> 00:04:40,670
beliebtere Version der Sass-Syntax, deshalb konzentriere ich mich hier auf Scss.

56
00:04:40,670 --> 00:04:43,420
Wenn Sie also Variablen in Less definieren,

57
00:04:43,420 --> 00:04:47,610
werden Sie den Namen der Variablen mit einem @-Zeichen fortfahren.

58
00:04:47,610 --> 00:04:55,720
Im Falle von Scss verwenden Sie ein Dollarzeichen vor dem Variablennamen.

59
00:04:55,720 --> 00:04:57,340
Und sobald Sie diese Variablen definiert

60
00:04:57,340 --> 00:05:01,750
haben, können Sie diese Variablen verwenden, wenn Sie die Klassen definieren.

61
00:05:01,750 --> 00:05:06,700
Wie Sie in dem Beispiel sehen, wo wir die navbar-inverse als Hintergrund definieren,

62
00:05:06,700 --> 00:05:11,410
oder die Höhe des carousel-item als Variablen.

63
00:05:11,410 --> 00:05:16,350
Nun, der Vorteil der Definition von Variablen zu Beginn Ihrer CSS-Klasse

64
00:05:16,350 --> 00:05:21,400
besteht darin, dass es einen einzelnen Punkt gibt, an dem Sie einen Wert aktualisieren können, und

65
00:05:21,400 --> 00:05:27,390
es wird automatisch alle CSS-Klassen aktualisieren, die diese Variable verwenden.

66
00:05:27,390 --> 00:05:31,080
Typischerweise die Art und Weise, wie wir Variablen in Programmiersprachen verwenden.

67
00:05:32,110 --> 00:05:38,340
Variablen in den CSS-Präprozessorsprachen können ebenfalls ihren eigenen Umfang haben.

68
00:05:39,650 --> 00:05:44,510
Sehr oft, wenn Sie CSS-Klassen definieren, besonders wenn Sie

69
00:05:44,510 --> 00:05:49,760
Klassen definieren müssen, die in anderen Klassen verschachtelt sind

70
00:05:49,760 --> 00:05:53,330
, dann wird Ihr CSS-Code ziemlich bald sehr umständlich.

71
00:05:53,330 --> 00:05:58,370
Hier wird das Verschachteln von Ihren CSS-Präprozessoren unterstützt.

72
00:05:58,370 --> 00:06:02,380
Wie Sie sehen können, können Sie beispielsweise eine Karussellklasse definieren, und

73
00:06:02,380 --> 00:06:05,876
innerhalb einer Karussellklasse können Sie eine Karussell Elementklasse definieren.

74
00:06:05,876 --> 00:06:11,900
Und in ähnlicher Weise die Bildunterklasse innerhalb der Karussellartikelklasse.

75
00:06:11,900 --> 00:06:18,161
Hier können Sie sehen, dass jeder von ihnen in einer vorherigen Klasse verschachtelt ist.

76
00:06:19,440 --> 00:06:25,410
Mit Variablen können Sie jeweils einen Wert in einer Variablen speichern.

77
00:06:25,410 --> 00:06:30,730
Angenommen, Sie haben eine Gruppe von Variablen, die zusammengefasst

78
00:06:30,730 --> 00:06:37,275
eine Reihe von CSS-Deklarationen deklarieren, das ist, wo wir Mixins verwenden.

79
00:06:37,275 --> 00:06:42,910
In Less definieren Sie ein Mixin, indem Sie ihm einen Namen geben,

80
00:06:42,910 --> 00:06:47,650
und in Sass gehen Sie dem einfach ein @mixin

81
00:06:47,650 --> 00:06:52,530
vor dem Namen der mixin-Deklaration voraus.

82
00:06:52,530 --> 00:06:58,560
Und in einem Mixin können Sie eine Reihe von CSS-Deklarationen definieren

83
00:06:58,560 --> 00:07:03,620
, die dann für verschiedene CSS-Klassen wiederverwendet werden können.

84
00:07:03,620 --> 00:07:08,110
Wie Sie in diesem Beispiel sehen, definieren wir die Nullmarge

85
00:07:08,110 --> 00:07:12,480
als Mixin, sowohl in Less als auch in Sass.

86
00:07:12,480 --> 00:07:18,120
Beachten Sie die geringfügige Variation der Syntax in jedem dieser Fälle.

87
00:07:18,120 --> 00:07:25,250
Und dann können Sie dieses Mixin verwenden, um zusätzliche CSS-Klassen zu definieren.

88
00:07:25,250 --> 00:07:30,620
Hier können Sie also sehen, dass wir für den Zeilenkopf den Nullrand

89
00:07:30,620 --> 00:07:35,480
als Mixin im Zeilenkopf definieren, was bedeutet, dass alle

90
00:07:35,480 --> 00:07:40,780
diese Eigenschaften vom Nullrand von dieser Zeilenkopfklasse vererbt werden.

91
00:07:40,780 --> 00:07:47,320
Mixins selbst können zusätzliche Parameter übernehmen, wenn Sie diese definieren möchten.

92
00:07:47,320 --> 00:07:49,970
In diesem Fall definiere ich

93
00:07:49,970 --> 00:07:54,680
eine Variation des Nullmargen-Mixins, den wir in der vorherigen Folie gesehen haben.

94
00:07:54,680 --> 00:07:59,935
Hier nimmt dieser Null-Marge-Mixin zwei Parameter,

95
00:07:59,935 --> 00:08:03,011
Pad nach unten und Pad links rechts.

96
00:08:03,011 --> 00:08:08,840
Und mit Less können Sie sogar den Standardwert dafür angeben,

97
00:08:08,840 --> 00:08:15,276
aber mit Scss müssen Sie die Werte explizit angeben.

98
00:08:15,276 --> 00:08:20,871
Also hier definieren wir zwei verschiedene CSS-Eigenschaften, den Rand und das

99
00:08:20,871 --> 00:08:27,880
Padding, und dann verwendet das Padding selbst die Parameter für unser Mixin dort.

100
00:08:27,880 --> 00:08:32,300
In diesem Fall können Sie diese Mixins verwenden, wie Sie in

101
00:08:32,300 --> 00:08:36,997
den beiden CSS-Klassen sehen, die unter dem Zeilenkopf und

102
00:08:36,997 --> 00:08:41,810
dem Zeileninhalt definiert sind, indem Sie ihre Parameterwerte angeben,

103
00:08:41,810 --> 00:08:46,270
wenn Sie dieses Mixin in Ihren CSS-Cluster aufnehmen.

104
00:08:47,470 --> 00:08:52,570
Nicht nur das, Sie können sogar mathematische Operationen für vordefinierte

105
00:08:52,570 --> 00:08:58,120
Variablen ausführen, wenn Sie sie in Ihren CSS-Klassen verwenden.

106
00:08:58,120 --> 00:09:03,470
Hier können Sie sehen, dass ich zwei verschiedene Karussell Elemente

107
00:09:03,470 --> 00:09:05,740
mit zwei verschiedenen Größen definiert habe, und so

108
00:09:05,740 --> 00:09:10,060
können Sie sehen, dass die Höhen jedes einzelnen von ihnen unterschiedlich definiert sind.

109
00:09:10,060 --> 00:09:15,105
In einem Fall verwende ich die vordefinierte Höhe, in einem anderen Fall

110
00:09:15,105 --> 00:09:20,244
multipliziere ich diese Höhe und verwende sie dann, um die height

111
00:09:20,244 --> 00:09:25,230
Eigenschaft in meinem Karussellelement für die item-large Klasse zu definieren.

112
00:09:25,230 --> 00:09:28,778
Diese Art von mathematischen Operationen auf

113
00:09:28,778 --> 00:09:33,710
Variablen ist also auch in CSS-Präprozessorsprachen erlaubt.

114
00:09:35,060 --> 00:09:40,160
Weitere Funktionen, die die CSS-Präprozessoren enthalten,

115
00:09:40,160 --> 00:09:47,365
sind Funktionen, mit denen Sie mathematische Funktionen definieren können, weniger Strings.

116
00:09:47,365 --> 00:09:53,015
Sie können auch Farboperationen und Farbmischoperationen mit diesen Funktionen

117
00:09:53,015 --> 00:09:57,915
durchführen und diese verwenden, wenn Sie Ihre CSS-Klassen definieren.

118
00:09:57,915 --> 00:10:01,345
Das ist ein bisschen fortgeschritten, also werde ich dort nicht zu viel Detail eingehen.

119
00:10:03,470 --> 00:10:11,552
Außerdem können Sie vordefinierte CSS-Präprozessorklassen in andere Klassen eingeben.

120
00:10:11,552 --> 00:10:16,680
Wenn Sie beispielsweise eine Less-Klasse wie definiert

121
00:10:16,680 --> 00:10:20,100
haben und diese Datei in eine andere Less-Datei eingeben können.

122
00:10:20,100 --> 00:10:23,347
Wenn Sie Scss-Dateien definiert haben,

123
00:10:23,347 --> 00:10:29,210
können Sie sie mit dem Importvorgang in andere Scss-Dateien importieren.

124
00:10:29,210 --> 00:10:32,670
Die Syntax ist für Less und Sass gleich.

125
00:10:33,890 --> 00:10:40,180
Nun, da wir einige Funktionen der CSS-Präprozessorsprachen gesehen haben, wollen wir

126
00:10:40,180 --> 00:10:45,520
nun untersuchen, wie wir sie tatsächlich nutzen können, indem wir ein paar Übungen machen.

127
00:10:45,520 --> 00:10:49,900
Zuerst machen wir eine Übung, die auf Weniger basiert.

128
00:10:49,900 --> 00:10:53,677
Dann folgen wir dem mit einer Übung, die auf Sass basiert.

129
00:10:53,677 --> 00:10:57,099
( MUSIK)