Verbessere deine CSS-Entwicklung mit Sass (CSS-Programmierung)

1. Einführung: Hallo, ich bin Christopher Dodd und in dieser Klasse werden wir lernen, wie Sie Ihre CSS-Entwicklung mit Sass überladen können. Sass ist eine Präprozessor-Skriptsprache, die interpretiert oder in CSS kompiliert wird. Es ist im Wesentlichen eine Programmiersprache, die es uns erlaubt, CSS mit Programmierfunktionen wie Variablen, Verschachtelung und Berechnungen zu schreiben . Natürlich, bevor Sie diese Klasse nehmen, sollten Sie bereits mit CSS vertraut sein. Aber wenn Sie CSS seit einiger Zeit verwenden, Sie wahrscheinlich auf ein paar Situationen gestoßen, in denen Sie lächerlich lange Selektoren schreiben mussten oder den Hex- oder RGBA-Code einer Farbe vergessen haben, die Sie im gesamten Dokument verwendet haben. Nun, das sind nur einige der wenigen Probleme, die Sass uns hilft zu lösen und mir zu vertrauen, sobald Sie Sass verwenden, werden Sie nicht auf die alte Art zurückgehen wollen, CSS zu schreiben. Wie der Titel schon sagt, geht es bei dieser Klasse darum, Ihren CSS-Entwicklungsworkflow mit Sass zu verbessern. Wir werden uns ansehen, wie Sass funktioniert, und dann fangen wir an, es zu verwenden, vorhandenen CSS-Code zu refactoring, um einige der besten Funktionen von Sass zu verwenden. Also, wenn Sie bereit sind, Ihre CSS-Entwicklung mit Sass zu verbessern, klicken Sie auf das nächste Video und ich sehe Sie auf der Innenseite. 2. So funktioniert Sass: Bevor wir anfangen, einige der Funktionen von SASS zu betrachten, wollte ich sicherstellen, dass wir alle verstehen, wie SASS tatsächlich funktioniert. Lassen Sie mich klarstellen. SASS ersetzt CSS nicht, es hilft, es zu generieren. Wie Sie bereits wissen sollten, ist HTML die Markup-Sprache für das Web, CSS ist die Sprache, die den Stil von HTML beschreibt, und JavaScript ist die Programmiersprache des Web. Diese Sprachen sind der Standard, wenn es um Front-End-Webentwicklung geht , und SASS ändert dies nicht. SASS ist nicht etwas, das in Ihrem Browser ausgeführt werden kann. Stattdessen fügt SASS eine weitere Schicht zu unserer CSS-Entwicklung hinzu. Es erfordert eine zusätzliche Software, die den SaS-Code nimmt und in CSS kompiliert, dass kompilierte CSS jetzt im Browser als normale CSS-Datei ausgeführt wird. Da CSS die Stylesheet-Sprache des Web bleibt, warum müssen wir hier eine zusätzliche Ebene hinzufügen? Die Antwort ist, dass wir SASS überhaupt nicht verwenden müssen, aber die Verwendung macht es einfach viel einfacher, wenn wir anfangen, an größeren Projekten zu arbeiten. Um SAS-Code in CSS umzuwandeln, ist eine Software erforderlich, um den SAS-Code zu kompilieren, und diese Software könnte cloudbasiert sein oder lokal ausgeführt werden. In der nächsten Lektion werden die coolen Funktionen von SASS mithilfe eines cloudbasierten Tools demonstriert In der folgenden Lektion erfahren Sie, wie Sie auf Ihrem eigenen Computer ein Tool zum Kompilieren von SASS einrichten. Hört sich gut an? - Großartig. Lassen Sie uns in die nächste Lektion springen, wo wir anfangen, einige aktuelle SASS zu schreiben. 3. Die wichtigsten Funktionen von Sass: Wie es der Fall ist, so ziemlich jede Technologie im Web zu lernen, ist der beste Ort, um loszulegen, die offizielle Website. Ich bin hier auf sass-lang.com und das ist die Website für Sass. Wie Sie sehen können, viele Informationen hier. Ich werde auf diesen Link klicken, um Sass zu lernen. Hier können Sie eine Seite zu Sass Grundlagen sehen. Dies sind einige der Features, über die wir in diesem Video sprechen werden. Wenn du dich irgendwann verirrst, kannst du hier einfach als Referenz herkommen. Beachten Sie, dass für jedes dieser Beispiele eine Sass-Version und eine SCSS-Version vorhanden sind. Wir werden auch den Unterschied zwischen diesen beiden in dieser Lektion abdecken. Sie sich darüber noch keine Sorgen, wir werden das in Kürze abdecken. Um diese Hauptmerkmale zu demonstrieren, möchte ich noch nicht mit der Installation eines Compilers auf Ihrem Computer beginnen. Ich will dir direkt Sass zeigen. Ich werde hier mit einem Cloud-basierten Sass-Emulator beginnen. Das heißt sassmeister.com. Hier können Sie sehen, dass es bereits ein Beispielcode gespeichert ist, an dem ich bereits gearbeitet habe. Lassen Sie mich das klar machen, und lassen Sie es uns jetzt für euch neu erstellen, damit ihr sehen könnt, was los ist. Kurz bevor wir mit der Sass-Syntax beginnen, wollte ich kurz erwähnen, dass, wenn Sie CSS noch nicht studiert haben und wissen, wie man es benutzt, dann gehen Sie definitiv und tun Sie das zuerst. Ich meine, Sie können Sass lernen und wie es CSS generiert, ohne CSS zu kennen, aber es ist viel besser, zuerst CSS zu lernen und dann zu lernen, wie Sass Ihnen helfen kann, CSS zu generieren. Nur dass ich erwähnt habe, dass ich sicher bin, dass die meisten von Ihnen CSS bereits kennen, und das ist, was Sie hier sind, um zu lernen, wie man es effizienter schreibt, aber für diejenigen von Ihnen, die CSS überhaupt nicht kennen oder nicht viel Zeit damit verbracht haben, habe ich definitiv empfehlen, einen Schritt zurück zu machen. Es gibt viele Kurse online. Ich habe eine Klasse auf Skillshare über HTML und CSS. Also ja, auf jeden Fall empfehlen Sie, CSS zu kennen, bevor Sie mit Sass beginnen. Also, wenn das aus dem Weg, lasst uns tatsächlich das erste Hauptmerkmal von Sass lernen und das ist Verschachteln. Ich gehe hier rüber zur Dokumentation, scrollen Sie nach unten zur Verschachtelung. Wie Sie hier in diesem Beispiel sehen können, dass sie bereitgestellt haben, haben wir hier Elementselektoren, und sie sind in diesem Navigationselement verschachtelt. Was dies tut, wird nav auf der Vorderseite all dieser Elemente vorangestellt , so dass Sie sie nur anvisieren können, wenn sie innerhalb eines nav existieren. Die andere Sache, die Sie über Sass bemerken werden, ist, es am Ende der Stile keine Semikolons gibt, und es gibt keine geschweiften Klammern. Viele Leute schreiben gerne Code auf diese Weise. Dies basiert alles auf Einrückung. Mit CSS können wir das alles in eine Zeile bündeln, aber mit Sass müssen wir definitiv Zeilen und Einrückungen haben. Sonst wird es nicht wissen, was zu tun ist, und wir schreiben am Ende weniger Code, weil wir keine geschweiften Klammern oder Semikolons haben. Aber wie Sie sehr bald sehen werden, ist diese Syntax nicht die übliche Art und Weise, wie Leute es gerne tun. Wir werden in Kürze in SCSS einziehen. Aber schauen wir uns jetzt ein anderes Beispiel an. Sagen wir einfach zum Beispiel, wir haben ein Kartenelement, und in diesem Kartenelement haben wir den Kartenkörper, und in diesem Körper haben wir vielleicht eine Schaltfläche, die wir anvisieren wollen. Also, wenn ich das auf die Sass-Art mache, kann ich den Kartenkörper von der Karte aus anvisieren, wie so. Sagen wir einfach, dass wir eine Hintergrundfarbe von Schwarz und eine Farbe von Weiß haben wollen. Jetzt wird das CSS generiert und wie Sie sehen können, wird es der Karte nach vorne vorangestellt. Aber wir können auch eine weitere Ebene tiefer gehen, und vielleicht wollen wir ein Button-Element innerhalb dieses Kartenkörpers anvisieren. Lassen Sie uns einfach die Farben hier abwechseln. Ich werde Farbe Hintergrund weiß zu tun, und die Farbe von Schwarz. Jetzt können Sie sehen, dass wir noch eine Karte vorangestellt haben, aber wir haben auch unser Buttonelement hier mit Kartenkörper und Karte ausgewählt , die ihm vorangestellt sind. Dies ist wirklich nützlich, wenn Sie viele tief verschachtelte Elemente schreiben. Wenn ich zum Beispiel ein Listenelement schreiben sollte, und vielleicht möchte ich Text in Großbuchstaben umwandeln. Dies sind alle nur zufällige Stile, übrigens, es ist nur, um Ihnen zu zeigen, wie es in CSS generiert wird. Sie können hier sehen, dass sich viel wiederholen, indem Sie es in CSS schreiben. Nun, anstatt Punktkarte, Punktkartenkörper zu schreiben und auf diese Weise in das Element zu graben, wie wir es in CSS tun, können wir stattdessen einen Baum von Einrückungen und Zeilenumbrüchen erstellen, und es wird es für uns dort drüben schaffen. Davon abgesehen, können wir auch in einem Stil für Karte hier setzen. Vielleicht wollen wir Polsterung von zehn Pixeln. Wir können unsere Stile für dieses Element einfügen. Wir können auch andere Stile darin verschachteln. Ziemlich cool. Es gibt auch diese andere Funktion in Sass, die das kaufmännische Und-verwendet, um auf Pseudo-Klassen zu zielen. Eine Pseudo-Klasse ist, wenn Sie einen Doppelpunkt nach einem Element haben, und vielleicht ist es das erste Kind, vielleicht ist es der Hover-Zustand, vielleicht ist es die After-Pseudo-Klasse dieses Elements. Ein gewöhnlicher ist schweben, und wir haben einen Knopf hier unten. Wir könnten hier eine weitere kleine Stilregel für den Hover-Zustand der Schaltfläche schreiben. Vielleicht haben wir eine Hintergrundfarbe von Grau anstelle von Weiß. Das wird funktionieren, aber wir können etwas Sexiereres als das machen. Was wir tun können, ist dies innerhalb verschachteln und ein kaufmännisches Und-Zeichen verwenden, um auf das übergeordnete Element zuzugreifen oder auf das übergeordnete Jetzt werden wir das einrücken. Jetzt wird es generieren und Sie können sehen, dass wir uns nicht mit der ausgewählten Schaltfläche dieses Elements wiederholen müssen , wir können das kaufmännische Und-Zeichen verwenden. Eine große Verwendung des kaufmännischen Unds, wie wir hier sehen, zielt also auf eine Pseudo-Klasse eines Elements ab. Wir müssen den Elementnamen nicht neu schreiben. Wir können es einfach mit dieser Pseudo-Klasse innen verschachteln. Wir können es auch tun, um Klassen zu ändern. Sagen wir zum Beispiel, wir hatten einen Kartenkörper grau. Nehmen wir einfach an, wir verwenden ein System wie BEM zum Schreiben von Klassen, was ich Ihnen in nur einer Sekunde zeigen werde. Sagen wir einfach, wir haben Karte, Entschuldigung, Kartenkörper, und wir verwenden einen Modifikator wie Grau. Also haben wir eine Hintergrundfarbe grau. Mal sehen, was wir hier bekommen. Wir haben Karosseriegrasen in Karten. Wir möchten ihm eine Hintergrundfarbe von Grau geben. Aber wie Sie hier sehen können, haben wir uns mit der Verwendung von Karosserie wiederholt. Was wir tun können, ist dies durch ein kaufmännisches Und-Zeichen zu ersetzen. Jetzt sitzt das jetzt auf der Karte, also musst du es nur noch einrücken. Jetzt können Sie sehen, wir haben genau das gleiche Ergebnis wie zuvor. Das war es, was wir vorher hatten. Das ist es, was wir jetzt haben. Wie Sie sehen können, genau das gleiche Ergebnis. Das ist Verschachtelung. Die nächste coole Funktion, die wir in SSAS haben, sind Variablen. Variablen werden also am häufigsten für Farben verwendet, aber wir können sie auch für Werte wie diese Polsterung verwenden, und es gibt uns einen Vorteil, unsere Farben einmal zu definieren und dann in der Lage zu sein , sie an einem Ort zu ändern und damit diese Änderung während des gesamten Projekts. Es erlaubt uns auch, Dinge wie zum Beispiel Namen zu geben, wir wollten diese mittlere Polsterung nennen. Nun, wir könnten hier oben eine Variable einstellen. Lasst uns das jetzt einfach machen. Medium - Padding 10 Pixel, und dann können wir diesen Wert hier durch die Variable ersetzen. Wir werden das gleiche Ergebnis in unserem CSS erhalten. Aber wenn wir dies später ändern müssen, wollen wir vielleicht einen höheren Wert für das mittlere Padding, wir können tatsächlich eingehen und die Variable hier und überall in unserem Dokument ändern , das auf diese Variable verweist. Es wird den neuesten Wert von hier oben ziehen. Meistens werden Sie jedoch Variablen sehen, die für Farben verwendet werden. Hier können Sie sehen, dass wir drei verschiedene Farben verwenden , die wir schwarz, weiß und grau haben. Offensichtlich muss die Beziehung zwischen diesen Farben Sinn ergeben, weil man Kontrast und all das haben muss. Was wir hier oben tun können, ist einige Namen für unsere Farben zu schreiben und dann können wir die Variable verwenden, anstatt sie explizit in unser Dokument zu schreiben. Ich werde Color-bg-dark haben. Dies wird uns erlauben, die dunkle Hintergrundfarbe jetzt zu ändern, ist es schwarz. Aber wir können das später für alle dunklen Hintergründe ändern, wenn wir es so wählen. Ich werde auch ein Farbe-bg-Licht haben, das weiß sein wird. Dort haben wir unseren hellen Hintergrund und wir haben unseren dunklen Hintergrund. Auch werden wir farb-Text-hell und farb-Text-dunkel haben. Eine sehr grundlegende Farben im Moment, aber wir können gehen und diese durch Hex-Codes ersetzen. Vorteil der Verwendung von Farbvariablen ist, dass wir uns nicht an verrückte Hex-Codes erinnern müssen. Wenn anstelle von Schwarz eine andere Art, Schwarz darzustellen, so ist, könnten Sie einen verrückteren Hex-Code haben, dann kann das ungefähr so sein. Ich weiß nicht, dass es irgendetwas sein könnte. Aber jetzt, da wir unsere Farben hier definiert haben, können wir jetzt unsere expliziten Farben durch diese Variablennamen ersetzen. Diese Hintergrundfarbe ist die dunkle Hintergrundfarbe, also werde ich das hier ändern, und das ist das Textlicht hier. Wir wollen einen hellen Text auf einem dunklen Hintergrund. Hier haben wir den hellen Hintergrund und den dunklen Text. Wir haben das Gegenteil. Wir haben auch dieses Grau. Ich werde nur diese Farbe sekundär nennen. Wir können das durch farb-sekundäre und farb-sekundäre ersetzen. Ich sehe, dass wir es nur als Hintergrundfarbe verwenden, also werde ich es vielleicht ein wenig benennen, indem ich hier in den Hintergrund setze, Hintergrund-sekundär. Sobald das neu kompiliert, was es automatisch tut, werden wir jetzt sehen, dass wir genau das gleiche Ergebnis in unserem CSS haben, aber wir haben Variablen hier. Was wir jetzt tun können, ist, dass wir den dunklen Hintergrund ändern können und es wird hier aktualisiert. Vielleicht wollen wir etwas Hektisches wie dieses verwenden, Hex-Code, und jetzt können Sie sehen, dass die Hintergrundfarbe der Dunkelheit wir tatsächlich nur einmal hier verwenden, aber das wird aktualisiert. Wir können dieses Farb-Text-Licht aktualisieren, aber vielleicht wäre diese graue Farbe besser zu aktualisieren, weil wir es an zwei Stellen verwenden. Lassen Sie uns das stattdessen in ein hellgrau ändern. Jetzt können Sie überall sehen, wo wir diese Variable verwenden, wird hier geändert. Dies ist natürlich praktisch, wenn Sie das Gesamtbild Ihres Stylesheets ändern möchten , indem Sie Variablen oder Farben an einem Ort ändern. Aber es hat den zusätzlichen Vorteil, Ihnen lesbare Namen zu geben , die Sie in Ihre Farbattribute einfügen können, besonders wenn Sie Hex-Codes verwenden. Es gab zahlreiche Male in Projekten, in denen ich den Hex-Code nachschlagen musste , den ich für bestimmte Dinge verwenden muss. Wenn ich SSAS benutze, könnte ich diese Primärfarbe einfach so etwas wie Farbe-primär benennen, und wann immer ich diese Farbe in meinem Dokument verwende, kann ich einfach farb-primär schreiben, anstatt sich an einen Hex-Code zu erinnern , der wahrscheinlich wird nicht so einfach wie #000 sein. Das ist ein weiterer großer Vorteil von Variablen. Das nächste Feature möchte ich Ihnen zeigen, und lassen Sie uns diese Funktionen jetzt beschriften. Dies ist Kursnummer 1, Verschachtelung, Nummer 2 Variablen. Schauen wir uns die Erweiterung/Vererbung an. Diese dritte Funktion, können wir zurück zu den docs gehen, scrollen Sie nach unten zu extend/Vererbung. Sagt, dass dies eine der nützlichsten Funktionen von SSAS ist. Es ermöglicht Ihnen, eine Reihe von CSS-Eigenschaften von einem ausgewählten zu einem anderen zu teilen. Ich glaube ehrlich, dass es nicht so nützlich ist, und ich werde Ihnen zeigen, warum in nur einer Sekunde. Aber lassen Sie uns tatsächlich ihr Beispiel kopieren und ich werde Ihnen zeigen, was es hier tatsächlich tut. Lassen Sie uns ihr Beispiel hier sagen. Dies hier ist ein Beispiel für etwas, das nicht angewendet wurde, also werde ich das einfach vollständig entfernen. Das Beispiel, das ich hier habe, eine Nachricht. Wenn wir hier nach unten das kompilierte CSS schauen, haben wir diese vier verschiedenen Nachrichtenstile, die jeweils diese drei Eigenschaften teilen. Aber je nachdem, ob es ein Erfolg ist, es ist ein Fehler oder es ist eine Warnmeldung, wir haben unterschiedliche Hintergrund- oder Rahmenfarben. Wie Sie hier sehen können, sparen wir nicht einmal so viel Platz, indem wir SSAS haben. Wenn Sie hier schauen, handelt es sich um die gleiche Anzahl von Zeilen zwischen dem Ausgabe-CSS und dem Beispiel hier in SSAS. Das ist ein Grund, warum ich kein großer Fan bin. Der andere Grund, warum ich kein großer Fan von extends bin, ist weil ich denke, dass wir einfach eine sekundäre Modifikatorklasse verwenden können. Was ich damit meine, ist, anstatt all das zu schreiben, schreiben wir einfach eine Nachricht mit diesen Eigenschaften. Dann können wir all dies ohne die Erweiterung tun. Dann müssen wir alles, was wir in unserem HTML tun müssen, ist sicherzustellen, dass wir beide Klassen einschließen. Wir schließen die Nachrichtenklasse ein, und wir schließen die Erfolgsfehler- und Warnklasse ein. Um klar zu sein, ist dies ein Beispiel von ssas-lang, und dann mein Beispiel hier. Wie Sie hier sehen können, erzeugt es eine ähnliche Anzahl von Zeilen für beide. Wenn Sie sich mein Beispiel ansehen, ist es ein kleiner Betrag, der als von der SSAS-Website ausgerichtet ist. Machen Sie Ihre eigenen Urteile. Aber das einzige Mal, dass es wirklich sinnvoll ist, extends in SSAS zu verwenden, ist, wenn Sie zwei Elemente haben , die gleich aussehen sollten, aber Sie wollen wirklich, dass die Klasse anders ist. Vielleicht haben Sie JavaScript an dieses Element gebunden oder vielleicht aus irgendeinem Grund, es macht nur semantisch Sinn, die Klasse anders zu haben, aber Sie wollen das Styling gleich. Nun, in diesem Fall macht es definitiv Sinn, eine Verlängerung zu verwenden. Aber es ist selten, dass ich diese Situationen habe, also bin ich eher ein Fan eine Basisklasse zu schreiben, und wenn ich dann ein Element erstellen muss, kann ich einfach die Nachrichtenklasse und die Erfolgsklasse darauf haben. Wenn ich dies ein bisschen klarer machen möchte, kann ich eine Nachricht - Erfolg, Nachricht - Fehler, Nachricht - Warnung haben. Solange ich die Klassennachricht und die Nachricht - Erfolg auf das Element setze , für das ich die Erfolgsnachrichtenstile haben möchte, dann wird es mir gut gehen. Wir können hier tatsächlich ein Beispiel der Verschachtelung verwenden. Wir können stattdessen das kaufmännische Und-Zeichen hier verwenden. Dies ist eine weitere Funktion, die ich von SSAS genieße, die wir hier verwenden können. Wir müssen diese auch einrücken. Dann, wie Sie sehen können, ist das viel kompakter als das Schreiben. Schaffen Sie sich Ihre eigenen Köpfe. Ich fühle mich nicht so mächtig, aber es ist da für den Fall, dass Sie es benutzen müssen. Eine andere Sache, die Sie in SSAS tun können, ist Operatoren zu verwenden Dies ist nicht besonders nützlich. EVA es ist nur eine Programmierfunktion, die Sie in SSAS verwenden können. Lassen Sie uns einen neuen Abschnitt für Operatoren erstellen. Lassen Sie mich hier nach unten zu Operatoren scrollen. Nehmen wir einfach dieses Beispiel Wort für Wort und legen Sie es auf unserem Spielplatz. Die Kommentare, die Sie hier in SASS erstellen, wo es tatsächlich in Ihrem CSS durchkommen. Übrigens werden diese Standard-CSS-Kommentare. So können Sie Kommentare in CSS und SASS machen, aber das sind nur reine SASS-Kommentare. Diese werden also nicht wirklich in Ihrem letzten Stylesheet durchkommen, nur damit Sie es wissen. dieses Beispiel für Operatoren ansehen, haben wir unseren Container mit einer Breite von 100 Prozent und wir machen hier tatsächlich etwas Mathematik, um die Breite des Artikels und die daneben herauszufinden. Wie Sie sehen können, ist die Ausgabe der endgültige Prozentsatz. Wenn ich diesen Prozentsatz vom Ende entfernt habe, werden Sie sehen, dass die Zahlen mit der Einheit kommen. Also brauchen wir diesen Prozentsatz da drin, nur um die Einheit zu definieren, aber sollte ziemlich klar sein, was hier vor sich geht. Wir nehmen absolute Werte von 600 in 960, und wir verwandeln das in einen Prozentsatz. Jetzt sind diese Breiten reaktionsschnell, anstatt nur 600 und 300 basierend auf einer Containerbreite von 960. Wenn diese Containerbreite 960 wäre, könnten wir das einfach entfernen und es wäre dasselbe. Aber wenn wir wollen, dass diese Container reagieren, dann sollten wir Prozentsätze verwenden. Diese Mathematik hier lässt uns das benutzen. Auch hier ist kein kritisches Merkmal von SASS. Ich finde mich nicht viel Mathematik in SASS zu schreiben, aber es ist eine coole Funktion, die, wenn Sie es brauchen. letzte Feature, über das wir in dieser Lektion sprechen werden und es ist wahrscheinlich dort oben in den Top 3 der coolen Funktionen in SASS ist Mixins. Mixins sind Funktionen, die Sie in einer Programmiersprache sehen würden, außer wir können sie in SASS verwenden. Ich werde nur ein Beispiel hier kopieren und dann können wir einen Blick darauf werfen, was es hier macht. Ich werde diesen Mixin-Code flex einfügen. Dieses Mixin wie eine Funktion in jeder Programmiersprache, nimmt ein Argument oder einen Parameter. Diese Variable wird in das Mixin gehen und kann im Mixin verwendet werden. Dann sind wir hier tatsächlich mit dem Mixin. Werfen wir einen Blick darauf, was das hier führt. Was wir hier haben, ist, wo wir diese Nummer von Eins in unser gebeugtes Element platzieren und wir werfen sie fast wie ein Generator hinein , der uns diese vier Attribute mit dieser Zahl geben wird. O wenn ich es hier auf zwei ändere, sehen Sie es Updates für alle von ihnen. Der Vorteil davon ist zum Beispiel, dass wir dieses Mixin nicht benutzt haben und so hatten wir es einfach so. Nun sagen wir zum Beispiel, etwas hat sich geändert und wir wollen einen anderen Flex-Wert verwenden. Nun, wir müssten hier reingehen und es an vier verschiedenen Orten ändern. Sagen Sie drei da, drei da, drei dort. Das ist ein bisschen ineffizient und wir wiederholen uns mehrmals. Stattdessen könnten wir das in einem Mixin abschließen. Wir wissen, dass wir jedes Mal, wenn wir flex ändern , auch diese vorangestellten Versionen auf den exakt gleichen Wert ändern wollen. Warum nicht ein Mixin verwenden? Wir tun das, indem wir plus den Namen des mixin setzen und dann können wir diesen Parameter übergeben. Wenn wir jetzt nach unten scrollen, sehen wir, dass wir das gleiche Ergebnis bekommen. Wie ich Ihnen bereits gezeigt habe, müssen wir nur eine Nummer ändern und es wird sie für alle vier ändern. Nun, das ist eine schnelle Einführung von Mixins, offensichtlich sind sie sehr mächtig und wir können sie für eine Vielzahl von Dingen verwenden. In dem Beispiel, wenn wir tatsächlich eine HTML-Webseite haben, werde ich Ihnen eine wirklich gute Verwendung von Mixins und Praxis zeigen. In der Tat werde ich Ihnen praktische Verwendungen all dieser Funktionen in der Praxis zeigen. Aber für dieses Video wollte ich Ihnen nur einen Überblick über die Funktionen und eine Demonstration dessen geben , was sie tatsächlich tun. Jetzt gibt es noch ein weiteres Feature hier. Wir haben Operatoren getan, erweitern und mixins, Verschachtelung von Variablen. Es gibt Partials und Module hier. Wir werden darüber in einem späteren Video sprechen, weil wir hier nur ein Dokument haben. Wir werden keine Partials einbringen, sondern Partials, wenn wir hierher zurückgehen, können wir tatsächlich teilweise SASS-Dateien erstellen, die kleine Snippets enthalten. Wir können SASS modularisieren, so dass wir unsere Variablen in einer Datei setzen können. Wir können unsere Erweiterungen sogar und dann in eine Datei setzen, Mixins in einer Datei aufsetzen, und dann können wir sie einbringen. Aber wir werden sehen, dass, wenn wir tatsächlich SAS Setup auf unserem Computer bekommen und damit anfangen zu arbeiten. Das ist eine schnelle Einführung in SASS. Wenn Sie mehr darüber erfahren möchten, was wir gerade behandelt haben, können Sie auf dieser Seite auf der SASS-Website gehen. Eine Sache, die ich tun möchte, bevor wir zum nächsten Video wechseln und tatsächlich SASS auf Ihrem Computer installieren, ist ich möchte zu SCSS wechseln. Wenn ich hier auf diese Schaltfläche klicke, wird jetzt plötzlich alles, was wir geschrieben haben, in SCSS geändert. Wie bereits erwähnt, ist SCSS genau wie SASS, aber zum Verschachteln verwenden wir die geschweiften Klammern genau wie in CSS. Wir verwenden Semikolons, um das Ende einer Regel zu definieren. Anstelle von gleich und Plus verwenden wir mehr beschreibende Wörter wie tatsächlich ein at mixin hier zu haben und bei Include zu schreiben. Der Vorteil der Verwendung von SCSS ist, dass es abwärtskompatibel mit CSS ist, also kann ich hier normales CSS einlösen und es wird kein Problem geben, es wird keinen Fehler geben. Vielleicht möchte ich eine Schriftfamilie von Times New Roman auf den Körper setzen. Wie Sie hier sehen können, muss ich es möglicherweise nur in Anführungszeichen setzen. Wie Sie hier sehen können, kommt es genauso in Ihrer Ausgabe-CSS-Datei heraus. Das ist wirklich gut, weil Sie all das nehmen können, was wir gerade generiert haben , und wenn ich einfach loswerde, was wir hier haben, und ich dieses CSS-Wort für Wort in unser SASS werfe, kommt es nicht mit Fehlern in unserem CSS auf. Also können wir hier reingehen und das umgestalten, wenn wir wollen. Ich kann hineingehen und einige Verschachtelungen machen und Sie werden sehen, dass wir den Vorteil haben, SASS zu verwenden, aber wir haben auch die Abwärtskompatibilität mit CSS. Deshalb verwenden die meisten Beispiele, die Sie online sehen werden, SCSS. Für den Rest dieser Klasse werden wir SCSS verwenden. SCSS steht für Sassy CSS, glaube ich. Es ist etwas, das sie nach der anfänglichen traditionellen SASS-Syntax entwickelt haben, weil sie erkannten, ich denke, dass es besser war, es mehr wie CSS aussehen zu lassen. Es erleichtert das Schreiben, wenn Sie es gewohnt sind, CSS zu schreiben. Wie bereits erwähnt, ist es abwärtskompatibel, so dass ich einfach eine beliebige Anzahl von CSS in eine SCSS-Datei werfen kann und es funktioniert. Das ist großartig, wenn ich nur etwas CSS schreiben möchte, aber ich habe nur eine SCSS-Datei. Beide werden in der gleichen Datei arbeiten. Es gibt viele Vorteile bei der Verwendung der SCSS-Version. Wie ich gerade sagte, wir werden SCSS von jetzt an verwenden. Aber größtenteils sollte es einfacher sein, mit SCSS zu verstehen , da es eher wie CSS aussieht. Du hast mich wahrscheinlich gesehen, als ich SASS schrieb, ich habe mich in die Angewohnheit geraten, Semikolons zu setzen. Ich bin es gewohnt, Dinge auf CSS-Weise zu schreiben. Ich denke, wenn SASS verwendet wird, macht die SCSS-Syntax nur sinnvoller. Ich hoffe, Sie haben diese Einführung genossen. Im nächsten Video werden wir tatsächlich einige Software auf Ihrem Computer installieren und diese Software wird SASS für uns kompilieren. Darauf freue ich mich. Wir sehen uns im nächsten Video. 4. Sass auf deinem Computer einrichten: In der letzten Lektion haben wir ein Online-Tool, SASSMeister, benutzt, um Sass in der Cloud superschnell auszuführen , ohne dass wir Sass auf unserem Computer installieren müssen. Ich wollte das schnell machen, damit wir die Funktionen von Sass sehen konnten, eine gute Einführung in sie bekommen. Aber jetzt ist es an der Zeit, Sass tatsächlich auf Ihrem Computer zu installieren , so dass Sie es tatsächlich in Ihren eigenen Projekten ausführen können. Wir werden tatsächlich ein Beispielprojekt von meiner GitHub-Seite in nur einer Sekunde verwenden. Aber was ich möchte, dass Sie tun, klicken Sie auf diesen Link für die Installation, und lassen Sie uns über einige der Möglichkeiten, wie wir Sass ausführen können lernen. Jetzt, wie Sie hier sehen können, gibt es uns eine Reihe von verschiedenen Apps zu betrachten. Leider bieten Sass nicht ihren eigenen Compiler, durch das Aussehen der Dinge. Wir können Sass in der Befehlszeile verwenden, aber in Bezug auf Anwendungen haben Sie eine Reihe von bezahlten und Open-Source-Optionen. Der einfachste Weg, den ich gefunden habe, Sass auf Ihrem Computer auszuführen ist die Verwendung von Sass Live Compiler innerhalb von VS Code. Was ist VS-Code? Nun, es ist nur ein Codierungs-Editor, der von Microsoft zur Verfügung gestellt wird. Es ist eigentlich kostenlos, was ziemlich genial ist. Wenn ich in Google nach VS Code suche, wird es der erste Link sein, und wie Sie sehen können, steht es für Visual Studio Code. Es ist ein ziemlich guter ID-Code-Editor völlig kostenlos und hat einige großartige Erweiterungen darin. Sie müssen diesen Code-Editor und diese Erweiterung nicht unbedingt für diese Klasse verwenden . Aber es gibt so viele verschiedene Möglichkeiten, es zu tun, und das ist der einfachste Weg, den ich gefunden habe. Es ist alles kostenlos, so automatisch wie möglich, also empfehle ich es definitiv. Ich bin offensichtlich auf einem Mac, also wird es mich bitten, für Mac herunterzuladen, aber Sie können wählen, welche Option Sie hier herunterladen möchten. Ich habe es bereits auf meinem Computer installiert, so dass ich nichts anderes tun muss. Ich habe auch den Live Sass Compiler bereits installiert. Alles, was Sie dafür tun müssen, ist auf die Registerkarte Erweiterungen von VS Code zu gehen, geben Sie Live-Sass Compiler ein und installieren Sie den hier. Angesichts der Tatsache, dass Sie VS Code installiert haben, und Sie haben diese Erweiterung auch installiert, lassen Sie uns tatsächlich ein Projekt öffnen und sehen, wie das funktioniert. Sie können jedes Projekt öffnen, das Sie wollen, oder Sie können zu meiner GitHub Seite gehen, GitHub, Christopherdodd/SkillShare. Wie es hier heißt, Ressourcen für alle meine Klassen auf SkillShare.com. Wenn Sie einige meiner anderen Klassen gemacht haben, sollten Sie mit diesem Repository vertraut sein. Genau hier habe ich dieses Sass-Klassenprojekt aufgenommen. Ich möchte, dass Sie diese herunterladen. Ich werde es hier in mein Code-Verzeichnis herunterladen. Sobald das Herunterladen abgeschlossen ist, möchten wir es erweitern. Jetzt können wir sehen, dass es erweitert ist. Wir wollen in VS Code gehen, öffnen Sie diesen Ordner, einen einzigen Klick, und klicken Sie dann auf „Öffnen“. Befreien Sie sich von diesem Willkommensbildschirm. Wie Sie sehen können, haben wir hier zwei Akten. Ein Index, der unsere Lernseite enthält, und unser Stylesheet genau hier. Wir haben ein paar reaktionsschnelle Breakpoints unten hier, wir haben einige Komponenten und wir haben unsere Basis und Reset hier oben. Ziemlich einfach. Das erste, was wir tun möchten, ist hier Go Live zu klicken, und das wird tatsächlich einen automatischen Server für uns mit VS Code erstellen. Ich werde darauf klicken. Jetzt können Sie sehen, wie unsere kleine Website aussieht. Es ist voll reaktionsschnell. Offensichtlich nicht die sexiesten Farben, und es hat einige ziemlich mutige Behauptungen hier. Es kann Ihr ganzes Leben verändern oder nicht. Offensichtlich kein Texter. Aber ja, das ist unser Projekt. Wenn Sie es auf dem iPhone betrachten, ist es reaktionsschnell. Ja, damit werden wir in den nächsten Videos arbeiten. Wir haben einen Live-Server läuft, das nächste, was wir tun wollen, ist anfangen, auch nach Sass zu schauen. Gehen wir in unsere CSS-Datei, und lassen Sie uns andere Stile schreiben. Das ist nur, um Ihnen zu zeigen, dass wir es zum Laufen bringen können. Wir haben hier andere Stile und unser Code-Editor wird automatisch erkennen, dass wir jetzt eine SCSS-Datei haben, also haben Sie Sass hier unten beobachtet. Ich werde hier ein weiteres Link-Tag erstellen, nur kopieren und einfügen, dass andere Stile, sollten wir diese anderen Stile nicht anderen Stil nennen, otherstyles.scss. Jetzt können Sie hier sehen, wir werden diese Stile hier einschließen. Wir werden auch otherstyles.css einschließen. Aber natürlich gibt es diese Datei noch nicht einmal. Wir haben gerade otherstyles.scss. Stecken wir das da rein? Natürlich nicht, weil wir SCSS nicht wirklich in unserem Browser ausführen können. Was hier passieren wird, wenn wir Sass ansehen, ist, dass diese Datei für uns generiert wird, mit dem, was hier drin ist. Jetzt, weil wir hier nichts getan haben, wird hier nichts generiert werden, außer einem Kommentar, der kein CSS sagt. Schreib uns ein paar Sass. Ein grundlegendes Merkmal ist, dass wir nisten können. Nehmen wir an, innerhalb des Körpers, innerhalb der Karte, und lassen Sie uns einfach etwas Dramatisches tun wie Hintergrundfarbe gelb wichtig. Wenn ich das speichere, wird es Änderungen erkennen. Was wird hier passieren? Sie können sehen, dass unsere CSS-Datei sofort generiert wird. Wenn wir hierher zurückgehen, können Sie hier sehen, dass das Gelb nicht durchkommt. Das liegt daran, dass ich Körper als Klasse behandelt habe, nicht als Element. Ich speichere, dass es die Sass aktualisieren und jetzt können Sie sehen die Farbe unserer Karten wird auf gelb geändert, wie Sie hier sehen können. Cool. Wir können dies jederzeit löschen. Es ist keine große Sache, denn jedes Mal, wenn wir Änderungen an unserer SCSS-Datei speichern , wird dies regeneriert. Wir müssen nur wirklich die SCSS-Datei verwalten. Aber natürlich ist die Ausgabe CSS, was wir in unserem Browser verwenden und wir verlinken in unserem HTML. Lassen Sie uns das einfach löschen, weil das nur für Demonstrationszwecke war. Ich werde andere Stile und alle Verweise darauf löschen. Ich habe versehentlich den gesamten Ordner dort gelöscht. Nichtsdestotrotz haben wir jetzt Sass in unserem Projekt ausgeführt, und es kompiliert automatisch unsere Sass und SCSS. Wenn Sie VS Code nicht verwenden möchten und einen Code-Editor verwenden möchten, müssen Sie sich natürlich eine andere Lösung ansehen. Dies ist die einfachste und offensichtlich eine völlig freie Art, dies zu tun. Möglicherweise haben Sie jedoch Ihre Präferenzen darüber, wie Sie Ihre Build-Tools einrichten möchten. Wenn Sie Ihre eigenen Präferenzen haben, kann ich leider nicht alle verschiedenen Möglichkeiten durchlaufen, Sass auf Ihrem Computer auszuführen. Auf jeden Fall, schauen Sie sich diesen Website-Link an. Sie haben ein paar Optionen hier, eigentlich, ich denke, ist Koala und Scout-App kostenlos, und Sie können auf ihre Website gehen, um herauszufinden, wie sie laufen. Aber ich habe festgestellt, dass das Ausführen von Live Sass Compiler auf VS Code super-einfach ist. Alles, was ich tun muss, ist, diese Uhr Sass zu laufen und sie erledigt den Rest für mich. Wenn das alles für dich geklappt hat und du jetzt Sass auf deinem Computer kompiliert hast, dann ist es definitiv Zeit, in das nächste Video zu gehen. Im nächsten werden wir tatsächlich anfangen dieses CSS, das ich vorher hatte, in SCSS umzuwandeln. Wir werden einige dieser Funktionen nutzen, über die ich in der vorherigen Lektion gesprochen habe. Ich freue mich darauf, Sie auf der nächsten Seite zu sehen. 5. CSS in SCSS konvertieren: Entschuldigung für den Beginn dieser Lektion, ich habe uns zurück zu unserem ursprünglichen Ausgangspunkt innerhalb des Sass-Klassenprojekts gebracht. Ich habe diese anderen styles.scss losgeworden. Wir haben gerade unsere HTML-Datei und dann haben wir die verknüpfte CSS-Datei. Genau wie im letzten Video, werden wir auf Go Live hier auf VS-Code klicken, um den Server auszuführen, und jetzt können Sie sehen, dass unsere Website zeigt. Was wir tun werden, ist eine styles.scss-Datei hier zu erstellen. Hier können Sie sehen VS-Code bestätigt hat, dass wir eine SCSS-Datei haben, also haben wir diese Watch Sass Taste hier. Ich werde zuerst alle dieser Stile in unsere styles.scss kopieren . Speichern Sie auf beiden, und jetzt werde ich auf „Watch Sass“ klicken. Jetzt können Sie sofort sehen, dass wir unsere Stile wieder generiert haben, aber mit SCSS. Wie Sie hier sehen können, gibt es tatsächlich ein paar andere Dinge, die Live Sass Compiler hinzugefügt hat. Vor allem haben wir hier einige Cross-Browser-Eigenschaften. Display Flex funktioniert in einigen Browsern nicht, daher fügt es automatisch die WebKit und die Microsoft-Version hinzu, so dass wir die Browserkompatibilität maximieren können. Wie Sie hier sehen können, auch einige Attribute hinzugefügt, die von unserem Stylesheet impliziert wurden, die sie hier nur sehr spezifisch gemacht haben. Abgesehen von diesen Änderungen ist dies genau das gleiche Stylesheet. Wenn wir wieder auf unsere Website gehen und wir die Seite aktualisieren, sollte sie genau gleich aussehen, und das tut es. Was wir jetzt tun können, ist, dass wir diese styles.css schließen können. Wir müssen es nicht mehr betrachten, und wir wollen nur aus dieser styles.scss-Datei arbeiten. Alle Änderungen, die wir hier vornehmen, werden automatisch kompiliert und in diese styles.css Datei eingefügt, und das ist natürlich die Datei, die unser HTML-Dokument verwendet, um die Webseite zu stylen. Aber wir müssen uns nicht mit dieser generierten CSS-Datei beschäftigen. Wir können einfach mit dem SCSS arbeiten, bis es ein Problem gibt In diesem Fall möchten wir einen Blick werfen und sehen, welches CSS es erzeugt. Aber bis dahin können wir hier einfach komplett arbeiten. Jetzt, wie ich Ihnen in unserer Demonstration gezeigt habe, ist das erste, was ich tun möchte, einige Variablen für die Farben zu schreiben. Es ist am besten, die oben in Ihrem Dokument zu tun. Anstelle von Variablen werde ich Farben setzen. Schauen wir uns an, welche Farben wir verwenden, und geben wir ihnen Namen. Genau hier haben wir eine Hintergrundfarbe von Blau. Wenn ich mir das Dokument anschaue, kann ich diese blaue Farbe am besten beschreiben, ist es die Primärfarbe. Es ist die eine Farbe, die auffällt. Wir haben gerade Schwarz, Weiß, was nicht wirklich Farben sind, und dann haben wir Blau. Ich werde dies anstelle von blau, Farbe Hintergrund primär nennen. Jetzt lassen Sie uns diese Variable hier oben erstellen, Hintergrundfarbe primär, und wir können es auf blau setzen. Lassen Sie uns durch und finden Sie andere Verweise auf diese Hintergrundfarbe blau. Dieser hat eine etwas andere Hintergrundfarbe. Hier können Sie in der Seitenkopfzeile sehen, wir verwenden, dass blau. Wir können es durch unsere neu erstellte Variable ersetzen. nach unten scrollen, können wir sehen, dass die Karte einen blauen Hintergrund hat. Wir können das ändern, um Farbe Hintergrund primär. Warte, nein, das ist die Schriftfarbe. Wir wollen das nicht ändern, und ich denke, das könnte es sein. Wenn wir unser Dokument speichern, aktualisieren Sie die Seite, werden Sie sehen, dass sich nichts geändert hat. Aber wie ich Ihnen bereits gezeigt habe, wenn wir diese Hintergrundfarbe primär ändern wollten, wird es vielleicht ein hellblau sein, jetzt können Sie sehen, dass alle Hintergründe geändert wurden. Die nächste, die ich ändern werde, ist die Vordergrundfarbe. Wo immer es eine Schriftfarbe mit Weiß gibt, werde ich das in Farbschriftart ändern, sagen wir hell. Kopieren Sie das. Schreib es hier oben. Lassen Sie uns unsere helle Schriftfarbe weiß machen. Lassen Sie uns das auch hier ändern, Farbe-font-hell. Wo sonst reden wir über Weiß, machen wir es auch hier. Auch hier zum Sektions-Newsletter. Auch hier gibt es tatsächlich einige Spots. Das Ding, an das man sich erinnern muss, ist nicht einfach jedes Mal zu ersetzen, wenn man weiß sieht, es muss Sinn ergeben. Was wir tun, ist, dass wir hier die Farbe beschreiben. Es ist wichtig, wie man das nennt. Das ist unsere helle Schriftfarbe. Aus irgendeinem Grund im Internet werden Sie sehen, dass die Konvention darin besteht, Farbe zu schreiben und dann die beschreibenden Wörter danach zu schreiben. Sie könnten dies immer einfach in umgekehrte, primäre Hintergrundfarbe setzen. Es liegt an dir. Dies ist jedoch, wie es durch Konvention gemacht wird. Welche anderen Farben haben wir hier? Wir haben unsere Körpertextfarbe. Also Farbschriftart, nennen wir es einfach primär, und es wird dieser spezielle Hex-Code sein. Ich werde das oben platzieren, und ich werde sie einfach ein wenig schön bestellen indem ich zuerst die Schriftfarben und dann die Hintergrundfarben habe. Jetzt können wir das hier ersetzen. Mit diesem werden wir uns ein wenig später beschäftigen, und wie Sie hier sehen können, haben wir diese Hintergrundfarben von Schwarz. Ich werde eine Farbe-Hintergrund-dunkel mit dem Wert von Schwarz erstellen. Jetzt, wenn wir dunkle Hintergründe haben, werde ich es durch meine Variable ersetzen. So wie solche. Großartig. Jetzt lassen Sie uns einfach noch einmal mit unserem Dokument einchecken, stellen Sie sicher, dass wir keine großen Fehler gemacht haben. Gut. Diese Schriftart primär, glaube ich nicht, ist der beste Name. Ich werde es stattdessen font-default nennen. Ich möchte immer wieder diese Farbe hier beschreiben, das Blau. Ich werde diesen Farbfont-Standard nennen. Wieder, wie Sie nennen, liegt an Ihnen. Aber ich bemerkte, dass so ziemlich der ganze Text entweder blau oder weiß ist, mit nur dieser unten, ist diese graue Farbe, die dreifache sieben Farbe. Ich werde stattdessen diesen Font-Standard nennen. Ich habe auch hier unten bemerkt, dass wir eine Schriftfarbe von diesem Blau haben. Ich möchte das stattdessen eine Farbfont-primär nennen. Ich denke, dieser Name macht viel mehr Sinn. Ich gehe hier rauf, farb-font-primär, blau, und es gibt noch eine Farbe hier. Wir müssen nicht unbedingt Farbvariablen für alle unsere Farben erstellen, genau dort, wo es sinnvoll ist. Hier für die Lichter Hintergrund, Farbe-Hintergrund-Licht. Nun sagen wir hell um Konsistenz willen, und lasst uns Farbe-Hintergrund-Licht gehen. Jetzt haben wir unsere Variablen definiert. Ich habe tatsächlich einen Fehler hier in unserer Live Sass Compile Konsole bekommen. Anscheinend haben wir eine undefinierte Variable von Farbe-Hintergrund-hell. Los geht's. Ich habe dieses Licht versehentlich genannt. Man kann es hell oder hell nennen, nur etwas, das es beschreibt. Jetzt sieht es so aus, als wären wir gut. Wenn ich die Seite aktualisiere, ist alles gut. Das ist die andere Sache, die zu beachten ist, dass, wenn es einen Sass-Fehler gibt, er nicht in die CSS-Datei kompiliert wird. Wenn Sie die Seite in Ihrem HTML-Dokument aktualisieren, sehen Sie möglicherweise keine Änderung, also denken Sie, oh ja, es funktioniert. Aber dann überprüfen Sie hier und Sie erkennen, dass es die neuen Änderungen tatsächlich nicht kompiliert. Es zeigt nur eine ältere Version der CSS-Datei an. Was Sie tun möchten, ist hier regelmäßig nachzusehen, stellen Sie sicher, dass es keine Sass-Fehler gibt, und wenn Sie jemals etwas ein wenig funky erleben, wissen Sie nicht, was los ist, können Sie immer die Ausgabe überprüfen CSS und stellen Sie sicher, dass es richtig über. Wir haben unsere Variablen hier oben, und das macht es uns einfacher, ein bisschen Theming zu machen. Sagen wir einfach, anstatt einen schwarzen Hintergrund zu haben, wollen wir alle dunklen Hintergründe zu dunkelgrau erstellen, ich denke, das ist eine Farbe, und jetzt können Sie sehen, dass der Kontrast nicht der beste ist, aber wir können tatsächlich alle der Dunkelheit beeinflussen Hintergründe in unserem CSS-Dokument. Hoffentlich werden jetzt die Vorteile der Verwendung von Variablen deutlich. Nummer 1, können wir die Variable an einem Ort ändern, und Nummer 2, wir geben nur die Farben mehr von einem beschreibenden Namen. Auch Nummer 3 ist, wenn wir einen Hex-Code wie diesen haben, müssen wir uns nicht jedes Mal an den Hex-Code erinnern, wenn wir diese Farbe verwenden möchten, können wir diesen Namen stattdessen verwenden. Dies sind einige Vorteile, wenn Sie Ihre Farben in Variablen speichern. Jetzt, wie wir vorher gesehen haben, haben wir hier diese zusätzliche Farbe, die keiner Variablen zugeordnet ist. Der Grund dafür ist, dass diese Farbe genau blau, aber um 20 Prozent dunkler ist. Es ist genau diese Farbe, die um 20 Prozent verdunkelt wird. Dafür können wir tatsächlich eine Funktion verwenden. Wir haben Mixings in Sass gesehen, aber es gibt tatsächlich auch einige integrierte Funktionen. Lassen Sie uns tatsächlich auf die Website gehen und diese hier nachschlagen. Ich gehe hier rüber zum Suchfeld. Es spielt keine Rolle, welche Seite Sie auf der Sass-Website sind und ich werde nach dunkeln suchen. Ich werde auf das Ergebnis klicken, um zu verdunkeln, und wie Sie hier sehen können, nimmt es als erster Parameter eine bestimmte Farbe, und dann dauert es als zweiten Parameter, wie viel Sie diese Farbe verdunkeln möchten. Wie Sie hier sehen können, einige Beispiele, können Sie auch entsättigen, es gibt viele verschiedene Funktionen. Wenn Sie gehen wollen, überprüfen Sie diese Seite, können Sie Farbe, anpassen auf viele verschiedene Arten. Aber verdunkeln ist ziemlich einfach. Ich werde nur die Farbe hier oben nehmen, die Farbe hintergrund-primär, scrollen zurück zu wo dunkeln ist, und der zweite Parameter, ich werde 20 Prozent setzen. Lasst uns retten. Denken Sie nun daran, dass dies in einem Hover-Zustand ist. Wenn ich also zurück zu meiner Webseite gehe und die Seite aktualisiere, sollten wir die gleiche Farbe um 20 Prozent abdunkeln sehen, wenn ich den Mauszeiger über die Schaltfläche führe, und dies erneut wiederholen, ist es gut , um hier eine Variable zu verwenden, denn wenn wir diese Hintergrundfarbe primär in etwas anderes ändern, wie zum Beispiel ein hellblau, und aktualisieren Sie die Seite. Leider haben wir hier einen Fehler, ich habe vergessen, mein $ Zeichen zu setzen. Wenn wir die Seite aktualisieren, werden Sie sehen, dass sie die Standardfarbe dieser Schaltfläche verdunkelt, sodass sie auf die Farbe reagiert, die in dieser Variablen gespeichert ist. Wenn wir keine Variable hätten. Lassen Sie uns das wieder blau setzen, und stellen wir sicher, dass es $-Zeichen gibt. Wenn wir diese Funktion nicht benutzt haben und wir nur das benutzt haben, was ich vorher hatte. Wenn wir die Farbe der Farbe hintergrund-primär in hellblau ändern, werden Sie sehen, dass es immer noch die gleiche Farbe ist, die wir speziell definiert haben. Daher ist die dunkle Funktion, die eine Variable verwendet eine gute Möglichkeit, die gleiche Farbe zu erhalten, wie Sie in der Variablen gespeichert haben, aber nur auf eine bestimmte Weise manipuliert. Gehen, um dies wieder neu zu schreiben, dunkle Farbe, Hintergrund-primäre 20 Prozent, und es ist auch gut zu lesen. Wir können sehen, dass dies die Farbe Hintergrund-primär, aber 20 Prozent dunkler ist. Egal, was diese Farbe ist, wenn Sie den Mauszeiger darüber bewegen, wird es um 20 Prozent gefärbt, ziemlich cool. Ich werde das wieder in Blau ändern, weil Hellblau einfach zu hell ist, und wir haben unsere blaue Farbe zurück. Die nächste SAS-Funktion, die ich Ihnen in diesem kleinen Projekt zeigen möchte, ist Extents. Wie ich bereits erwähnt habe, bin ich kein großer Fan von Ausdehnungen. Ich denke, es gibt nur ein paar Situationen, in denen Sie es wirklich verwenden müssen. Aber wir haben hier unten eine Situation mit den Schaltflächen, die wir umgestalten könnten, um Extents zu verwenden, also lasst uns das jetzt tun. Wenn ich in meine index.html gehe, können wir sehen, was ich getan habe, sind zwei Klauseln auf jeder Schaltfläche enthalten, also haben wir unseren CTA-Button genau hier, und hier unten haben wir unseren Newsletter-Button. Anstatt Extents zu verwenden, möchte ich nur eine Basisklasse hinzufügen, so wie Sie sehen können, haben beide unterschiedliche Klassennamen in Bezug auf den eigenen Newsletter-Unterstrich, Unterstrich-Taste, und die andere ist CTA-Unterstrich, Unterstrichtaste. Aber beide haben eine zweite Klasse auf ihnen, die ihnen die Basis-Button-Stile gibt. Aber die Idee hinter der Verwendung einer Ausdehnung in SASS ist, dass wir nur eine Klasse verwenden müssen Wenn ich also nur btn, die zweite Klasse von beiden entferne und das speichern. Gehen Sie hier zurück, und Sie können sehen, dass wir die Basis-Level-Stile für unsere Schaltflächen hier verloren haben. Was ich tun werde, ist hier zurück in unsere CSS-Datei zu gehen, und anstatt eine Klasse für Schaltfläche zu haben, werde ich dies in eine Ausdehnung verwandeln, also genau hier, und für den Hover-Zustand werde ich das in eine Verlängerung, und dann für jede dieser Schaltflächen, können wir dieses CSS einschließen, also hier unten in CTA-Taste, werde ich erweitern btn schreiben, und dann werde ich das gleiche für den anderen Newsletter-Button tun. Ich kann es hier verlängern. Speichern, aktualisieren Sie hier, oder in der Tat wurde es für uns aktualisiert, und Sie können sehen, dass wir genau das gleiche Ergebnis wie zuvor haben. Wie Sie sehen können, haben wir nicht wirklich viel Einsparungen in Bezug auf Codezeilen erzielt. Aber was wir getan haben, ist die Menge der Klauseln zu reduzieren , die wir für ein bestimmtes Element verwenden müssen. Ich denke nicht unbedingt, dass das eine große Sache ist, aber es hat definitiv seine Vorzüge, und es ist eine Funktion von SAS, die Sie vielleicht nutzen möchten. Lassen Sie es uns vorerst mit der SAS-Implementierung belassen. Das letzte, was diese CSS-Datei wirklich von uns und Mixins profitieren würde. Eine große Verwendung von Mixins ist für die Erstellung Ihrer Eisenmedien-Abfragen. Wenn ich hier nach unten scrolle, habe ich Medienabfragen für mehrere verschiedene Bildschirmgrößen, und ich habe sie bereits mit einer Variablen beschriftet, die wir in unseren Mixins verwenden werden, also hier ist dies die Medienabfrage für Breitbildschirmgrößen, und wie Sie sehen können, habe ich einige Stile drin. Dies ist wie mittlere Bildschirmgrößen, Desktop-Medium und Breitbild-Größen. Nur alle Desktop-Bildschirmgrößen, dann haben Sie Tablet-Bildschirmgrößen, und mobile Bildschirmgrößen. Einige von ihnen haben Stile in ihnen, einige dieser Kantendefinitionen, die ich haben möchte, nur für den Fall, dass ich sie verwenden muss, aber das sind die Haltepunkte, die ich eingerichtet habe. Jetzt, wie Sie sehen können, können wir immer nur, wenn wir sagen wollten, zum Beispiel einen anderen Stil für Codekörper durch einen dieser Haltepunkte haben, wir können es einfach werfen, in den wir hier tatsächlich auf unserer -Tablet-Bildschirmgrößen haben wir die Schriftgröße im Codekörper kleiner gemacht, aber es gibt einen besseren Weg, es mit CSS zu tun, und das ist, was ich Ihnen in diesem Video zeigen möchte. Was ich tun werde, ist, alle diese reaktionsfähigen Haltepunkte nach oben zu verschieben, und dann werden wir sie in SASS verwandeln, also werde ich hier einen Kommentar erstellen, Medienabfragen, und lassen Sie uns diese hier. Dies wird es brechen, wenn wir das einfach speichern und es hier wegen der Bestellung unseres CSS ausführen, das wird falsch bestellt werden, also werden wir anfangen, Dinge zu sehen. Vielleicht nicht, aber es besteht die Chance, dass es zusammenbrechen könnte, weil wir die Bestellung geändert haben. Aber was wir hier tun werden, ist, dass wir diese Medienanfragen nicht einfach hier oben lassen werden. Wir werden diese hier oben nur als Referenz haben, damit wir unsere eigenen Mixins schreiben können , die Medienabfragen für uns generiert. Es gibt eine Reihe von Möglichkeiten, wie wir dies tun könnten, wir könnten ein Mixins für jede einzelne Break-Punkt-Bildschirmgröße erstellen, oder wir können einen erstellen und eine if-Anweisung verwenden, um zu bestimmen, auf welche Bildschirmbreiten angewendet werden sollen, also mag ich den if-dem-Ansatz, also werde ich das tun, und was uns das ermöglicht, ist einfach eine Mixins-Code-Medienabfrage zu schreiben. Ich habe diese so viele verschiedene Dinge in der Vergangenheit beschriftet gesehen, können Sie nennen es reagiert auf, oder Bildschirmgröße, oder was auch immer Sie es nennen möchten. Ich nenne es gerne Medienabfrage, weil es genau das ist, was es ist , und für den Parameter werden wir in Größe setzen. Ich werde diese Mixins öffnen, und ich werde meine erste if-Anweisung schreiben. Wie Sie hier sehen können, habe ich allen diesen Bildschirmbreitenbereichen bereits Namen gegeben, also können wir das hier als unser Attribut verwenden, also werde ich eine if-Anweisung mit der Syntax hier erstellen, wenn Größe W gleich Desktop breit ist, wir brauchen das $ Zeichen nicht erneut zu verwenden oder dies in Zitate zu setzen, dann möchten wir, dass die Medienabfrage von hier angewendet wird. Ich werde das nur kopieren und einfügen, und was wir tun, um den Inhalt hier zu zeigen , ist, einfach dieses spezielle Inhalt-Tag einzufügen. Sie werden sehen, wie das funktioniert in nur einer Sekunde. Jetzt werde ich eine else if-Anweisung erstellen, und wenn die Größe Desktop-Medium sein wird. Dann ist die Medienabfrage, die ich verwenden werde, diese. Wieder, was wir tun müssen, schließen Sie das ab und setzen Sie Inhalte. Der nächste Haltepunkt, den wir einbauen werden. Wir können das jetzt wirklich loswerden, weil wir eigentlich keine Stile haben. Lassen Sie uns diesen Desktop Medium M-breit machen. Ich habe vergessen, die Gleichen hier oben zu setzen. Denkt daran, Leute, ihr müsst diese nicht genau so nennen, wie ich meins genannt habe. Ich habe meine Haltepunkte definiert, wie ich sie mag. Sie müssen in den spezifischen Bildschirmbreiten kein Desktop-Medium M-breit verwenden. So habe ich es eingerichtet. Du kannst hier alles benutzen, was du willst. Inhalt, so dass man auch keine Stile darin hat, also werde ich nur diesen entfernen. Dann haben wir einen Desktop, scrollen nach unten, kopieren ihn wieder und stellen sicher, dass wir das Inhalts-Tag drin haben. Dieser hat auch keine Stilregeln, also kann ich das einfach entfernen. Dann haben wir eine Tablette. Sonst, wenn die Größe gleich ist, entspricht Tablette. Ich kopiere das Einfügen. Im Inhalts-Tag werde ich das nicht löschen, weil es einige Stile darin gibt und schließlich unseren mobilen Haltepunkt oder Bildschirmgrößenbereich haben. Ich werde sonst schreiben, wenn die Größe gleich mobil ist und unser letztes Content-Tag dort hineinwirft. Jetzt haben wir alle diese Bildschirmbreiten in dieser einen Medienabfrage definiert. Dies richtet das Mixin ein. Wir haben es noch nicht benutzt. Nun, da wir sie einrichten, können wir diesen Mixin verwenden. Sie können sehen, wie dies dazu führt, wie wir Medienabfragen schreiben. Was ich tun werde, ist, dass ich hier sehe, dass ich einen anderen Stil für die Schriftgröße der CTA-Überschrift habe, wenn wir auf dem Desktop weit sind. Lassen Sie mich einfach die Schriftgröße nehmen. Lassen Sie uns nach unten gehen und CTA Unterstrich Überschrift finden. Los geht's. Hier ist die Standardschriftgröße. Aber natürlich wollen wir, dass es fünf Pixel größer auf einem breiten Bildschirm zeigt. Was wir hier tun können, ist unser neu geschaffenes Mixin zu verwenden. Ich werde schreiben, gehören. So fügen Sie ein Mixin ein. Medienabfrage einschließen. Ich glaube, Breakpoint war Code desktop-weit. Da ist der erste da und lassen Sie uns diese alternative Schriftgröße einwerfen. Speichern Sie das, keine Fehler in unserer Konsole. Mal sehen, ob das tatsächlich funktioniert hat. Ich werde unsere Responsive Tools öffnen und auf eine sehr große Bildschirmgröße klicken. Dieser ist ein sehr breiter Bildschirm mit mehr als 2.000 Pixeln. Wenn ich mit der rechten Maustaste klicke, um die CTA-Überschrift zu überprüfen, können Sie sehen, dass dieser responsive Stil jetzt über den Standard angewendet wird. das ein- und ausschalten, können Sie sehen, dass auf breiteren Bildschirmen, wir haben die CTA ein wenig größer. Das funktioniert. Lassen Sie uns nun den Rest unseres Codes durchlaufen und umgestalten, um dieses Medienabfragemixin zu verwenden. Wir können diese jetzt entfernen und für unsere Newsletter-Überschrift werden wir die Schriftgröße auf Desktop-Breitbildschirmen ändern. War es Newsletter-Unterstrich Überschrift? Lassen Sie uns hier nach unten gehen und schreiben“ schließen Medienabfrage Desktop weit von einer anderen Schriftgröße“. Jetzt können wir diese Medienabfrage ganz loswerden. Lassen Sie uns jetzt zu den Tablet-Bildschirmgrößen gehen. Was wir hier tun, ist auf der Tablet-Bildschirmgröße. Wir werden die Schriftgröße kleiner auf Unterstrich Unterstrich Körper machen. Hier unten, schneiden Unterstrich Unterstrich Körper, gehen in Medienabfrage zu werfen, glauben, es war Tablet, und da gehst du. Die Schriftgröße ist jetzt für Kartenkörper auf Tablet-Bildschirmgrößen kleiner. Wir können hier wieder rauf gehen und das hier entfernen. Wir können diesen Kommentar auch entfernen. Jetzt haben wir gerade unsere mobilen Bildschirmgrößen. Eine Flex-Reihe, wir werden die Flex-Richtung ändern. Flex-Zeile „enthalten Medienabfrage mobile“. Sie können hier sehen, dass dies viel lesbarer ist. Hier sind die Stile für die Flex-Zeile. Dies ist, was es standardmäßig hat. Aber auf einer mobilen Bildschirmgröße möchten wir, dass die Flex-Richtung Spalte ist. Es ist viel schöner, glaube ich, als diese immer und immer wieder auszuschreiben. Wir haben, wie Breakpoints definiert und Labels mit netten Namen. Wir können sie einfach in das CSS Inline werfen und wir haben alles ziemlich gut gebündelt. Ich hoffe, Sie fangen an, das jetzt zu sehen. Lassen Sie uns den Rest davon beenden. Wir haben die Karte nicht das letzte Kind. Wir möchten, dass der Rand unten 15 Pixel beträgt, und wir müssen dafür ein neues erstellen. Karte, dort gehen wir, nicht das letzte Kind, und dann werden wir „die Medienabfrage mobile“. Die andere Art und Weise, wie wir das schreiben könnten, ist so. Du könntest es andersherum schreiben. Aber wir werden das tatsächlich mit Verschachtelung in einer Sekunde umgestalten. Ich werde es vorerst so schreiben. Ich werde das entfernen. Jetzt haben wir nur noch einen letzten Stil. Site-Bindestrich Kopfzeile Unterstrich Titel. Ich glaube, wir haben dieses eine Setup auch nicht. Wir gehen Website und fügen Sie dann Medienabfrage mobile und geben ihm, dass Padding. Jetzt können wir alle unsere Medienabfragen entfernen, weil es jetzt alles von unserem Mixin hier oben behandelt wird. Lassen Sie uns einfach speichern überprüfen, wie Sass Konsole hier unten. Sieht gut aus. Aktualisieren Sie unsere Seite und wir sollten jetzt sehen, dass alles genau gleich funktioniert. Aber es ist nur viel schöner, in Bezug darauf zu lesen, wie wir unseren Code geschrieben haben. Es ist auch viel einfacher zu verwalten. Los geht's. Alles in Bezug auf unsere Reaktionsfähigkeit funktioniert noch. Wir haben hier die Kraft dieses Mixins voll ausgeschöpft. Nun, das letzte Feature, das ich Ihnen in dieser Lektion zeigen möchte, ist Verschachtelung. Offensichtlich haben wir in der ersten Lektion geschachtelt, wo wir es in SASSMeister ausprobiert haben, aber hier in einem eigentlichen Projekt, wo können wir tatsächlich Gelegenheiten finden, zu nisten? Nun, in meinem speziellen Projekt, was ich getan habe, ist ein CSS-Benennungskonventionscode BEM. BEM steht für Blockelementmodifikator. Das sind diese seltsamen doppelten Unterstreichungen, falls Sie sich fragen. Wenn Sie BEM verwenden, schauen wir uns jetzt BEM an. Sie können auf ihre Website gehen und erfahren, wie es funktioniert. Ich bin ein großer Fan von BEM. Ich finde, es ist großartig. Aber eines der Merkmale von BEM ist, dass es eine Verschachtelung eingebaut hat. In diesem speziellen Projekt muss ich nicht wirklich nisten, denn wie Sie sehen können, ist der Unterstrich die Verschachtelung für uns zu tun. Es ist nur Teil der Namenskonvention. Aber was ich in einer Sekunde tun werde, ist, dass ich diese BEM-Klassen entfernen und wir können sehen, wie wir Verschachtelung in diesem Projekt verwenden können. Für den Fall, dass Sie diese BEM-Klasse Namenskonvention nicht verwenden wollten. Diese Website ist getbem.com Wenn Sie mehr über BEM erfahren möchten, etwas, das ich für das letzte Jahr verwendet habe und ich mag, aber nicht jeder ist ein Fan von BEM. Machen Sie definitiv Ihre Recherche darüber. Eine Sache, die wir trotz der Verwendung von BEM in diesem Projekt tun können, ist die Verwendung von kaufmännischen Unds. Es gibt ein paar Stellen in unserem Code hier, an denen die Verwendung eines kaufmännischen Unds sehr sinnvoll ist. Lassen Sie mich durchgehen und sehen, wo wir uns wiederholen. Hier können wir ein klassisches Beispiel sehen, wo ein kaufmännisches Und-Zeichen Sinn macht. Wir haben unsere Verlängerung hier, Prozentzeichen, BTN zweimal definiert. Was wir stattdessen tun können, ist, dass wir alles nach diesem zweiten BTN kopieren können, und dann können wir innerhalb der BTN-Regel gehen und ein kaufmännisches Und-Zeichen verwenden. Jetzt werden wir genau das gleiche Ergebnis erhalten. Es ist nur schöner und sauberer. Lass uns nochmal durchgehen und sehen, wo wir es sonst benutzen können. Wenn wir wollten, könnten wir hier reingehen und so nisten. Dies fügt nicht zu viel hinzu, aber es ist eine Option Wenn ich das speichere, aktualisiere die Seite hier drüben, erhalten wir das gleiche Ergebnis, also was wir getan haben, ist, dass wir bereits den Punkt CTA hier oben verwendet haben, Also, was wir tun können, ist, dies einfach in den CTA-Regelsatz zu verschieben und auf den Namen der Eltern zu verweisen, indem Sie dieses kaufmännische Und-Zeichen verwenden. Manche Leute mögen es so, manche Leute mögen es nicht wirklich so, also werde ich es so zurücksetzen, wie es eigentlich war , weil ich denke, dass es ein bisschen überschaubarer ist, dass die Option da ist , um kaufmännische Unds zu verwenden wenn Sie Ihre Klassen auch in BEM benennen, gibt es ein anderes Beispiel, das ich früher gesehen habe, als ich hier beheben möchte, ist dieses. Wo also einen Pseudo-Selektor auf diese Karte setzen, also brauchen wir hier wirklich keine andere Definition, also was ich tun werde, ist ein kaufmännisches Und-Zeichen zu verwenden und es innerhalb dieser Kartenkomponente dort zu verschachteln. Aktualisieren Sie beim Speichern die Seite, während diese auf der mobilen Bildschirmgröße angezeigt wird, um sicherzustellen, dass sie funktioniert. Entschuldigung, iPhone X, und wenn wir eine Karte untersuchen, die nicht das letzte Kind ist, das entweder dieses oder dieses ist, können Sie sehen, dass wir immer noch diesen Stil mit dem kaufmännischen Und-Zeichen erhalten haben, aber offensichtlich gilt es nicht für die letzte -Karte. Wie ich bereits erwähnt habe, verwendet dieses Projekt BEM, also wird die Verschachtelung von dieser Konvention mit den doppelten Unterstrichen für uns gesorgt, aber sagen wir zum Beispiel, wir haben alle Elemente innerhalb unserer Blöcke entfernt. Das coole Konzept in BEM ist, dass Sie Ihren Block hier haben, und dann in Ihrem Block haben Sie Elemente. Die Art, Ihre Elemente zu benennen, besteht darin, ihnen den Blocknamen voranzustellen , gefolgt von Unterstrich. Aber sagen wir einfach, wir mögen BEM nicht und wir werden diese einfach komplett entfernen. Also werde ich all diese Element-Level-Selektoren loswerden, kein Kartenkörper mehr, kein Kartentitel mehr, ich könnte dies schnell vorwärts gehen, weil es einige Instanzen hier gibt, wir nehmen im Grunde nur weg alles , was diese doppelte Unterstriche Namenskonvention verwendet. Ich habe alle Selektoren auf Elementebene abgesehen von diesem entfernt, und abgesehen von diesem hier, weil dies ein div innerhalb eines div ist, also werde ich diesen einfach hier lassen, du könntest es auch einfach nennen wie das auch. Also lassen Sie uns unsere Seite speichern und aktualisieren und wir sollten sehen, dass unser Layout jetzt kaputt ist. Das Layout ist also in Ordnung, aber viele unserer Stile sind kaputt. Nun, was wir tun können, ist Verschachtelung anstelle von BEM zu verwenden. Also genau hier für CTA Überschrift, die Überschrift, die wir hatten, ist nur ein h2. Also, anstatt CTA-Überschrift zu haben, was ich tun kann, ist, dass ich all dies nehmen und nur das h2-Element innerhalb unseres CTA anvisieren kann. Das Gleiche mit Knopf, unser Knopf ist einfach ein, ein Tag. Also kann ich hier reingehen, all das kopieren und unsere Regeln für das a Tag verschachteln, da drin. Jetzt sollte unser CTA Abschnitt zurück zu dem sein, was es vorher war, ja jetzt lasst uns dasselbe mit dem Abschnitt Newsletter machen, also haben wir unsere Newsletter-Überschrift genau hier, was ein h2 ist, genau wie wir es mit dem CTA getan haben Abschnitt, also werde ich alle diese Stile hier nehmen und dann hier verschachteln. Also hat jeder h2 innerhalb eines Newsletter-div oder eines Newsletter-Elements jetzt die Stile. Gleiche gilt für Newsletter-Form, so dass wir nur das tatsächliche Formularelement hier durch seinen Elementnamen und nicht durch eine bestimmte Klausel, also Form, und dann dasselbe mit Eingabe und Schaltfläche, so dass wir Eingaben tun können, -Button Ich glaube, es war ein Buttonelement, also können wir einfach einen Element-Selektor hier verwenden, all das verschieben, und mal sehen, ob unser Newsletter in Ordnung aussieht, ja, sieht genau so aus, wie es vorher war, also werde ich jetzt schnell vorwärts und machen den Rest Konsistenz. Dieses letzte Kartenkomponenten-Beispiel hier ist ein perfektes Beispiel dafür, warum ich BEM gerne benutze. Sie können hier sehen, dass es für unsere anderen einfach war, Elemente zu zielen, speziell in unserem Newsletter div und unserem CTA div, da es sich um verschiedene Elementnamen handelte. Wir haben h2, wir haben Absatz-Tag, und wir haben einen Tag. Hier in unserem Newsletter haben wir ein Formular, wir haben ein Eingabe-Tag und wir haben einen Button Tag. Der Fall in unseren Karten ist, dass wir divs in unserem div verwenden. Die Klauseln haben tatsächlich dazu beigetragen, sie zu differenzieren. Stattdessen schreibe ich mit diesem Ansatz, keine zusätzliche Klasse zu schreiben und Sass zu verwenden , etwas schmutziger, was die divs anhand ihrer Position innerhalb dieses Kartenelements anvisiert. Wie Sie hier sehen können, wenn Sie es nur lesen, macht nicht so viel Sinn wie die BEM-Klasse vorher, es gibt hier andere Optionen, wir müssen nicht alle Klassen entfernen, da Klassen hilfreich sind, aber ein besseres Beispiel ist genau hier oben, wo wir zum Beispiel sagen, wir wollten keinen Klassennamen für einige dieser Elemente schreiben, und wir können sie nicht nur durch den Elementnamen anvisieren, wir könnten dies immer mit Sass tun. Das ist ein Beispiel für die Verwendung dieses verschachtelten Features. Wir haben unser Dokument genau das gleiche wie zuvor, aber wir haben es umgestaltet, um Sass zu verwenden. Hoffentlich beginnen Sie jetzt zu sehen, wie wir einige von Sass' ist Funktionen verwenden um CSS auf eine einfachere und prägnantere Weise zu schreiben. Vielleicht sind die Vorteile bei einem kleinen Projekt wie diesem besonders klar, aber wenn Sie eine CSS-Datei mit vielen Tausenden von Zeilen haben, dann werden diese Struktur und Funktionen wie Mixins und Variablen sehr wichtig. Es gibt eine weitere Funktion, die ich Ihnen in Sass zeigen möchte, und das ist Partials. So können wir Teile unserer SCSS-Datei hier in verschiedene Dateien aufteilen und sie bei Bedarf einbringen. Aber dafür werde ich auf das nächste Video warten, in dem wir unsere SCSS-Datei modularisieren werden. Wir sehen uns im nächsten Video. 6. Erstellen von modularen Sass: In dieser Lektion werden wir darüber sprechen, unser [unhörbares] Dokument in verschiedene, so genannte Partials in SASS zu modularisieren unser [unhörbares] Dokument in verschiedene, . Dies ist Teil eines größeren Themas rund um die CSS-Architektur, die in unserem Fall hier, eine SCSS-Datei ausführen, wir unter 200 Zeilen haben, keine große Sache ist, aber es wird eine sehr große Sache, wie Sie strukturieren Ihre SASS-Projekte, wenn Sie mit Stylesheets beginnen , die Tausende und Tausende von Zeilen lang sind. Also hätten wir dies einfach in der vorherigen Lektion als zusätzliche Funktion und Möglichkeit zur Umgestaltung von CSS behandeln können, aber ich wollte ihm hier eine spezielle Lektion geben, weil es ein Thema ist, das an sich betrachtet werden sollte. Also, was ich tun werde, ist, dass wir zuerst unser Dokument modularisieren und dann werden wir sehen wie wir es für ein größeres Projekt tun können. In Ordnung. Also, wie wir einen Teil in SASS machen, ist, dass wir eine neue Datei erstellen und wir stellen sicher, dass die Datei mit einem Unterstrich beginnt. Ein gemeinsamer Teil, mit dem man anfängt, ist das Aussetzen von Variablen in seinem eisernen Teil. Also werde ich einen Teil mit dem Namen von variables.scss haben. Also, was ich tun werde, nehmen Sie alle unsere Farben, bringen Sie sie hier hinein. Wenn wir jetzt zu unserem Dokument zurückkehren, werden Sie sehen, dass sich nichts geändert hat. Aber wenn wir hier nach unten gehen, werden Sie sehen, dass es das neue CSS-Dokument nicht wirklich kompiliert hat , weil es all diese Farbvariablen fehlt. Also müssen wir dieses Teil tatsächlich in dieses Dokument importieren, und die Art und Weise, wie wir das tun, ist, indem wir hier eine Importanweisung einfügen, und alles, was wir tun müssen, ist ein paar Anführungszeichen, Eingabevariablen in zu öffnen. Wir müssen nicht wirklich den Unterstrich oder den Punkt SCSS am Ende setzen. Wenn ich nach unten scrolle, wirst du sehen, dass wir alle gut sind. Aktualisieren Sie die Seite. Wir sind alle gut. Also im Moment haben wir genau die gleiche Ausgabe. Wir modularisieren unser SCSS nur so, dass es in verschiedenen Fächern organisiert ist. Die nächste Sache sind die Mixins. Also werde ich ein partielles Zitat Unterstrich mixins.scss erstellen. Dann lassen Sie uns dasselbe mit unserem Media-Query Mixin machen. Also werde ich schreiben, Mixins importieren, das speichern und dann hierher bringen. Schauen Sie nach unten auf L SASS Konsole, keine Probleme erkannt, und wenn wir die Seite aktualisieren und beginnen, um unsere responsive Haltepunkte zu bewegen, Ich kann ein Problem sehen, und das ist aus der vorherigen Lektion, wo wir vergessen haben, dieses H1 Ziel. Also werde ich das jetzt gerade korrigieren. Wir haben immer noch Seiten-Header-Titel hier. Statt dessen, weil wir BM nicht mehr verwenden, werden wir nur das Element anvisieren, und wir werden das offensichtlich nutzen. Das zu speichern, wird das jetzt sehen. Wir haben die gleichen genauen Ergebnisse, aber wir haben jetzt ein Mixins und Variablen in ihren eigenen kleinen SCSS-Dateien aufgeteilt. Wir können dies auch ein bisschen weiter nehmen und unsere Basisstile in einem partiellen als auch setzen. Also unsere Basisstile, Sachen, die das gesamte CSS-Dokument betreffen und die Grundlage unserer Stile bilden. Also in diesem Fall wäre es L Asterix, und L Körper. Also werde ich das hier reinwerfen und die Basis importieren. Ein weiterer Teil könnten wir unsere L-Layout-Elemente machen, also haben wir Flex-Zeile, Seitenbreite und Textcenter. Ein Textcenter ist eigentlich eher ein Dienstprogramm, glaube ich, als ein Layout. Also lasst uns einfach diese beiden nehmen und einen Teil für sie erstellen. Die Reihenfolge, in der du das machst, spielt keine Rolle. Also werde ich dieses Layout aufrufen, und dann werde ich es erstellen, Layout.scss unterstreichen. Das liegt ganz an Ihnen, wie Sie das übrigens tun möchten. Ich folge gerade der Konvention, und wir werden im nächsten Video sehen, wie Bootstrap, ein beliebtes CSS-Framework es macht, aber gerade jetzt lege ich meine Seite mit MI flex drier in das Layout teilweise hier. Wie Sie sehen können, aktualisieren Sie die Seite, haben wir das gleiche Ergebnis. Wir können auch L-Komponenten in ihren eigenen Teil setzen. Also werde ich all das nehmen und das in einem Teil durch den Namen der Komponenten setzen. Lassen Sie uns eine neue Datei für diese erstellen, CSS. Ehrlich gesagt, wir könnten den ganzen Weg gehen, bis alle diese in ihren eigenen Partials sind, aber wir müssen nicht zu verrückt werden. Ich glaube, eigentlich sollten wir Knopf haben, ist eine bestimmte Komponente, also sollten wir das auch hier einfügen. Also haben wir die Kartenkomponente und die Tastenkomponente bekommen. Aktualisieren Sie die Seite auf dieser Seite. Alles scheint noch zu funktionieren und wir haben keine SASS Fehler. In Ordnung. Nun, was wir getan haben, ist, dass wir unsere styles.scss-Datei in mehrere Dateien aufgeteilt haben, und es macht es einfach einfacher. Wenn wir nach einer Komponente suchen, können wir in Komponenten gehen, wenn wir nach Basisstilen suchen, können wir dort reingehen undhier nach Mixins suchen, hier nach Mixins suchen, Variablen hier, so weiter, so weiter. Nun, wie ich bei einem kleinen Projekt wie diesem erwähnt habe, ist das nicht so wichtig. Ich würde definitiv Ihre Variablen und Mixins in ihre eigenen Teile setzen, aber um die Dinge in Komponenten, in Layout und Basis zu unterteilen , auf so wichtig, wie es in einem sehr großen Projekt sein könnte. Wie ich bereits erwähnt habe, gibt es ein paar Konventionen zu folgen oder nicht zu folgen. Wenn Sie am Ende auf Ihrem Stylesheet erweitern oder an einem großen, großen Projekt arbeiten. Eine dieser Konventionen wird die 7-1-Architektur genannt. Wenn ich nur in Google danach suche, können Sie hier eine Seite auf GitHub über SASS 7-1 sehen, es gibt auch viele Artikel zu diesem Thema, aber Sie können hier ein Beispiel für das 7 -1 Patent sehen. Also, wie Sie in unserem Dokument hier gesehen haben, haben wir nur einen Teil für Basis gemacht, wir haben einen Teil für Komponenten gemacht, einen Teil für Layout. Aber wenn Sie ein noch größeres Projekt hätten, diese Komponenten, Layouts und Basis, könnte das ein tatsächlicher Ordner sein, und dann könnten Sie Partials darin haben. So könnte ich zum Beispiel die teilweise meiner Komponente in verschiedene Komponenten innerhalb des Verzeichnisses einer Komponente umwandeln . Also könnte ich hier reingehen, und anstatt das als Komponenten bezeichnet zu haben, könnte ich es Karte nennen, und ich könnte das im Komponentenverzeichnis platzieren. Ja, ich bin sicher, dass ich umziehen möchte, und dann haben wir natürlich auch einen Knopf hier drin, also wollen wir das nicht, also verschieben Sie das hier raus, verschieben Sie das hier raus, erstellen Sie einen neuen Teil innerhalb unseres Komponentenverzeichnisses für einen Button wie diesen, und dann können wir entweder beides einschließen, oder wenn wir wollten,könnten wir hier eine andere SCSS-Datei erstellenund unsere verschiedenen Komponenten in diese oder wenn wir wollten, könnten wir hier eine andere SCSS-Datei erstellen eine Datei importieren und dann diese Datei in die Hauptdatei importieren Stylesheet. Auch hier wäre das für diese Art von Projekt übertrieben, aber wenn Sie an größeren Anwendungen arbeiten, müssen Sie definitiv verstehen, wie Sie Ihr CSS besser strukturieren können. Es ist nicht ungewöhnlich, wenn Sie an einer großen App arbeiten, um Fotos und Fotos von verschiedenen Komponenten zu sehen . Wir werden tatsächlich in der nächsten Lektion mit Bootstrap sehen, wie viele verschiedene SCSS-Dateien in diesem Framework sind. So sehen Sie ein Live-Beispiel im nächsten Video. jetzt alles, was ich damit tun möchte, unser Projekt hier zu modularisieren. Wie bereits erwähnt, sind es ziemlich kleine Projekte, also müssen wir nicht viel davon tun, aber es ist ein weiteres cooles Feature von SASS und wird sehr wichtig, wie beim Schreiben großer Anwendungen erwähnt. Im nächsten Video schauen wir uns Bootstrap an. Bootstrap ist ein CSS-Framework, das SASS verwendet, und wir können tatsächlich sehen, wie ein richtiges SASS Framework strukturiert ist. Es wird einige der Konzepte, die wir in dieser Klasse gelernt haben, zusammenbringen. Außerdem werden wir lernen, wie wir Bootstrap tatsächlich verwenden können, und ich werde neues Wissen über SASS, um Bootstrap tatsächlich zu modifizieren und zu tun, was benutzerdefinierte Theming genannt wird. Also freue ich mich auf diese Lektion. Wir sehen uns im nächsten Video. 7. Bonus: Sass mit Bootstrap verwenden: In dieser Lektion werden wir das, was wir gerade gelernt haben, in die Arbeit mit einem sehr beliebten CSS-Framework wie Bootstrap erweitern . Zuvor haben Sie vielleicht in der Vergangenheit mit Bootstrap gearbeitet, aber Sie haben möglicherweise diese CSS-Version verwendet. Nun, jetzt, wo wir Sass kennen, können wir tatsächlich die Sass-Version von Bootstrap verwenden und wir können tatsächlich viel mehr daraus holen. Wenn Sie mit Bootstrap nicht vertraut sind, können Sie hier auf die Website unter getbootstrap.com kommen. Sie können es sich als eine Reihe vordefinierter Stile vorstellen , die Sie einfach schnell in Ihr Dokument laden können. Es hat auch JavaScript, aber das ist nicht der Fokus der heutigen Klasse. Sie können hier einige Beispiele für Bootstrap-Websites sehen. Es wird wahrscheinlich ähnlich aussehen wie einige der Websites, die Sie bereits im Web gesehen haben. Wenn wir uns dieses Beispiel ansehen, können Sie viele Bootstrap-Elemente sehen. Grundsätzlich ist alles, was benötigt wird, um diesen Look zu erhalten, die richtigen Klassen zu verwenden. Wenn ich in die Dokumentation und dann in Komponenten gehe, können Sie buchstäblich einen Teil des Codes hier kopieren und einfügen. Solange Sie das Stylesheet für Bootstrap enthalten haben, erhalten Sie genau das gleiche Aussehen wie dieses. Was ich für diese Lektion getan habe, ist, dass ich tatsächlich das kleine Projekt, an dem wir in früheren Lektionen gearbeitet haben, um Bootstrap-Elemente zu verwenden. Wie immer ist alles, was Sie tun müssen, um auf dieses Projekt zugreifen zu können, zu github.com/christopherdodd/skillshare zu gehen. Wie Sie hier sehen können, habe ich dieses Beispiel Bootstrap-Projekt für uns in dieser Lektion aufgenommen. Ich werde das in meinem Code-Ordner speichern. Ich komme hier rauf und ich kann einfach klicken, um es zu erweitern. Ich werde nur die Größe einiger Fenster hier ändern, um es einfacher für Sie zu sehen. Jetzt haben wir unser Beispiel Bootstrap-Projekt dort. Was ich tun werde, ist VS-Code wieder zu öffnen. Öffnen wir den Ordner. Beispiel, Bootstrap-Projekt. Lassen Sie uns diesen Willkommensbildschirm loswerden und werfen Sie einen Blick auf unser Projekt. Zunächst einmal, lassen Sie uns tatsächlich live mit diesem gehen, damit wir es in unserem Browser sehen können. Wie Sie hier sehen können, ist es ein ähnliches Design wie unser Projekt zuvor, aber was ich getan habe, ist, dass ich es gerade geändert habe, um Bootstrap zu verwenden. Wir haben die Bootstrap-Elemente drin, aber es ist ziemlich genau das gleiche Layout wie zuvor. Wir können das schließen, sobald wir unser Projekt erfolgreich eingerichtet haben. Werfen wir einen Blick auf den Code. In unserer Indexdatei, wie gesagt, ähnlicher Code, aber wir verwenden alle Bootstrap-Klassen hier. Es gibt einige benutzerdefinierte, die ich in mein eigenes Stylesheet hier aufgenommen habe. Dies sind Modifikationen auf Bootstrap. Wir haben Bootstrap hier und wir haben die kompilierte Version dieser SCSS-Datei und in einer index.html. Sie können sehen, dass wir zuerst Bootstrap einschließen und dann unsere Styles einschließen. Ich mag immer, wir können „Watch Sass“ laufen. Wir könnten hier mehr Änderungen vornehmen. Sobald wir dann speichern, wird es zu diesem Stylesheet hier neu kompiliert. Genau hier haben wir Bootstrap funktioniert. Wir können Bootstrap tatsächlich überschreiben, indem wir die Klassendefinitionen hier neu schreiben. Wie Sie hier sehen können, habe ich die Zeile geändert, um keine Marge zu haben, weil es mir Probleme gab. Wenn ich einfach zur SCSS-Datei umschalte und das auskommentiere, werden Sie sehen, dass, wenn ich meine Entwicklertools öffne und zu einer kleineren Bildschirmgröße gehe, die negativen Ränder in den Zeilen mir schwer machten. Eigentlich kam und übertrieben diese Stile. Wie Sie hier sehen können, ist es viel schöner ohne diese negativen Margen. Versteh mich nicht falsch. Dies ist ein vollkommen okay Weg, es mit nur CSS zu tun. Wir brauchen in diesem Fall nicht einmal SCSS, weil ich hier eigentlich nichts anderes als einfaches altes CSS schreibe. Wie Sie sehen können, ist dies die ziemlich genau die gleiche Datei. In der Tat denke ich, es ist genau der gleiche Code. Wir brauchen SCSS in diesem Fall nicht. Aber was wir mit Nummer 1 tun können, sehen, wie ein groß angelegtes Sass-Framework strukturiert ist und gleichzeitig einige der Funktionen von Sass nutzen, können wir tatsächlich den Sass-Code von Bootstrap einschließen. Lasst uns das jetzt machen. Ich gehe zurück zur Bootstrap-Website. Gehen wir zu „Home“ und klicken Sie dann auf „Download“. Genau hier können Sie sehen, dass ich nur das kompilierte CSS verwendet habe. Aber was ich stattdessen tun kann, ist den Quellcode herunterzuladen. Ich werde auf „Download Source“ klicken. Ich werde das nur auf meinen Desktop stellen. Ich werde mich darauf ausdehnen. Jetzt kann ich auf meinen Desktop gehen und „Bootstrap 4.4.1“ öffnen. Die Zahl wird wahrscheinlich unterschiedlich sein, je nachdem, wann Sie sich diesen Kurs ansehen. Aber zum aktuellen Zeitpunkt ist das die neueste Bootstrap-Version. Sie können hier sehen, dass es viele verschiedene Codes gibt. In diesem Ordner haben wir zum Beispiel das kompilierte CSS und auch das kompilierte JavaScript. Aber was wir suchen, ist das SCSS genau hier in diesem SCSS-Ordner. Wie Sie hier sehen können, haben wir eine Reihe von verschiedenen Partials. Dann haben wir diese drei, die uns das „Bootstrap-Grid“, das „Bootstrap-Reboot“ und das „Co-op-Bootstrap“ geben. Wir haben auch Ordner für Mix-Ins, Dienstprogramme und Anbieter. Was ich tun möchte, ist, lassen Sie uns unser Beispiel Bootstrap-Projekt hier öffnen. Lassen Sie uns eine Ordnerstruktur erstellen, um diesen Bootstrap-Code zu halten. Ich werde einen Händlerordner erstellen. In diesem Händlerordner werde ich einen Ordner namens Bootstrap erstellen. Dann werde ich in Bootstrap dieses SCSS nennen. Dann endlich, jetzt, ist es an der Zeit, alle Dateien in diesem SCSS-Ordner in unsere eigenen Projekte zu bringen . Da gehst du. Wenn ich jetzt zu meinem Code-Editor zurückgehe, können Sie sehen, dass wir den Händlerordner haben und wir haben Anbieter, Bootstrap, SCSS. Wir haben alle SCSS-Akten hier. Nun, dies ist eine wichtige Struktur zu betrachten und zu studieren wenn Sie mehr über die Strukturierung von großangelegten Anwendungen wissen möchten. Wir haben alle verschiedenen Mix-Ins in verschiedenen Partials hier. Es ist sehr [unhörbar] und wir schließen alles in diese endgültige Bootstrap SCSS Datei ein, die im Grunde nur eine Reihe von Eingaben ist. Ich ermutige Sie, sich umzusehen und zu bemerken, was hier vor sich geht. Aber nachdem Sie das getan haben, können wir tatsächlich gehen und diese Bootstrap-Datei bearbeiten, um einige der Dinge zu beseitigen, die wir nicht brauchen, und auch einige der Dinge, die wir ändern wollen, zu bearbeiten. Der Vorteil, dies auf diese Weise zu tun, ist, dass wir die Anzahl der Zeilen reduzieren können , die in unserer endgültigen bootstrap.css Datei landet. Wir können auch Variablen ändern, bevor sie im CSS verwendet werden. Es ist eigentlich ein ziemlich gutes System und etwas, das Sie definitiv nutzen können, wenn Sie wissen, wie es geht und Sie nach zusätzlichen Effizienzen suchen. Bevor wir tatsächlich Änderungen an dieser Datei vornehmen, müssen wir jedoch neu konfigurieren, wie unser Live-Sass-Compiler funktioniert. Denken Sie daran, bevor wir gerade einen Ordner hatten und so würde die Ausgabedatei direkt neben unserer SCSS-Datei in diesem Ausgabeordner gehen. Nun, es ist jetzt ein bisschen anders, weil wir einen Ordner nur für SCSS haben. Wir haben auch unser Bootstrap-spezifisches SCSS in diesem Ordner gespeichert. Wir werden tatsächlich ein wenig Konfiguration tun müssen , um sicherzustellen, dass alle unsere CSS, egal wo sich die SCSS-Dateien in unserem Projekt befinden, die in diesem Verzeichnis direkt hier landet. Um dies zu tun, müssen wir in die Benutzereinstellungen unserer VS Code Anwendung gehen. Ich werde in den Code der Einstellungen gehen. Dann werde ich nach einem Live-Sass-Compiler suchen. Da gehen wir. Nun, wir wollen hier runter gehen und wir wollen unsere Formate bearbeiten. Außerdem möchten wir ändern, ob es die Map-Datei erzeugt. Wir können bearbeiten, wie es hier in settings.json heißt. Ich werde darauf klicken. Wie Sie hier sehen können, habe ich meinen Code bereits eingerichtet. Dieser erste kleine Block hier ist für die Einstellung unserer Formate, und ich habe ihm den SavePath von gegeben. /css. Das wird unsere CSS-Dateien nehmen und sicherstellen, dass sie hier in diesen Ordner gehen. Was ich auch getan habe, ist eine ausgeschlossene Liste gemacht. Ich werde Bootstrap-Grid und Bootstrap-Neustart ausschließen. Wenn ich das einfach entferne, können Sie das entfernen, was auch die Map-Datei erzeugt. Lasst uns das retten. Wenn ich auf „Watch Sass“ klicke, wirst du sehen, dass wir Bootstrap-Grid, Bootstrap-Grid.Css.map, bootstrap-reboot, bootstrap-reboot.css.map, bootstrap.css.map, style.css.map. Wir brauchen wirklich nicht so viele CSS-Dateien, also wird es immer noch damit funktionieren. Aber was ich gerne mache, ist diese Dateien auszuschließen und auch nicht die Karte zu generieren. Was wir hier tun können, ist, dass wir alle unsere CSS hier löschen können , weil wir SCSS vollständig in diesem Projekt verwenden. Ich werde das alles in den Müll bringen. Ich werde das retten. Dann lassen Sie uns einfach wieder unseren Sass-Compiler auslösen. Ich denke, wir müssen vielleicht neu starten. Schalten wir das einfach aus und klicken Sie auf „Watch Sass“. Jetzt können Sie sehen, dass es nur die eine bootstrap.css Datei erzeugt, genau wie wir es vorher hatten. Wenn wir also wieder auf unsere Webseite gehen, funktioniert alles normal. Das erste, was wir tun können, um die Anzahl der Zeilen in einer bootstrap.css Datei zu reduzieren. Wenn wir bis zum Ende scrollen, können wir sehen, dass dies über 10.000 Zeilen Bootstrap CSS ist. Die meiste Zeit brauchen wir nicht wirklich alles, was Bootstrap zu bieten hat. Einer der Vorteile der Verwendung der SCSS-Version von Bootstrap ist, dass wir beginnen können, einige dieser Importe zu entfernen. Was wir tun können, ist ein Prozess der Beseitigung, um Dinge zu entfernen und zu sehen, ob es unsere Webseite bricht. Aber was ich stattdessen gerne tun würde, ist das Gegenteil. Ein umgekehrter Prozess der Beseitigung, bei dem wir einige dieser Einfuhren wieder einführen. Was ich tun werde, ist kommentieren alle diese aus, so dass keiner von ihnen läuft und wenn ich die Seite hier aktualisiere, können Sie sehen, dass wir alle unsere Stile verloren haben. Lassen Sie uns beginnen, einige dieser Teile von Bootstrap wieder einzuführen , bis wir den Look bekommen, den wir suchen. Wir werden definitiv Funktionen, Variablen und Mixins benötigen. Diese sind in Bootstrap obligatorisch und diese werden wahrscheinlich keinen Unterschied zu unserer Webseite machen. Aber sie stellen nur die Funktionen, die Variablen und Mixins bereit, die in den restlichen Teilbereichen verwendet werden. Wir werden die Route einschließen wollen. Wir werden Gitterformulare einschließen wollen. Wir verwenden definitiv Tasten, die wir benutzt haben, was haben wir sonst noch verwendet? Nav und Navbar. Lassen Sie uns einfach navbar für jetzt tun, wir haben Karten verwendet. Wenn Sie überprüfen möchten, was wir an einem beliebigen Punkt verwendet haben, können Sie einfach in index.html gehen und Sie können einige der Elemente sehen, die verwendet wurden, wie Navbar-Karten direkt hier. Es ist alles da im HTML. Ich gehe hierher zurück. Wir verwenden keine Paginierung. Wir benutzen das Jumbotron. Was benutzen wir sonst noch? Dienstprogramme werden wahrscheinlich etwas sein, das wir brauchen. Wie Sie sehen können, haben wir immer noch eine Menge kommentiert. Ich werde das retten. Geh zurück zu hier und du siehst, dass wir schon ein bisschen näher sind. Wir haben eine Menge von diesen Elementen, aber wir vermissen immer noch ein paar wichtige Sachen. Ich werde Neustart und Typ einschließen, in dem Typografie-Stile enthalten sind und wir die Seite aktualisieren. Jetzt können Sie mit Neustart sehen und eingeben, dass wir tatsächlich so ziemlich alle Stile haben, die wir brauchen. Ich glaube nicht, dass hier unbedingt irgendetwas fehlt. Es funktioniert auf Mobilgeräten. Lassen Sie uns hineingehen und werfen einen Blick auf unsere endgültige bootstrap.css Datei hier. Sie können hier sehen, es sind etwas mehr als siebentausend Zeilen Code. Wir haben es um 3.000 Codezeilen reduziert, was ziemlich gut ist. Es bedeutet, dass die Dateigröße kleiner wird. Im Allgemeinen ist es nur effizienter, nur das zu verwenden, was Sie brauchen. Mit einem Framework wie Bootstrap, das so voll funktionsfähig ist und so viel drin ist, besteht die Chance, dass wir unsere Projektgröße wirklich erhöhen können, ohne dass wir es brauchen. Dies ist einer der Vorteile, die uns die SCSS-Version von Bootstrap bietet. Der andere Vorteil ist natürlich Bootstrap-Thema. Was ich damit meine, ist, wenn wir sagen, die Variablen in unserer Unterstrichvariablendatei, und ich muss den ganzen Weg nach unten scrollen. Los geht's. Sie können sehen, dass alle unsere Farben mit einem Ausrufezeichen Standardmodifikator am Ende definiert sind. Was dies tut, ist, dass es nur eine Variable mit dieser blauen Farbe erstellt , wenn eine Variable mit dem Namen blau nicht bereits existiert. Das bedeutet, dass wir diese leicht ändern können, sie überschreiben, indem wir die Variablen selbst definieren. Dies sind nur die Standardwerte, aber wir können tatsächlich hineingehen und die Farbe Blau während der gesamten Bootstrap ändern , indem wir einfach hier hineingehen und die Farbe Blau ändern. Schauen wir uns tatsächlich den Abschnitt der Bootstrap-Website an, der über Bootstrap-Themen spricht. Wenn ich hier nach Themen suche, können wir Theming Bootstrap sehen. Wie es hier heißt, angepasste Bootstrap 4 mit unseren neuen integrierten Sass-Variablen für globale Stil-Präferenzen, für einfache Theming und Komponentenänderungen. Wie Sie hier sehen können, zeigt es Ihnen, was Sie als Minimum importieren müssen. Diese sind erforderlich. Erinnern Sie sich hier oben, Funktionen, Variablen und Mixins. Lassen Sie uns tatsächlich einen Raum zwischen ihnen schaffen, damit Sie sehen können, dass diese erforderlich sind. Auch gehen, um sie so zu beschriften erforderlich und dann neu starten, Typ, Bilder, Code, Raster. Diese sind alle optional. Wir brauchen root, neu starten und tippen, aber wir brauchen noch keine Bilder. Weil wir in unserem Projekt keine Bilder haben. Aber diese sind auch optional und wie es hier mit dieser Einrichtung sagt, können Sie beginnen, jede der Sass-Variablen und Spaltenzuordnungen innerhalb einer benutzerdefinierten SCSS-Datei zu ändern . Aber ich denke, es ist einfach genug und sicher genug, um unsere Anpassungen hier zu erstellen. Wir könnten immer unsere eigene custom.scss erstellen und dann diese Datei in diese importieren. Aber mit einer so kleinen Datei schon, glaube ich nicht, dass es uns schaden wird, diese Bootstrap-Datei zu ändern. Lassen Sie uns hineingehen und tatsächlich beginnen, diese Bootstrap-Datei zu entwerfen und etwas zu ändern, das in unseren Bootstrap-Dateien existiert. Es gibt viele verschiedene Optionen hier und verschiedene Beispiele, die Sie auf dieser Seite finden können , um zu beginnen Schrägstrich Theming. So viele verschiedene Optionen. Aber etwas, das wirklich einfach zu tun ist, ist eine Farbe zu ändern. Schauen wir uns an, welche Farben wir hier verwenden. Wir benutzen diesen Knopf primär hier. Lassen Sie uns in die index.html genau hier eintauchen, wie Sie hier sehen können, verwenden wir die Schaltfläche Primärklasse. Das wird wahrscheinlich in der Komponente für Schaltflächen sein. Scrollen nach unten und oben, können wir hier Schaltflächen finden und wir haben unsere Schaltflächen-Basis-Stile. Wir können nach unten scrollen, bis wir die primäre Taste finden, oder Sie können danach suchen. Nichts für die primäre Taste. Was ist, wenn wir nach primären suchen? Da ist auch nichts. Ich denke, der Grund dafür liegt darin, dass wir Karten und for-Schleifen verwenden. Was wir also suchen, ist die Primärfarbe. Es ist ziemlich sicher anzunehmen, dass dies innerhalb der primären Taste verwendet wird. Lassen Sie mich zurück zu den Variablen und suchen wir nach primären. Wie Sie hier sehen können, wird die Farbe für die primäre Farbe diese Farbe blau sein, und wenn wir uns die Definition für dieses Blau ansehen, wird es auf einen Standardwert dieser Farbe direkt hier gesetzt. Was natürlich genau hier zu dieser Farbe passt. Was wir tun können, ist tatsächlich hineinzugehen und diese Primärfarbe zu ändern. Vielleicht ändern wir es stattdessen in ein gelbes. Wenn ich das speichere, komm zurück hierher, du wirst jetzt sehen, dass die Primärfarbe im gesamten Projekt jetzt in Gelb geändert wird. Aber natürlich wollen wir es hier nicht ändern. Wir wollen es eigentlich nur in unserer endgültigen Bootstrap-Datei überschreiben. können wir von überall hier drinnen machen. Rufen Sie diese Variablen auf, und ich werde die Farbe der primären überschreiben , indem ich sie gelb und dasselbe Ergebnis nenne. Sie möchten die Variablendatei sauber halten, alle diese Standardwerte darin behalten und alle unsere Änderungen, die wir in die eine Datei einfügen möchten. Wieder können wir es direkt hier in unsere bootstrap.scss-Datei einfügen. Oder wir können eine benutzerdefinierte SCSS-Datei erstellen und dann diese Datei in sie importieren. Das ist ein Beispiel. Ich bin mir nicht sicher, was du sonst noch tun willst. Die Möglichkeiten sind wirklich endlos, es liegt an Ihnen, was Sie ändern möchten. Wir könnten jede dieser Variablen ändern und es würde überall propagieren , dass diese Variable in unserem Projekt während des gesamten Bootstrap verwendet wird, und dann würde das für unser eigenes Stylesheet gelten. Sehr leistungsstarke Funktion in Bootstrap. Sie können immer die CSS-Implementierung durchführen und Dinge wie diese überschreiben. Aber wenn Sie an die Quelle der Generierung von Bootstrap gelangen möchten, können Sie hierher kommen, die Anzahl der Dinge reduzieren, die Sie importieren, und tatsächlich Variablen innerhalb dieser Datei ändern. Sehr cool. Das schließt diese Lektion über Bootstrap und die Verwendung des SCSS-Formulars von Bootstrap ab. Ich hoffe, du fühlst dich jetzt etwas selbstbewusster mit Scss. Offensichtlich, wenn Sie mehr davon codieren und sich daran gewöhnen, Sie anfangen, sich damit besser zu begnügen. Schließlich bin ich mir sicher, dass Sie nicht wieder auf die alte Art und Weise mit CSS codieren wollen . Manchmal, wenn Sie nur eine kleine Änderung vornehmen müssen, ist CSS in Ordnung. Aber wie Sie sehen werden, wenn Sie in größere und größere Projekte kommen, müssen Sie etwas wie SASS verwenden. Sonst wird es einfach viel zu chaotisch. Ich hoffe, Sie haben diese Lektion und das nächste Video genossen, das wir packen und über Ihr Klassenprojekt sprechen werden. Wir sehen uns im nächsten. 8. Zusammenfassung und Kursprojekt: In dieser Klasse haben wir einen guten Überblick über die Fähigkeiten von SASS und wie die Verwendung dieser Sprache völlig verändern kann, wie Sie CSS schreiben. Zwar gibt es eine Reihe von anderen Funktionen in SASS, was wir in dieser Klasse behandelt haben, ist genug für Sie, um die Macht dieser großartigen Sprache zu nutzen. Ich muss zugeben, dass es lange gedauert hat, bis ich mit der Übernahme von SAS in meinem eigenen Workflow begonnen habe. Aber mit Tools wie dem Live-SAS-Compiler dauert es nicht zu lange, um Ihr Projekt einzurichten, um alle Vorteile von SASS zu nutzen. Was ich möchte, dass Sie für Ihr Klassenprojekt tun, ist, einen vorhandenen Code von CSS zu SCSS zu migrieren , genau wie wir es in dieser Klasse getan haben. Idealerweise wäre dies ein Webprojekt, an dem Sie bereits arbeiten, aber wenn Sie kein eigenes Projekt haben, können Sie die Projekte verwenden, an denen wir in dieser Klasse gearbeitet haben. Der gesamte Code, wie immer, wird in meinem Skillshare Repository unter GitHub.com/Christopherdodd/SkillShare sein. Schließlich, wenn Sie irgendwelche Tipps oder Anleitungen zu dem, was wir in der heutigen Klasse behandelt haben, müssen Sie unbedingt einen Kommentar in das Diskussionsfeld unten hinterlassen, und ich werde mein Bestes tun, um Sie in die richtige Richtung zu zeigen. Danke, wie immer, für das Zuschauen und ich hoffe, Sie wieder in einigen meiner anderen Klassen zu sehen.