Schritt für Schritt Sass | Lisa Catalano | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Schritt für Schritt Sass

teacher avatar Lisa Catalano

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

12 Einheiten (1 Std. 15 Min.)
    • 1. Einführung

      4:31
    • 2. Sass installieren

      5:36
    • 3. Projektübersicht

      4:52
    • 4. Bestehende Projekte in Sass konvertieren

      4:58
    • 5. Variablen

      6:26
    • 6. Kommentare

      2:54
    • 7. Nesting

      6:46
    • 8. Verlängerung

      8:44
    • 9. Mixins

      11:00
    • 10. Der Parent Selector

      8:14
    • 11. Importieren

      6:20
    • 12. Weitere Kurse

      4:54
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

185

Teilnehmer:innen

--

Projekte

Über diesen Kurs

e82025a2

Sass ist ein CSS der Zeit spart und dir erlaubt, einen besseren Qualitätscode zu schreiben. In Schritt für Schritt Sass lernst du, wie du dieses leistungsfähige Werkzeug in einfachen 5-10 Minuten Schritten verwendest.

Du brauchst nicht jedes Konzept von Sass verstehen, um es zu benutzen – sobald du an der Installation vorbeigekommen bist und aufgestellt bist, kannst du es sofort verwenden.

Die Codierung deiner CSS mit Sass spart dir Zeit – und ermöglicht dir, neuer, konsistenterer Code zu schreiben. Die Zeit, die du verbringst, diesen Kurs zu beenden, wird ganz einfach auf deinem nächsten Web-Projekt aufgebaut!

Triff deine:n Kursleiter:in

Teacher Profile Image

Lisa Catalano

Kursleiter:in

Hello, I'm Lisa. Web Developer and Teacher

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: Hallo, ich bin Lisa Catalano und das ist Schritt für Schritt SAS. Ich habe diesen Kurs für Leute erstellt, die CSS kennen, aber noch nicht versucht haben, CSS Pre-Prozessor. Ich weiß, wie überwältigend die Arbeit im Web sein kann. Fast jeden Tag hört man von einigen neuen Fähigkeiten, die man lernen sollte, auf dem Laufenden zu bleiben. Jedes Mal, wenn Sie das Gefühl haben, dass Sie in einer Sache gut werden, drehen Sie sich um und der beste Weg, etwas zu tun, ist völlig anders. Ich werde ehrlich sein und Sie wissen lassen, dass ich SAS wirklich nicht lernen wollte. Ich war sehr beschäftigt in meinem Job, eine brandneue Website mit Backend und Front und Technologien, die für mich etwas neu waren . Ich hatte viel von dem CSS bereits herausgefunden, als mir gesagt wurde, dass ich SAS verwenden musste. Ich liebe es, neue Dinge zu lernen, aber ich dachte nicht, dass ich genug Zeit habe, SAS zu lernen, ohne verlangsamt zu werden. Ich freue mich, jetzt sagen zu können, dass ich mich völlig geirrt habe. Sass zu lernen war wirklich einfach, und ich habe es tatsächlich innerhalb des ersten Tages geliebt. Ich kann nicht sagen, dass über sehr viele der Web-Technologien, die ich versucht habe, zu lernen. In den letzten fünf Jahren war SAS wirklich einfach abzuholen, und die Auszahlung war groß. Also habe ich beschlossen, diese Klasse zu machen, um diejenigen von Ihnen zu ermutigen, die das Gefühl haben, dass Sie nicht genug Zeit für eine andere Technologie oder Fertigkeit zu haben, um nur ein wenig Zeit mit mir zu verbringen , um diese wertvolle Fähigkeit zu lernen. Also, was SAS SAS ist, steht Kraft und taktisch genial Stylesheets, laut ihrer Website, Sass ist eine Metallsprache auf CSS, die verwendet wird, um den Stil eines Dokuments sauber und strukturell zu beschreiben , mit mehr Leistung als flach, CSS ermöglicht SAS sowohl bietet eine einfachere, mehr Eleganz in Text für CSS und implementiert verschiedene Funktionen, die nützlich für die Erstellung überschaubarer Stylesheets sind . Mit anderen Worten, es ist ein Pre-Prozessor für CSS. Sie schreiben Ihr CSS im SAS-Format, und was Sie schreiben wird kompiliert oder in das Standard-CSS-Format generiert. Es ermöglicht Ihnen, Ihren Code auf eine organisierte und einfachere Art und Weise zu schreiben. Es übersetzt, was Sie direkt in das Standard-CSS. Sie sind zwei Formate von Sass, und jedes hat seine eigene Dateierweiterung. Die Punktdateien S A S S sind der ältere Originaldateityp. Es ermöglicht Ihnen, Ihr CSS ohne geschweifte Klammern oder Semi-Coghlan's zu schreiben. Die Selektoren und Eigenschaften werden durch Einrückung unterschieden. Das CSS-Dateiformat von DATs ähnelt eher dem regulären CSS, fügt jedoch alle SAS-Helfer wie Einrückung, Variablen und vieles mehr hinzu. Jede reguläre CSS-Datei ist eine gültige Punkt-CSS-Datei. Wir werden das Punkt-CSS-Dateiformat in dieser Klasse verwenden. Es ist am einfachsten, sich daran zu gewöhnen, und es macht es sehr einfach, eine bestehende Website auf die Verwendung von Sass zu konvertieren. Einige der netten Dinge, die Sie mit Sass tun können, sind, Variablen zu verwenden, um Werte zu speichern, die an vielen Orten verwendet werden . Sie können Mix-Ins oder Extension erstellen, so dass Sie nicht immer wieder die gleiche Kälte schreiben müssen . Du kannst nisten. Ihre Selektoren helfen Ihnen, Ihren Code zu organisieren, und Sie können mehr Effizienz schaffen. Bewerten Sie. Für Produktionswebsites gibt es andere CSS-Pre-Prozessoren, die Sie verwenden können. Neben SAS ist weniger die häufigste Alternative, und Stylist ist eine weitere Option, die eine kleinere Folge hat. Es ist nicht schwer, auf einen anderen Pre-Prozessor zu wechseln, sobald Sie einen kennen, so dass alles, was Sie in dieser Klasse lernen, leicht in einen anderen übersetzt werden sollte. SAS ist wahrscheinlich die beliebteste, aber weniger ist bei einigen großen Projekten, wie Twitter Bootstrap. So können Sie sich mit beiden in der Zukunft oder was auch immer die nächsten großen neuen Dinge jemand einfällt. Der Punkt ist, dass Sie, wenn Sie verstehen, wie ein Vorprozessor funktioniert, diese Fähigkeit haben, unabhängig von der gewählten Sprache. SAS ist in der Ruby-Sprache geschrieben, daher müssen Sie Ruby auf Ihrem Computer installiert sein. jedoch Sie müssen sichjedochkeine Gedanken darüber machen, dass Ruby auf Ihrem Webserver installiert ist. Sie brauchen es nur dort, wo Sie Ihr CSS schreiben werden. Wir werden im nächsten Video über die Installation von Ruby in SAS sprechen. Ich habe versucht, diese Klasse in kleinen Schritten so zu strukturieren, dass Sie entweder alles in einer Sitzung lernen oder einen Schritt nach dem anderen machen und sich auf ein neues Konzept konzentrieren. Heute die Wahl bei Ihnen. So oder so, Sie sollten in der Lage sein, diese Klasse ziemlich schnell zu durchstehen, also lasst uns loslegen 2. Sass installieren: Installation von SAS ist einfach, aber es beinhaltet die Verwendung der Befehlszeile auf Ihrem Computer. Ich weiß, dass hier einige von euch vielleicht aus dem Bus steigen wollen, weil die Kommandozeile Sie erschreckt. Aber ich würde Sie ermutigen, sich nicht darum zu kümmern und einfach die Schritte zu befolgen, die ich präsentiere. Es gibt viel Kraft zu gewinnen und zu verstehen, wie man die Befehlszeile benutzt, und man muss wirklich nicht viel Zeit dort verbringen, um ass zu verwenden. Aber es hilft, wenn Sie verstehen, was es ist und wie es jetzt funktioniert. Es gibt viele Tools, die es Ihnen erlauben, die Befehlszeile zu vermeiden, besonders wenn Sie auf einem Mac sind. Aber ich werde mich darauf konzentrieren, es zu benutzen, weil ich denke, es ist wertvoll, jede Angst oder Angst zu überwinden , die Sie haben könnten, es zu benutzen. Dies wird der komplizierteste Schritt in der gesamten Klasse sein. Sobald wir diesen Schritt überschritten haben, wird der Rest einfach sein, und wir müssen dies nur einmal tun. Der erste Schritt ist also Ruby zu installieren, und ich möchte Ihnen klarstellen, dass Sie Ruby nicht auf Ihrem Webserver haben müssen. Sie müssen es nur auf den Computern installiert haben, auf denen Sie die Entwicklung durchführen werden . Wenn Sie also einen Desktop und einen Laptop haben, auf dem Sie arbeiten, müssen Sie diese Schritte auf beiden Computern ausführen, aber es muss sich nicht auf Ihrem Webserver befinden. Das war eine Sache, über die ich besorgt war, als ich anfing, Sass zu verwenden, und es stellte sich heraus, dass es nichts war, worüber ich mir Sorgen machen musste. Die Ruby-Programme werden Ihre Sass-Dateien in CSS-Dateien konvertieren, und das ist, was auf Ihrem Webserver gehen wird. Wenn Sie also auf einem Mac sind, brauchen Sie nichts zu tun. Sie schon. Raum wird mit Ihrem Betriebssystem installiert. Wenn Sie unter Windows sind, müssen Sie zu den Slash-Downloads von Ruby Installer dot org gehen und die neueste Version des Installationsprogramms herunterladen und die Schritte ausführen. Ich werde diesen Prozess in einem Moment demonstrieren, und wenn Sie Lennox haben, müssen Sie nur das Ruby-Paket installieren. Also bin ich auf der Website und ich werde Dieb ersten Download-Link wählen, weil das die neueste Version ist . Es gibt andere Dinge, die Sie dort installieren können, aber es ist nur das Hauptinstallationsprogramm, das oben, das Sie wollen. Nachdem es heruntergeladen wurde, können Sie auf die Download-Datei klicken, um fortzufahren und es zu installieren, und das einzige, was Sie den Standard akzeptieren können, müssen Sie die Lizenz akzeptieren. Aber das einzige, was Sie wirklich darauf achten müssen, ist, dass Sie überprüfen möchten, dass ad Ruby ALS auf Ihren Weg ausgeführt hat. Jetzt schalte ich es für mich aus, weil ich es nicht brauche, aber Sie werden wahrscheinlich wollen, dass es eingeschaltet wird. Was das tut, ist, die Befehlszeile immer wissen zu lassen, wo sich Ihr Ruby befindet. Wenn Sie jedochProbleme haben, jedoch posten Sie bitte eine Frage im Frage- und Antwortbereich, und ich werde versuchen, Ihnen zu helfen. Der nächste Schritt besteht darin, die Befehlszeile zu öffnen Wenn Sie also auf einem Mac sind, müssen Sie das Terminalprogramm finden. Und wenn Sie nicht sicher sind, wo das ist, können Sie es in das Rampenlicht eingeben, und es sollte es für Sie finden. Vielleicht möchten Sie es so andocken, dass Sie immer Zugriff darauf haben. Wenn Sie unter Windows sind, finden Sie das Kommandoprogramm oder C M. D. Und wenn Sie an Grenzen sind, sind Sie wahrscheinlich bereits an der Lüfterleitung und brauchen keine Hilfe bei uns. Ich werde auf einem Windows-Computer demonstrieren, wie man dorthin kommt. Ich gehe zum Start-Button, und ich tippe einfach CMD ein. Ich habe es so eingegrenzt. Oder ich kann auch zu allen Programmen gehen und den Ordner finden, in dem Ruby installiert wurde, und ich kann die Start-Eingabeaufforderung mit Ruby verwenden . Der nächste Schritt besteht darin, Sass zu installieren, und wir installieren SAS mit den Ruby-Edelsteinen. Ruby Gems ist ein Paketmanager für Ruby-Erweiterungen, und Sass ist eine Ruby-Erweiterung. Es wurde in Ruby geschrieben. Auf diese Weise können Sie Programme und Erweiterungen mit der Klan-Linie installieren, anstatt auf die Website gehen,die Dateien herunterladen, die Dateien herunterladen, extrahieren und installieren zu müssen. Es ist also viel schneller, wenn Sie sich daran gewöhnen, Dinge auf diese Weise zu installieren. Es ist also eine nette kleine Funktion von Ruby, und der Befehl ist sehr einfach, und es ist das gleiche auf allen Betriebssystemen. Es ist nur Juwel installieren Säcke, so kann es eine Minute oder so zu installieren, aber es ist in der Regel ziemlich schnell, und jetzt ist es installiert. Der letzte Schritt ist nicht wirklich ein Schritt, der getan werden muss. Es ist völlig optional. Aber eine Sache, die ich nach der Installation etwas tun mag, ist nur die Version überprüft und stellen Sie sicher, dass alles installiert ist. Okay, also geben Sie einfach Ruby Dash V ein, um die Ruby-Version und die SAS-Dash-Gebühr für die Überprüfung der SAS-Version zu überprüfen. Sie können auch dash age eingeben, um eine Liste aller SAS-Befehle zu erhalten. So ist SAS jetzt installiert und wir sind bereit zu gehen. Ich würde wahrscheinlich die Befehlszeile offen lassen, weil Sie sie benötigen, um Ihre sass-Dateien zu kompilieren . Aber im nächsten Film wird sich das Projekt ansehen, an dem wir in dieser Klasse arbeiten werden. 3. Projektübersicht: Wir werden an einem echten Projekt in dieser Klasse arbeiten, keine echte Website, aber etwas, das ein bisschen substanzieller ist als nur ein paar Demos. Wir werden ein Projekt verwenden, das ich vor ein paar Jahren für eine Designklasse entworfen habe. Es ist keine Live-Website, aber es hat ein paar Seiten, und es ist genug für uns, tatsächlich in Sass zu konvertieren und die Vorteile der Verwendung zu sehen, um unser CSS zu schreiben. Ich habe einen Link zum Startcode für das Projekt, das in den Unterrichtsnotizen aufgeführt ist. Sie können auch den Code für mein get Hub-Repository abrufen. Nach jedem Schritt übernehme ich die Änderungen und tagge sie, damit Sie hier immer den Code für jeden Schritt finden können . Indem ich das Tag ändere, werde ich nicht bei jedem Schritt einen Download-Link zur Verfügung stellen. Die Absicht ist, dass Sie versuchen sollten, die Änderungen selbst vorzunehmen und mit einem Code zu spielen, um zu sehen, wie es funktioniert. bedeutet, dass Sie die Videos pausieren oder versuchen müssen, die Arbeit zu erledigen. Nachdem Sie das Video gesehen haben, werde ich mich ziemlich schnell bewegen und werde nicht alles im Code vollständig in Sass konvertieren. Ich werde genug tun, um die Konzepte zu erklären und nach jedem Video weiterzumachen, Sie könnten versuchen, weitere Beispiele zu finden, um das Konzept zu implementieren. Aus dieser Lektion werde ich Klammern als Redakteur verwenden. Es ist ein kostenloser Open-Source-Editor von Adobe. Ich habe es gewählt, weil es eine schöne Lebensvorschau Ihres Codes hat, wenn Sie im Chrome-Browser sind. Auf diese Weise muss ich nicht aktualisieren, nachdem ich Codeänderungen vorgenommen habe. Sie erhalten diese Live-Vorschau, indem Sie auf dieses kleine Symbol klicken, wenn Sie Ihre HTML-Datei geöffnet haben . Das ist also die Website. Es hat eine Homepage, und es gibt einige Übergänge im Navigations- und Hover-Zustand. Wenn Sie auf das erste Video klicken, können Sie zu einer Beispiel-Instructor-Seite gelangen. Dies hat einige Registerkarten mit verschiedenen Ansichten. Hier gibt es auch eine Kategorieseite. Wenn Sie auf den Link „Trainingstypen“ klicken und auf das Logo klicken, können Sie zur Startseite zurückkehren. Es sind drei Seiten, und es sollte ausreichen, damit wir arbeiten können. Es gibt einige Dinge im Code, die etwas veraltet sind, weil ich das vor mehr als zwei Jahren getan habe , und es gibt wahrscheinlich bessere Techniken, die wir verwenden könnten. Jetzt gibt es auch einige Bugs und Fehler hier. Dies war für eine Design-Klasse, und ich konzentrierte mich darauf, wie es aussah und nicht den Code. Aber das wird ein guter Ort sein, um Ihren ersten Versuch zu verwenden, sass alleine zu verwenden , vielleicht, um es in eine Website zu integrieren, für die Sie bereits ein CSS geschrieben haben. Also dachte ich, dieser Ansatz zum Lernen von Sass wäre der beste Weg. Sie müssen nicht ah, 100% schnell für Ihren Code verwenden . Sie können normales CSS und Sprinkle in einigen sass-Techniken schreiben, während Sie immer noch die Konzepte lernen . Wenn Sie sich mit den Techniken vertraut machen, die ich hier lehre, können Sie anfangen, Ihren Code und Sass von Anfang an zu schreiben, und das ist, wenn es sehr mächtig und schnell wird. Wenn wir uns den Code ansehen, werden wir uns nicht auf alles konzentrieren. Die Hauptdatei, auf die wir uns konzentrieren werden, ist diese CSS-Datei, in der sich das Haupt-CSS befindet. Wenn wir uns den HTML-Code ansehen, können wir sehen, dass wir einige CSS-Dateien verlinken. Es gibt diese I e Onley-Datei, die Sie möglicherweise nicht einmal mehr benötigen, je nachdem, welche Versionen von IE Sie unterstützen. Es gibt auch eine Handheld-CSS-Datei, die verwendet wird, um die Site in kleineren wenigen Ports anzuzeigen. Dies ist keine echte responsive Website, aber es hat ein etwas anderes Aussehen für kleinere Ansicht gegossen. Also, wenn jemand das auf seinem Handy sieht, wird er immer noch in der Lage sein, alles zu sehen. Aber es hat sich nur leicht verändert. Wir werden nichts in der Handheld-CSS-Datei ändern, aber alles, was wir im Stil CSS sprechen, könnte auch in Handheld-CSS verwendet werden. Wenn wir die Live-Vorschau sehen wollen, können wir einfach etwas Text im HTML ändern. Ich ändere neue Releases auf die neueste, und es wird sich sofort im View-Port ändern. Und wenn ich es rückgängig mache, wird es sich wieder ändern. Es ändert sich, sobald ich speichere. Das ist also, an dem das Projekt arbeiten wird. Wenn Sie die ursprünglichen Dateien noch nicht heruntergeladen haben, sollten Sie dies jetzt tun. Wenn du versuchen willst, mit mir zusammenzuarbeiten. Wenn Sie das nicht wollen, können Sie auch versuchen, eine Ihrer eigenen Websites zu öffnen und versuchen, zu folgen. Sie in der nächsten Lektion Änderungen an Ihrem eigenen Code vornehmen, wird diese Website in SAS konvertiert. 4. Konvertieren von bestehenden Projekten in die Masse: in dieser Lektion lernen wir, wie man sass-Dateien kompiliert. Wir werden die Stil-Punkt-CSS-Datei, die die Webseite verwendet, in eine SAS-Datei oder eine Punkt-CSS-Datei ändern . Das einzige, was wir tun müssen, ist die Datei umbenannt. Ich werde die Punkt-CSS-Dateien von jetzt an sass-Dateien nennen, weil es viel einfacher zu sagen ist. Und es wird weniger verwirrend sein, wenn wir es mit regulären CSS-Dateien vergleichen. Wenn Sie mit sass arbeiten, erledigen Sie Ihre Arbeit in der SAS-Datei, die dann in eine CSS-Datei für Ihre Webseiten kompiliert wird. Kompilieren von SAS beinhaltet einen einfachen Befehl, der in der Befehlszeile eingegeben wird. Sie wechseln in das Verzeichnis Ihres Projekts, in das Verzeichnis, in dem sich Ihr CSS befindet, und geben SAS ein, was bedeutet, dass Sie einen SAS-Befehl mit Bindestrichen ausführen , der eine SAS-Option aufruft. Beobachten Sie ohne Platz davor. Dies ist zu sagen, dass Sie eine Datei oder einen Ordner mit dem Dateinamen beobachten möchten, was die Datei ist, die Sie sehen möchten, um anzuzeigen, dass Sie fertig sind, die Dateien aufzulisten und dann den Dateinamen, wo die Ausgabe gehen soll? Dieser Befehl nimmt Ihre sass-Dateien, ob sie die dot s CSS Dateierweiterung oder die dot s A S s Dateierweiterung haben , und legt sie durch den Compiler oder Pre-Prozessor und es wird die CSS-Datei ausspucken. Also lasst es uns versuchen. Ich habe meine Redakteurin geöffnet. Sie können sehen, dass ich mit dem Stil verknüpft bin, den CSS ich auch mit Handheld verknüpft bin , den wir jetzt nicht ändern werden. Ich starte die Webseite, indem ich auf die Schaltfläche „Live Preview“ klicke. Also hier ist die Seite und alles sieht so aus, als ob es sollte Jetzt werde ich Thesis E ss-Datei in Punkt s CSS umbenennen . Die Lebensvorschau behandelt dies nicht, daher muss ich die Seite aktualisieren. Wenn wir uns die Webseite ansehen, zeigt es jetzt nur einfaches HTML gerendert. Es gibt kein CSS mehr, weil wir die Datei umbenannt haben, damit wir das beheben können, indem wir die Uhr machen. Commander. Ich bringe die Man-Zeile auf und ich gehe in das CSS-Verzeichnis. Wenn ich d i r oder l s tippe. Wenn ich auf einem Mac unserer Limits-Maschine bin, werde ich alle Dateien in meinem Verzeichnis sehen und Sie können diese sass-Datei direkt hier sehen. So können wir es jetzt in unregelmäßigem CSS kompilieren. Ich tippe SAS zwei Striche Watch, dann Stil. Das ist CSS Doppelpunkt Stil Punkt CSS. Jetzt können Sie sehen, dass der Befehl läuft es erstellt sind CSS-Datei stylen und es sagt überschreiben Jedes Mal, wenn es in die CSS-Datei schreibt, wird es sagen, dass Beachten Sie, dass wir die Eingabeaufforderung nicht mehr erhalten. SAS sitzt nur da. Es wartet oder beobachtet auf Änderungen an unseren SAS-Dateien. Wann immer es eine Änderung sieht, wird es das reguläre CSS neu erstellen. Es gibt ein anderes Problem in Klammern. Es ist immer noch ein neues Projekt, also ist es noch nicht perfekt, aber es erkennt nicht, wenn ich neue Dateien zum Verzeichnis hinzugefügt habe. Es findet also nicht die Punkt-CSS-Datei, also muss ich sie schließen und erneut öffnen. Jetzt kann ich es sehen und ich muss die Lebensvorschau neu starten und jetzt können wir sehen, dass die Website wieder normal ist , weil es eine CSS-Datei gibt. Nichts hat sich geändert. Wir wissen nicht, haben Änderungen an der Website noch gemacht, aber wenn wir uns die SAS-Datei und die CSS-Datei ansehen. Sie sehen fast genau gleich aus. Es werden einige Formatierungs- und Abstandsunterschiede geben, aber abgesehen davon sind sie gleich und sollten gleich sein, weil wir wirklich keinen Cess und Text verwendet haben. Nun, wenn wir sehen wollen, wie das funktioniert, können wir etwas in der SAS-Datei ändern. Ich gehe zum Body-Selektor und ändere die Hintergrundfarbe in Rot. , Bevor ich die Datei speichere,möchte ich, dass du auf die Befehlszeile schaust und wenn ich sie speichere, merke, was passiert. Die SAS-Datei wurde geändert, sodass die CSS-Datei neu geschrieben wurde. Sie können sehen, dass es überschreiben sagt. Es sieht so aus, als ob die Live-Vorschau die Änderung nicht erkennt. Also werde ich nur auf das Browserfenster klicken. Und jetzt scheint es, dass die Veränderung und Veränderung der Stil ist. Und dann kann ich es wieder normal einstellen und wir können sehen, wie die Änderung erkannt wurde und die Hintergrundfarbe hat sich wieder geändert. So verwenden Sie SAS. Wann immer Sie Ihr CSS ändern, müssen Sie nur daran denken, den Watch-Befehl zu starten. Sie lassen es im Hintergrund laufen, während Sie arbeiten. Sie müssen nicht wirklich darauf achten, es sei denn, es gibt ein Problem. Zusammenfassend starten Sie den SAS-Watch-Befehl, nehmen Ihre Änderungen in den SAS-Dateien und sass erstellt dann Ihr CSS für Sie. 5. Variablen: Das erste Feature von Fast, über das ich sprechen möchte, sind Variablen, und das liegt daran, dass Variablen sind, was mich auf SAS verkauft. Wenn es das einzige Merkmal von cess wäre, würde ich es wahrscheinlich immer noch verwenden wollen. CSS wird schließlich Variablen haben, aber es noch nicht. Und natürlich, natürlich, selbst wenn sie beginnen, implementiert zu werden, wird es einige Zeit dauern, bis alle Browser an Bord sind. Mal sehen, wie SAS-Variablen funktionieren und wie Sie Ihre Entwicklung beschleunigen können, um, um, um, um, definieren Sie eine Variable mit einem Dollarzeichen, das Sie Ihre Variable nennen könnten. Alle Wörter, die eine Kombination aus Buchstaben Unterstriche und Bindestriche verwenden. Nachdem Sie Ihre Variable benannt haben, geben Sie ihr einen Wert. Der Wert Ihrer Variablen kann ein Hex-Wert für eine Farbe, eine Zeichenfolge von Textnummern oder manchmal Tour fällt sein. Es hängt davon ab, wo Sie die Variable verwenden werden. Um die Variable zu verwenden, müssen Sie sie zuerst definieren, und dann haben Sie einfach den Variablennamen überall dort verwendet, wo Sie den Wert der Variablen eingegeben hätten . Wenn wir uns das CSS ansehen, das ich im Projekt definiert habe, werden Sie sehen, dass ich einen Kommentar an die Spitze der Datei für die Hauptfarben des Projekts setze . Sie können sehen, wie sie den Farben auf der Webseite entsprechen. Sogar die Kommentare an der Unterseite, so dass ich immer einen einfachen Zugriff auf die Farbwerte habe , wenn ich an einem Projekt mit sass mischen, dass unnötig, weil wir leicht die Farbe an einem Ort ändern können , wenn wir müssen. Lassen Sie uns also unsere Farben in den Variablen machen. Jetzt verschiebe ich diesen Kommentar nach unten, wo die Variablen im Code definiert werden sollen. nächste Mal haben die Variablen aussagekräftige Namen? Es ist am besten, die Variablen nicht mit einer Farbe wie Blau zu benennen, denn wenn sich das Design ändert, ergeben die Namen keinen Sinn mehr. Ich benutze Basis und Akzent jetzt werde ich eine Suche machen und ersetzen, so dass ich mich überall beschränkt . Ich verwende diese Farben und ersetze sie durch die Variablenreferenz. Ich muss nur vorsichtig sein, um die Variablendefinitionsfarbe nicht zu ersetzen, und ich habe das tatsächlich auf der letzten gemacht, also kann ich das einfach rückgängig machen. Jetzt stelle ich sicher, dass ich die CSS-Dateien von der Befehlszeile aus beobachte und dann zum Editor zurückkehren und meine Änderungen speichern kann , und es sieht so aus, als ob es einen Fehler gibt. Die Nachricht sagt mir, dass das Problem online ist 29. Also werde ich dorthin schauen. Es scheint, dass ich einen Verweis auf meine Variable habe, bevor sie definiert wurde. Also muss ich meine Variablendefinitionen in der Datei höher verschieben. In der Regel setzen Sie sie nach dem Reset CSS an die Spitze, um dies zu vermeiden. Aber ich habe es einfach nicht an der richtigen Stelle bekommen. Also diesmal hat es funktioniert. Und wenn wir uns das CSS anschauen, können Sie sehen, dass dort, wo wir die Variablen definieren, es keinen Code gibt. Wir können nur den Kommentar sehen, weil das nicht gültig ist. CSS. Stattdessen suchte es, als es kompiliert wurde , nach dem Variablennamen irgendwo im Code und ersetzte ihn durch den tatsächlichen Wert der Variablen. Nun, wenn wir uns die Website ansehen, die Farben immer noch gut aus. Wir könnten auch eine Variable für den Fonds festlegen. Ich habe nicht viel Spaß Deklarationen in der CSS, weil ich den Bodies Fund geändert habe und es über die gesamte Seite kaskadiert. Aber wir können versuchen, es hier sowieso zu tun, weil es Zeiten gibt, in denen Sie mehrere Mittel in einer Website verwenden . Ich mache eine Variable namens Basisschriftart und verwende sie für den Körper. Also eigentlich das alles nicht sehr aufregend. Konvertieren von CSS in die Verwendung von Variablen erfordert immer noch etwas Arbeit, aber das Tolle daran ist, wenn Sie sich entscheiden, dass Sie einen der Werte ändern möchten. Nehmen wir an, ich wollte, dass meine Akzentfarbe ein etwas anderes Grün ist. Ich kann den Variablenwert ändern, und jetzt ist es eine hellere Farbe und ich muss es nur dort an diesem Ort ändern. Das ist die Kraft von Sass und was macht es angenehm zu bedienen. Es ist einfach und schmerzlos, Ihren Code zu ändern. So wurde das CSS regeneriert. Und wenn ich auf die Website schaue, haben sich die Farben geändert. Leider ist das Grün in meinen Icons, die Bilder, so dass die Farben ausstrahlen, so dass diese auch geändert werden müssten. Wenn ich diese Änderung wirklich vornehmen wollte, wenn ich diese Website heute mache, würde ich wahrscheinlich die Bilder mit transparenten Hintergründen weiß machen und dann das Hintergrund-CSS färben , um es flexibler zu machen. Also ändere ich das zurück und versuche, die Grundfarbe in Schwarz zu ändern, und ich kann schnell den Unterschied auf dem Hintergrund und den Knöpfen sehen. Eines der großartigen Dinge daran ist, dass Sie einige Design-Arbeit im Browser erledigen können, wo Sie tatsächlich sehen, wie die Dinge aussehen. Sie müssen nicht in Photoshopped sein, um mit Ihrem Design zu spielen Um also zusammenzufassen, eine Variable zu deklarieren, denken Sie daran, sie oben zu definieren. Beginnen Sie mit einem Dollarzeichen, bevor Sie ihm einen Namen geben. Setzen Sie den Wert am Ende, und dann können Sie an jedem beliebigen Ort, an dem Sie diesen Wert verwenden möchten, einfach den Variablennamen eingeben. Und wenn Sie es jemals ändern möchten, müssen Sie nur den Variablenwert ändern. In der nächsten Lektion werden wir darüber sprechen, wie SAS Kommentare ein wenig anders behandelt als normales CSS. 6. Kommentare: in diesem Video. Ich möchte mit Sass über Kommentare sprechen. Es scheint eine kleine Sache zu sein, aber ich schätze wirklich die kleinen Unterschiede zwischen regulären CSS-Kommentaren und SAS-Kommentaren . In CSS setzen Sie Ihre Kommentare in einen Schrägstrich plus Asterix. Sie müssen Ihren Kommentar auch mit einem Asterix plus Schrägstrich schließen. Dies ist eine sehr häufige Syntax für Kommentare in vielen Programmiersprachen. Commons verschwören Mann mehrere Zeilen auf diese Weise, und das könnte nützlich sein, wenn Sie einen großen Textblock haben, den Sie in Ihren Kommentaren wollen . Das Problem ist, dass diese Tastenkombination ein Schmerz sein kann, um zu tippen. Sie müssen immer Ihren Kommentar schließen. Du kannst nicht einfach mit dem Kommentieren beginnen. SAS ermöglicht es Ihnen, stattdessen einzeilige Kommentare zu verwenden, was ich einfacher Toe Anzeige für einen einzeiligen Kommentar finde. Sie geben einfach zwei Schrägstriche ein, und alles, was diesen Schrägstrichen in dieser Zeile folgt, wird wieder zu einem Kommentar. Dies ist ein Kommentar in der Steuer in vielen Sprachen. jedoch Regelmäßiges CSS erlaubtjedochkeine einzeiligen Kommentare, so dass sie in Sass sind eine nette Funktion. Sie können beide Arten von Kommentaren in Ihren SAS-Dateien verwenden. Die einzeiligen Kommentare werden nicht zu Ihrem CSS hinzugefügt. Die mehrzeiligen Kommentare werden hinzugefügt. Persönlich versuche ich, einfach das Format der beiden Schrägstriche zu verwenden, da ich keine Kommentare in meinem CSS brauche. Ich brauche sie in den SAS-Dateien , wo ich meinen Code bearbeite. Also habe ich meine SAS-Datei geöffnet und ich beobachte nach Änderungen an der SAS-Datei. Wenn wir uns den vorhandenen Code ansehen, können Sie sehen, dass alle Kommentare grau angezeigt werden. Das liegt daran, dass das Thema des Texteditors Kommentare auf Grau setzt. Dies sind alle mehrzeiligen Typ, weil das notwendig war, als das Lächeln eine normale CSS-Datei war . Ich werde diese Kommentare ändern, um den einzelnen Zeilentyp mit zwei Schrägstrichen zu sein. Ich werde diesen Kommentar als regelmäßige CSS-Kommentare hinterlassen, damit wir den Unterschied sehen können, wenn wir die Datei gespeichert haben . Wenn wir uns das CSS ansehen, können Sie sehen, dass es sehr wenige Kommentare gibt. Da ist diejenige, die ich retten wollte, und es gibt ein paar, die ich vermisse. Kommentare sind sehr hilfreich, um Ihr CSS sauber und organisiert für später zu halten, wenn Sie Änderungen am Design vornehmen möchten . Sie brauchen sie jedoch nicht in Ihrem endgültigen CSS, jedoch nicht in Ihrem endgültigen CSS, also können Sie mit SAS-Stil-Kommentaren Ihren Code so viel kommentieren, wie Sie möchten, ohne etwas zum eigentlichen CSS hinzuzufügen. 7. Nesting: Verschachtelung ist eine Funktion von schnell, mit der Sie Ihre Selektoren innerhalb anderer Selektoren verschachteln können , anstatt alle Tags in Ihrem Selektor wie H one und A für ein Anker-Tag innerhalb eines H eingeben zu müssen . Sie können uns die Ankermarke innerhalb Ihrer H one Klammern. Dies bedeutet, dass Sie h nicht immer und immer wieder ein Tag neu eingeben müssen. Wenn der SAS kompiliert, erstellt er den Selektor in voller Länge und fügt den oberen Selektor zu dem hinzu, was Sie darin verschachtelt haben. Es hilft wirklich, Ihr CSS organisiert zu halten, was der Hauptgrund ist, warum ich Nestea mag. Sie können auch Untereigenschaften von Dingen wie Schriftart, Hintergrund oder Rahmen kennen . Sie können hier sehen, waren Verschachtelung Familie Größe und Gewicht in den Fonds Klammern. Ich benutze das nicht wirklich im Text, weil ich im Allgemeinen den kurzen Hansen-Text bevorzuge, aber einige Leute finden es nützlich, also lasst uns ein paar nest een im Projekt verwenden. Wir können sehen, dass der erste nicht zurückgesetzte oder basierte Selektor hier Körper ist. Hier könnten wir Probleme schaffen. Alles auf der Seite wird ein Kind des Körpers sein, also könnten Sie technisch gesehen alle Ihre Selektoren im Selektor des Körpers verschachteln, aber wir wollen das nicht tun. Es gibt keinen Grund, Ihren anderen Selektoren Körper hinzuzufügen. Und wenn es keinen Grund gibt, dieses zusätzliche Tag in Ihrem Selektor zu haben, sollten Sie es nicht durcheinander bringen, also lassen wir diesen Abschnitt in Ruhe. Wir haben eine ähnliche Situation mit Container, der der 960 Pixel breite Container des Seiteninhalts ist. Das bringt also einen wichtigen Punkt auf sich. Eine der Beschwerden über SAS ist, dass es schlechte CSS fördern kann. Ich bin mir nicht sicher, ob das wahr ist, aber ein Grund, warum es das tun könnte, ist wegen böser. Verwendung von Verschachtelung macht es verlockend, alles durcheinander zu bringen, weil es schön und organisiert aussieht. Aber Sie sollten Ihre Selektoren wirklich nur verschachteln, wenn Sie die Spezifität benötigen, die ich bei der Arbeit an größeren Websites gefunden habe , dass, wenn ich nur zusätzliche Tag-Klassen oder ich ds zu meinen Selektoren hinzufüge , wenn ich sie wirklich brauche, das CSS einfacher ist pflegen und mit arbeiten. Ein gemeinsames Ziel, das die Leute zitieren, ist es, Ihre Verschachtelung auf zwei oder drei Ebenen zu halten. Natürlich ist dies nur eine Richtlinie, und ich könnte das hier auf einer kleineren Seite brechen. Dies ist nicht so wichtig, aber wenn Sie anfangen, an großen Websites mit viel CSS zu arbeiten, wird dies wichtiger. Also werde ich mich zuerst auf den Header-Bereich konzentrieren. Es ist möglich, dass ich nicht einmal Header und alle meine Selektoren hier einschließen muss. Aber ich werde den Code jetzt nicht neu faktorieren, außer zu versuchen, ihn in Sass zu konvertieren. Also beginne ich mit diesem h und schiebe es nach oben und eingerückt, um deutlich zu machen, dass ich verschachtele . Dann entferne ich den Wort-Header aus dem Selektor. Wenn ich es in gelassen habe, wäre das CSS nicht korrekt, weil es zwei Header-Header H einen anstelle von nur Header h eins kompilieren würde . Ich kann diesen Prozess mit allen anderen Selektoren wiederholen, die mit Header beginnen. Ich nehme diese große Gruppe und schneide sie oben aus und füge sie ein, eingerückt und ersetze die Wort-Kopfzeile durch nichts. Jetzt sieht es wie dieser Selektor aus. Das P war nicht mit den anderen gruppiert, also werde ich es einen Schwung bewegen und es gibt tatsächlich zwei verschiedene Header Piece Wähler in meinem Code. Dies ist ein netter Vorteil dieser Änderung, weil es Ihnen hilft, Ihren Code zu bereinigen und ihn zu organisieren. So werden diese Art von Problemen deutlicher. Ich brauche nur einen Header p Selektor, also werde ich es jetzt reparieren. Ich werde es auch höher verschieben, weil ich normalerweise meine weniger spezifischen Selektoren an der Spitze halten möchte . Jetzt kann ich etwas mehr im Dellen tun. Es ist wahrscheinlich, dass ich das Klassenkonto nicht wirklich innerhalb des Headers auf der kleinen Website verschachteln muss. Aber wenn es zu einer echten Seite wird, brauche ich diese Spezifität. Also werde ich es jetzt reinlassen. Ich möchte sicherstellen, dass ich nach Änderungen beobachte, um zu sehen, ob ich Fehler gemacht habe. Ich werde die Datei speichern und es sieht aus wie alles kompiliert. Ordnung. Ich werfe einen kurzen Blick auf die Kopfzeile und es zeigt, dass die Dinge Luft noch funktioniert. Okay, ich werde Sie nicht dazu bringen, mich den Rest des CSS zu sehen, stattdessen, Wenn Sie sicherstellen möchten, dass Sie wirklich dieses Konzept erhalten, empfehle ich, dass Sie das Video pausieren und versuchen, es auf eigene Faust zu tun. Es gibt immer noch mehrere Bereiche zu arbeiten, wie der NAB-Bereich, die Sidebar Listing Bereich Player. Und noch mehr als das, zeig ich dir sehr schnell. Was ich hier geändert habe. Ich habe nicht den Knave-Bereich. Ich habe es weiter auf den UL und Verbündeten Selektoren verschachtelt. Das einzige, was ich nicht verschachtelt habe, war dies, das ein Komma hat, das einen Fußzeilen-Selektor trennt. Es gibt also zwei separate Selektoren in dieser Zeile, also wollte ich das nicht durcheinander bringen, weil es den Fußzeilen-Selektor durcheinander bringen würde. Ich habe die Fußzeile unten unten gemacht, den Typabschnitt, der für dieses Overlay-Menü ist. Hier habe ich den Spieler knave Code verschachtelt , der Teil der zweiten Seite ist, und es gab mehr Flecken, die ich verschachtelt habe. Wenn Sie den vollständigen Status meines Codes sehen möchten, teile ich einen Link zu dem Code auf Get Hub, damit Sie Ihre Änderungen mit meinem vergleichen können. Der letzte Punkt, den ich ansprechen möchte, ist, dass es beim ersten Lernen von Sass eine gute Idee ist. Schauen Sie sich Ihre Ausgabe CSS an. Nachdem Sie Ihre SAS-Dateien gespeichert haben , wird es Ihnen helfen, schneller zu lernen, was der Pre-Prozessor mit Ihrem Sass macht. Wenn wir uns das Hutmacher-Gebiet ansehen. Sie können sehen, dass die CSS-Ausgabe wie der ursprüngliche Code aussieht. Wir sehen Header H wieder eins. Wenn wir uns den Knave-Bereich ansehen, können wir jetzt Sie al L. I A. und die ganze Gruppe von Selektoren auf dieser Linie sehen. Der einzige wirkliche Unterschied ist die Erfindung in der neuen Datei. Verschachtelung ist eine nützliche Funktion von SAS, da Sie weniger eingeben können, insbesondere wenn Sie Ihr CSS von Grund auf neu erstellen. Es hilft Ihnen, Ihren Code organisiert zu halten und einfacher zu lesen und zu warten. Es sollte jedoch mit Vorsicht verwendet werden . Denken Sie daran, Zeh auf Li ness, wenn Sie müssen. Weniger spezifische Selektoren sind im Allgemeinen einfacher zu pflegen, wenn Sie Ihr CSS schreiben. 8. Erstrecke die Erkunde: in diesem Video werde ich über den Befehl extend sprechen und SAS Extend ist eine Möglichkeit für einen Selektor, alle Eigenschaften eines anderen Selektors zu erben. Es verhindert die Notwendigkeit, Code zu duplizieren. Es könnte verwendet werden, um Sätze von Eigenschaften zu definieren, die eine Gruppe von Elementen teilen könnte. Es erstreckt sich auf eine durch Komma getrennte Liste von Selektoren. In diesem Beispiel haben wir einige Styling für eine Schaltfläche. Es sind die Basisstile für eine Schaltfläche, die die meisten Schaltflächen auf der Website verwenden. Sie können dann andere Schaltflächen haben, die diese Stile haben, aber Sie können sie auch mit einzigartigen Eigenschaften anpassen. Dies verhindert, dass Sie alle doppelten Eigenschaften für diese spezielle Schaltfläche kopieren müssen, die Sie sehen können, wenn der SAS kompiliert wird. Es fügt nur die spezielle Klasse zum Schaltflächenselektor hinzu, und es belässt nur die eindeutigen Eigenschaften auf den Specials. Letzter Selektor unten. Sie Ihren Code mit dem Befehl EXTEND schreiben, können Sie Ihren Code kürzer und organisierter halten , bevor wir in unser Projekt gehen. Lassen Sie uns versuchen, mit einem Beispiel mit diesem Schaltflächenkonzept zu spielen. Ich habe diese beiden Starterdateien, die Sie im vorherigen Schritt Test herunterladen können. HTML ist eine einfache Webseite mit einer Schaltfläche und einem div mit einer Klasse von C T A. Es gibt auch eine Test-SAS-Datei mit einigen Variablen für die Farbe und Schriftart und die Basis-Button-Stile. Sie können sehen, dass die HTML-Datei mit Test-CSS verknüpft ist , das noch nicht existiert Deshalb hat unsere Seite keine Stile. Wir können das CSS erstellen, indem wir den Test God s CSS Datei beobachten. Es ist der gleiche Befehl, den wir bereits verwendet haben, aber dieses Mal ersetzen wir das Wort Stil durch Test. Seit ich mit dem Filmen dieser Klasse begonnen habe, gibt es ein Update in die Klammer, also kann ich jetzt F fünf drücken und den Ordner aktualisieren, so dass ich Test-CSS sehen kann, ohne den Editor zu schließen und erneut zu öffnen. Wenn ich auf meine Vorschau klicke, können Sie die Stile auf der Schaltfläche sehen. Bisher gibt es hier nichts Neues. Nun, wenn ich möchte, dass der Aufruf zur Aktion Div toe wie meine Tasten aussieht, obwohl es nicht wirklich ein Knopf ist, kann ich Theaterbefehl verwenden. Also in der SAS-Datei verwende ich den Klassenselektor c t a und type. Schaltfläche „Erweitern“ hinzufügen. Dies bedeutet, dass alle Stile aus der Schaltfläche auf alles mit der C t a Klasse angewendet werden . Wenn ich es speichere und dann auf den Browser klicke, um sicherzustellen, dass es die Änderung erkennt, können Sie sehen, dass das Diff jetzt wie die Schaltfläche aussieht, mit Ausnahme der Tatsache, dass die Breite 100% des View-Ports anstelle einer normalen Tastengröße beträgt . Das liegt daran, dass wir es mit einem Dip anstatt mit Knopf zu tun haben. Es ist immer gut, das generierte CSS zu betrachten, und wir können sehen, dass die C T A-Klasse zur Liste der Selektoren auf der Schaltfläche hinzugefügt wurde, so dass ich ein mit zur c t A-Klasse hinzufügen und das Tech Center ausgerichtet machen kann. Ich werde es speichern und wir können die Änderungen im Browser sehen. Schauen wir uns also das CSS an. Die einzigartigen Eigenschaften, um TA Class zu sehen, sind jetzt in ihrem eigenen Black of Code. Die Eigenschaften, die aufgrund der Erweiterung geteilt werden, sind immer noch gruppiert, so dass wir jetzt unser Projekt betrachten und Orte finden können, um das zu verwenden. Ich werde die Testdateien schließen und die Projektdateien öffnen Stattdessen muss ich auch aufhören, den Test anzusehen und den Stil wieder anzuschauen. Der Code, den ich oft ohne Änderungen wiederhole, ist die Übergangseigenschaft. Da dies eine CSS drei Eigenschaft ist, werden mehrere Zeilen wiederholt, weil alle Lieferanten Präfixe, die wir benötigen. Meine erste Verwendung von Übergang ist in der Navigation, wo sich die Hintergrundfarbe ändert, wenn Sie den Mauszeiger über die Schaltflächen bewegen. Ich übertrage hier nur die Hintergrundfarbe. Ich benutze eine Dauer von 0,3 Sekunden und lockere Art der Leichtigkeit in. Wenn Sie mit Übergängen nicht vertraut sind, ist ein Übergang eine reibungslose Änderung von einem Zustand zum anderen, so dass wir zwischen Farben, Größen und mehr wechseln können . Normalerweise diese Luft gemacht, wenn sich der Stil auf dem Hover ändert. Sie setzen den Übergangscode nicht auf die Hover-Stile, sondern fügen sie in die Basisstile ein. Dadurch kann der Übergang erfolgen, wenn Sie den Mauszeiger über etwas bewegen, und auch wenn Sie aufhören zu schweben. Wenn wir nach anderen Orten mit Übergang suchen, können wir sehen, dass es einen Übergang auf die Neuankömmlinge mit einem kleinen Pop-up mit der Art der Arbeit aus und Namen gibt. Dieser Übergang verwendet alles, weil er andere Eigenschaften überträgt und nicht die Hintergrundfarbe . Wenn Sie sagen, alle Eigenschaften, die auf Hover unterschiedlich sind, wird Übergang in diesem Fall wirklich die Position und Deckkraft der Box übergehen um sie in Sicht zu bringen. Im Allgemeinen ist es am besten, die Eigenschaften zu zielen, die Sie tatsächlich umstellen, anstatt alle aus Performance-Gründen zu verwenden . Aber die Realität auf der kleinen Seite ist, dass es nicht wirklich schaden wird, also werde ich alle in meinem Übergang einrichten überall verwenden. Die anderen Übergänge befinden sich auf dem Mauszeiger im Pop-up-Menü und auf der Workout-Typ-Seite, der Hintergrund erweitert sich und wird größer. Also werde ich eine Basisübergangseigenschaft mit dem Klassenübergang einrichten. Ich habe wirklich nichts mit einer Übergangsklasse auf der Seite, aber ich nenne es so, weil es Sinn macht. Ich kopiere die vier Codezeilen hier und verwende die „All for Properties“, um zu übergehen. Jetzt, Überall, wo ich den Übergangscode hatte, werde ich einfach diese Zeilen durch beim Verlängern DOC-Übergang ersetzen. Jetzt werde ich es speichern und schauen wir uns das CSS an. Sie können sehen, dass ich nach meiner Übergangsklasse die vier Selektoren habe, in denen der erweiterte Übergang. Sie sind alle hier mit demselben Übergangscode zusammengefasst. Wenn ich in meinem CSS nach der Übergangseigenschaft gesucht habe, werde ich sie nirgendwo anders als hier finden. Dieser Code ist in Ordnung, aber das Seltsame ist, dass die Übergangsklasse nicht wirklich benötigt wird. Es gibt keine Tags in meinem Code, die dies als Klasse haben, und es scheint seltsam, es in meinem endgültigen CSS zu haben. Es tut nichts weh, aber es ist nicht notwendig. Der Grund, warum ich es nicht getan habe, ist, weil wir einen Basis-Selektor benötigen, um unsere Übergangseigenschaften zu aktivieren. In frühen Versionen von Sass musste man diese Seltsamkeit einfach akzeptieren. Aber spätere Versionen von Sass haben hinzugefügt, was als Platzhalter bezeichnet wird. einem Platzhalter können Sie eine Basisklasse einrichten und zwingen Sie nicht, sie in Ihr CSS zu setzen. Es ist irgendwie wie eine Supervariable. Sie definieren einen Platzhalter mit dem Prozentsymbol und dann dem Namen. Dann definieren Sie alle Eigenschaften, die Sie wollen, den Platzhalter zu haben. In unserem Beispiel müssen wir nur den Verweis auf den Klassenübergang mit einem Punkt auf einen Verweis auf den Übergangsplatzhalter mit einem Prozentsatz einfach ändern . Wir müssen dies überall ändern, wo wir auch den Übergang verlängern. Nun, wenn wir uns das CSS ansehen, können Sie sehen, dass wir nicht mehr diese unnötige Klasse des Übergangs haben. Das einzige, was den Übergang verwendet, sind die vier Selektoren, die ihn benötigen. Es ist eine kleine Änderung, aber es macht Ihr CSS genauer und Sie erstellen keine unnötigen Selektoren mit dem Platzhalter. Zusammenzufassen ist also eine gute Möglichkeit, eine Menge Codeduplizierung zu vermeiden. Es ist besonders nützlich für CSS drei Selektoren, die eine Menge von Anbieterpräfixen oder jede Art von Styling erfordern , die Sie auf Ihrer Website wiederholen. Wenn der Code, den Sie duplizieren, nicht zu einem bestimmten Selektor gehört und Sie einen generischen Satz Code erstellen möchten , den Sie erweitern können, kann der Platzhalter in diesen Fällen verwendet werden. 9. Mixins: Ein Mixon ist eine andere Möglichkeit, Code zu organisieren, der immer wieder in Ihrem CSS dupliziert wird. Es ist ähnlich, erweitern hinzuzufügen, aber mit Mix-Ins können Sie verschiedene Eigenschaftswerte durch Übergabe und Argumente angeben. Es ist anders als erweitern, da der gesamte Codeblock aus Ihrem Mixing in den Selektor kopiert wird . Dies kann Ihren Code länger machen. Verwenden Sie es, wenn die Werte der Eigenschaften in der gesamten Website unterschiedlich sind. Wenn sie stattdessen bei extend gleich bleiben, fangen wir gleich mit einem Beispiel an. Ich bin in Texten unterstrichen Mischpunkt-HTML, das drei Dips darin hat. Was ich mit dieser Seite tun möchte, ist jedes div als farbige Box zu stylen. Jede Box wird letztendlich eine andere Größe haben, aber wir werden damit beginnen, sie alle gleich groß zu haben. Jedes dieser Dibs hat einen eindeutigen Klassennamen und etwas Text. Die Datei verlinkt, um dieses CSS zu testen, das tatsächlich in meinem Ordner existiert. Aber keines der vorhandenen CSS wird dieses aktuelle HTM Oh stylen, also sehen wir noch keine Stile auf der Seite Wenn wir also die SAS-Datei betrachten, ist es die gleiche Datei, die wir nach dem letzten Beispiel gefunden haben. Ich möchte eine Basisschriftart auf dem Hauptteil der Datei festlegen, so dass der gesamte Text anstelle dieser Zeiten den Bassfonds verwendet . Römisch. Ich werde den variablen Dollar-Sign-basierten Fonds verwenden , der bereits zu finden ist, werde ich die Arsch-Datei des Tests beobachten So jetzt können wir sehen, dass sich die Schriftart geändert hat. Nun, anstatt mit einem Mix in zu beginnen, werde ich überprüfen, wie wir das mit diesem Ausmaß machen würden. Ich möchte einige Boxen für jedes DIV erstellen. Ich werde den Platzhalter, die Syntax und das Prozentzeichenfeld verwenden und ihm dann Eigenschaften A mit hohem Rand und Padding geben . Dann gebe ich ihm eine Hintergrundfarbe mit der Akzentvariablen. Jetzt kann ich die Box für jeden der Dips verlängern. Ich mache sie alle einzigartig, weil meine Annahme ist, dass jede Box einige einzigartige Eigenschaften haben wird . Wenn sie es nicht tun, würde ich ihnen einfach den gleichen Klassennamen zuweisen. Ich werde es speichern und dann können Sie sehen, wie die Kisten Gestalt annehmen. Nun, wenn wir uns das CSS ansehen, können Sie jede Klasse in einer Liste mit allen Box-Eigenschaften sehen Abdic betäubt, schafft schönen, prägnanten Code. Versuchen wir es stattdessen mit dem Nixon. Die Syntax dafür ist also Akt Mischen. Und dann geben Sie die Mischung im Namen, so werde ich bei Mischbox für jede Box sagen. Ich muss es ändern, um bei Include-Box zu sagen, wenn ich sage, dass sich nichts geändert hat, wie wir es erwarten würden. Wenn wir uns das CSS ansehen, jedoch sieht es jedochanders aus. Jede Klasse hat alle Eigenschaften aus dem Feld hinzugefügt. Es gibt eine Menge Duplikation. Der Grund, warum ich Ihnen das zeige, ist, weil das ein Fehler ist. Ich habe viel gemacht, als ich anfing, Sass zu benutzen. Ich lernte Nixons erste kennen, und deshalb habe ich sie überall benutzt. Ich hatte Code dupliziert. Aber die Verwendung einer Mischung hält Ihr endgültiges CSS nicht kleiner. Verwendung von at extend funktioniert in vielen Fällen besser, aber bei Mixon ist sehr nützlich für jene Zeiten, in denen Sie die Möglichkeit haben möchten, die Werte Ihrer Eigenschaften zu ändern . Also in diesem Beispiel möchte ich mischen, dass es verschiedene Boxgrößen erlaubt, also füge ich Parameter oder Argumente hinzu, wie sie offiziell genannt werden , und SAS für die Breite und die Höhe hinzu, die Sie tun, indem Sie Klammern nach dem Namen und indem ich die Argumente hinein setze, werde ich Breite und Höhe mit einem Dollarzeichen vor dem Wort hinzufügen, um anzuzeigen, dass dies Argumente sind . Jedes Argument, das Sie hinzufügen, wird durch ein Komma getrennt. Jetzt muss ich diese Argumente in meinem Mixon verwenden, damit die Breite sein wird, was von wo aus das Mixen aufgerufen wird. Normalerweise gebe ich meinen Argumenten gerne einen Standardwert. Auf diese Weise, wenn der Code, der den Mixon aufruft, keinen Wert übergibt, wird der Mixon weiterhin funktionieren. Um dies zu tun, geben Sie nach dem Argumentnamen einen Doppelpunkt ein, und geben Sie dann den Standardwert. In diesem Fall werde ich ah, 100 Pixel verwenden . Also wieder speichere ich und schaue mir die Seite an, und seitdem hat sich nichts geändert. Die Breite und Höhe sind immer noch 100 Pixel jetzt. Dieses Mal werde ich Box eins ändern, um eine Breite von 50 Pixel und eine Höhe von 200 zu haben. Wenn ich sage, dass Sie die Veränderung sehen können. Jetzt kann ich auchdas Feld ändern auch und einfach einen Parameter übergeben, der dem ersten Argument zugewiesen wird. Der Witz. Argumente sind also optional, wenn ich Standardwerte gebe, können wir Argumente für alles in der Mischung erstellen, das einen Wert hat, den wir den Rand Padding oder die Hintergrundfarbe machen könnten . Wenn Sie eine Praxis etwas mehr wollen, möchten Sie vielleicht versuchen, hier einige weitere Argumente zu machen, so dass Sie Mix erstellen können, da ohne Argumente und sass. Aber wenn Sie sich selbst dies tun, stoppen und überlegen, ob hinzufügen. Extend ist das, was Sie wirklich verwenden wollten. Wenn Sie die Werte nicht ändern müssen, versuchen Sie stattdessen zu erweitern. Wenn Sie die Werte ändern müssen, dann möchten Sie sie mischen. Schauen wir uns jetzt unser Projekt an und sehen, ob wir eine Mischung für die abgerundeten Ecken in dieser Seite erstellen können . Ich habe viele abgerundete Ecken, aber der Grenzradius hat einen anderen Wert für viele von ihnen. Das macht uns zu einem perfekten Kandidaten für einen Mixon. Ich sollte erwähnen, dass es bei der Erstellung dieses Entwurfs wichtiger war, alle Anbieterpräfixe für den Grenzradius zu verwenden. Aber das ist nicht mehr der Fall. Alle gängigen Browser verwenden heute den Grenzradius. Das einzige, was Sie sich Sorgen machen möchten, ist frühe IE Browser wie i e acht. Ich benutze CSS drei Kuchen, das ist diese Tortenpunkt-HTC-Datei. Wenn ich diese Tortendatei habe, damit Border Radius funktioniert, muss ich nur diese Verhaltensanweisung hinzufügen. Also brauchen wir heute wirklich nur zwei Codezeilen für abgerundete Ecken. Aber ich werde dieses Beispiel verlassen, wie es vorerst ist. Wenn ich eine Mischung verwende, um meine abgerundeten Ecken zu definieren und die Kälte sich im Laufe der Zeit wie beim Randradius ändert , ist es sehr einfach, sie an nur einer Stelle zu modifizieren. Ich werde diese fünf Codezeilen kopieren und eine Mischung mit ihnen erstellen. Ich gehe nach oben, wo ich meinen Platzhalter für Übergang und Variablen erstelle, weil ich sie gerne zusammenhalte, um die Mischung zu erstellen. Ich tippe beim Mischen und dann den Namen , den ich gerundet nennen werde, dann Klammern für die Argumente und ich werde die fünf Zeilen einfügen. Ich werde nur ein Argument hinzufügen, weil ich alle Radiuswerte gleich halte. Ich werde es auf sieben Pixel voreingestellt, weil das der Wert ist, den ich bereits an mehreren Stellen verwendet habe . es könnte alles sein Aberes könnte alles sein. , Überall,wo ich diesen Wert benutze. Ich muss die sieben Pixel auf Dollar-Seitenradius überall ändern. Ich verwende Grenzradius mit nur einem Wert. Ich werde diesen Mixon einschließen, um die fünf Codezeilen auf dieser 1. 1 zu ersetzen, ich muss keinen Wert übergeben, weil ich sieben Pixel sein wollte, was der Standard ist, und auch dieser nächste. Jetzt muss ich für diesen Radius übergeben, der 10 Pixel ist, die ich hier nicht gerundet verwenden kann, weil dies ein Tab ist und Sie die Kurzschrift-Version von Randradius nicht verwenden können . Stattdessen könnte ich einen Tab-Mix erstellen und später, wenn ich wollte, und dann gehe ich durch und ändere den Rest. Jetzt werde ich es speichern, und ich muss sicherstellen, dass ich die Style-Datei beobachte und dann sollte ich die Website scannen und sicherstellen, dass alle Ecken noch abgerundet sind. Ich denke, alles sieht gut aus. Schauen wir uns das generierte CSS an. Wenn ich nach Grenzradius suche, werde ich den Mix und die Definition nicht finden, aber ich werde es an allen Orten sehen, wo er um eine Ecke brauchte. Nun, hier ist der nette Teil. Wenn ich mein CSS verbessern möchte, weil ich diese Donnerpräfixe nicht brauche. Aiken ändern Sie einfach den Mix in, und der Code wird überall geändert, wo das Mischen enthalten ist. Nachdem ich das CSS gespeichert und nochmals angeschaut habe, können Sie sehen, dass hier nur zwei Codezeilen verwendet werden, und das wurde überall geändert, wo ich den Mixon verwendet habe. Es wurde nicht auf den Tabs geändert, weil ich den Mix dort nicht benutzt habe, aber überall sonst hat es sich geändert. Wenn Sie eine Mischung für die Registerkarten erstellen möchten, haben Sie ein paar Optionen. Eine Sache, die Sie tun können, ist die abgerundete Mischung im Schlepptau zu ändern , vier Argumente zu haben eines für jede der Ecken, und dann können Sie den Radius jeder Ecke angeben. Ich liebe diese Methode jedoch nicht wirklich, jedoch nicht wirklich, denn dann müssen Sie alle vier Ecken jedes Mal angeben, wenn Sie den Mixon aufrufen. Wenn Sie nicht die Standardwerte verwenden, würde ich wahrscheinlich einen zweiten Mixon für die Registerkarten erstellen. Und da Tabs die ersten 2 Ecken benötigen, um gleich zu sein und die zweite Null zu sein, würde ich immer noch nur ein Argument brauchen. Der einzige Unterschied ist die Art und Weise, wie ich Grenzradius auf dieser Seite nennen würde, Es gibt nur einen Ort mit Taxis, also brauche ich diese Mischung wirklich nicht. Wenn Sie jedoch auf der Website mit verschiedenen Registerkarten arbeiten, können Sie sie für sich selbst erstellen. Eine Sache im Auge zu behalten ist, dass es alle Arten von Mix-Ins gibt, die andere entwickelt haben . Sie können sich sie als Plug Ins vorstellen. Ein tolles Set von Mix-Ins kommt mit Compass , den ich in diesem speziellen Kurs nicht abdecke, aber wahrscheinlich Teil eines zukünftigen Kurses sein wird. Nixon's sind großartig zu verwenden, wenn Sie eine Gruppe von Stilen haben, die immer wieder wiederholt werden, aber mit leichten Abweichungen zwischen ihnen. Wenn Sie Argumente verwenden, um diese Werte zu ändern und sie mit Vorsicht zu entwerfen, können Sie viel weniger Code schreiben. 10. Der Parent: in dieser Lektion werden wir über den Eltern-Selektor sprechen. Der übergeordnete Selektor ist einfach das kaufmännische Und-Zeichen. Überall, wo Sie dieses Symbol in Ihrem Code verwenden, wird es durch verschachtelte Eltern ersetzt. Kurfürsten. Der Eltern-Wähler kann nur verwendet werden, wenn Sie Selektoren verschachteln. Wenn Sie nicht verschachteln, wird es keine Bedeutung haben. Der Eltern-Selektor ermöglicht Ihnen auch Thunfischpseudo-Klassen wie Hover und Fokus. Es könnte überall innerhalb des Selektors verwendet werden. Dies ermöglicht einige interessante Optionen beim Organisieren Ihres Codes. Schauen wir uns einige Beispiele an. Diese 1. 1 zeigt nur einen einfachen Hover mit der Änderung der Textfarbe. Es kompiliert zu zwei Zeilen wie folgt. Der nächste ist ähnlich, zeigt aber, dass Sie es mit Klassen verwenden können, die an Ihren übergeordneten Selektor angehängt sind. So wird dies zu H drei Punkt-Info. Das bedeutet, dass alle H-Dreier mit einer Klasse von Info eine lustige Größe von 1,1 Enden haben. Beachten Sie, dass dies nicht dasselbe ist wie das Verschachteln der Info-Klasse innerhalb Ihres H Three-Selektors . Das würde zwei H drei Space Punkt-Info kompilieren, die für alles innerhalb Ihres H drei -Tags gelten würden, das eine Klasse von Informationen hat, sagen wir, möglicherweise ein Span-Tag oder so etwas. Dieses abschließende Beispiel zeigt, dass Sie den übergeordneten Selektor nicht am Anfang setzen müssen. Hier können Sie die Eltern sehen. Lecter ist hinter einem Klassennamen her. Dieses Muster könnte verwendet werden, wenn Sie die H zwei Tags unterschiedlich formatieren möchten, je nachdem, auf welcher Seite Sie sich befinden. Dies kompiliert dazu. Es könnte ein wenig schwierig sein, Ihr Gehirn zunächst um diese Idee zu wickeln, weil Sie etwas verschachteln, das wirklich nicht in HTML verschachtelt ist. Aber sobald Sie bekommen, wie es funktioniert, kann dieses Muster in bestimmten Situationen nützlich sein. Gehen wir zum Projekt. Ich habe die Dateien geöffnet und die Live-Vorschau läuft. Ich sehe auch schon die SAS-Datei. Während ich mich auf diese Lektion vorbereitete, bemerkte ich, dass es ein Problem gibt und ich möchte es zuerst beheben. Es ist genau hier mit dem Wagen. Das Auto sollte sich neben den Support- und Kontolinks befinden, die nicht darunter liegen. Wir können den Grund dafür sehen, wenn wir uns die SAS-Datei zuerst ansehen, ich style den Kartenlink basierend auf den altersgroben Attributen, aber wenn wir uns den Link auf der Indexseite ansehen, gibt es keine H grobe Gleiche Warenkorb. Ich habe es irgendwann geändert, weil ich nicht auf eine Seite verlinken wollte, die nicht auf der Website existierte . Nun, sicherlich könnte ich dieses Problem ganz vermeiden, indem ich nur eine Klasse zu diesem Anker-Tag hinzufüge. Aber ich möchte es behalten, damit Sie sehen können, wie die Eltern Kurfürsten damit arbeiten werden. Wenn ich den Link zu korrigieren, sagen wir, Warenkorb, können wir sehen, dass die Karte bewegt hat, aber es ist wirklich immer noch muss nach oben. Wenn ich also wieder die SAS-Datei anschaue, können Sie sehen, dass ich absolute Positionierung in diesem Warenkorbbereich habe. Es ist absolut positioniert, um das erste übergeordnete Element, das relativ positioniert ist, was in diesem Fall die Header-Tech ist. So funktioniert die absolute Positionierung. Aber Sie können sehen, dass ich auch einen negativen Rand auf dem Bild innerhalb des Links habe, und das ist es, was es vermasselt. Mir ist auch aufgefallen, dass ich auftretende Gespräche habe. Zusätzlich zu der oberen Position von Null verschiebe ich die Position der Verbindung mit absoluter Positionierung und mit Rändern um und dies macht etwas chaotisches CSS. Das passiert mir, wenn ich versuche, Dinge an Ort und Stelle zu bringen. Aber normalerweise versuche ich, sie später aufzuräumen, und in diesem Fall habe ich es nie getan. Ich werde diese beiden Randlinien auskommentieren und sehen, wo wir sind. Das sieht viel besser aus, aber der Text ist jetzt zu nah am Bild. Ich gebe ihm einen Rand rechts von acht Pixeln, und das wird helfen, ihm etwas Platz zu geben, aber es ist immer noch nicht schön aufgereiht, also verwende ich eine Zeilenhöhe, um es besser zu zentrieren. Das sieht besser aus, aber es ist wirklich nicht perfekt. Meiner Meinung nach gefällt mir nicht, dass die Artikelzeile eine andere Baseline hat als die Support- oder Kontoverknüpfungen . Dieser Bereich sollte vermutlich neu gestaltet werden. Aber da das nicht der Zweck dieser Lektion ist, werde ich sie vorerst verlassen. Jetzt, wo das aufgeräumt ist, können wir anfangen, die Eltern Lachter zu benutzen. Ich fange gleich hier an. Da wir einen Hover-Zustand haben, verschiebe ich ihn nach oben und ersetze das A durch das kaufmännische Und-Zeichen. Ich werde auch diese nicht benötigten Zeilen löschen. Wir können auch diese zwei Zeilen mit der Attributreferenz als auch wir keine Tastenanschläge hier speichern oder unseren Code kürzer machen, aber wir halten es organisiert. gesamte Code, der sich auf diesen Ankertank bezieht, befindet sich an einer Stelle. Sie können es nicht auf dem Bildschirm sehen, aber wir sind innerhalb des Header-Selektors verschachtelt. Das a-Tag ist also innerhalb der Konto-Klasse verschachtelt, die innerhalb des Header-Tags-Selektors verschachtelt ist. Also unser Elternteil in diesem Fall ist Header dieses Konto A. Wenn wir uns das generierte CSS ansehen, können Sie sehen, dass der Eltern-Selektor direkt vor den Klammern Header Punkt Konto A gesetzt wird . Sie können überall sehen, wo ich das kaufmännische Und-Zeichen setze, es hat es durch den Eltern-Selektor ersetzt. Wenn ich noch einmal nach Hover suche, kann ich diesen auch ersetzen. In diesem Beispiel kann ich die U. L L I und einen Selektor durch den übergeordneten Selektor ersetzen , da dies hier das übergeordnete Element ist. Wenn Sie diesen Sass von Grund auf neu schreiben, ist das die Art von Sache, die viele Tastenanschläge spart. Und die meisten Leute, die Code schreiben, lieben es, diese Tastenanschläge zu speichern, einschließlich mir. Jetzt können wir nicht immer sagen, dass die Dinge funktionierten, weil sich nichts auf der Website ändert. Lassen Sie uns versuchen, die Hintergrundfarbe zu ändern, wenn Sie mit dem Mauszeiger auf Weiß zeigen, damit wir tatsächlich sehen können , dass dies jetzt funktioniert. Wenn wir den Mauszeiger zeigen, verschwindet die Schaltfläche, da sie mit der Hintergrundfarbe übereinstimmt. Also das ist, ah, schreckliche Design-Entscheidung, und ich werde stattdessen auf die Akzentfarbe zurückgehen. Ich wollte nur beweisen, dass das, was wir tun, tatsächlich funktioniert. Ich suche wieder nach Hover und merke, dass ich das nicht wirklich machen kann. Es gibt keine Möglichkeit, dass die Eltern Wähler hier arbeiten, weil der Elternteil wirklich ein neues Span Dot Overlay bekommen hat und was wir wollen, dass es kompiliert. Two is dot kannte eine coole und schweben herausragende Overlay. Wir können den Eltern-Selektor nicht in zwei Teile aufteilen, was wir hier tun möchten. Dieser nächste wird jedoch funktionieren, jedoch funktionieren, und wir haben auch ein 80-Tag mit einer aktiven Klasse. Wir können den übergeordneten Selektor hier verwenden. Außerdem können Sie sehen, dass die aktive Klasse einen weißen Hintergrund hat und die Hover-Klasse die Akzentfarbe hat . Lassen Sie uns also beide innerhalb des A-Tags verschieben und den übergeordneten Selektor hier verwenden. Es gibt wahrscheinlich ein paar weitere Bereiche, die einen Eltern-Selektor verwenden können, aber ich hoffe, dass Sie die Idee inzwischen haben. Zusammenfassend ist der Eltern-Selektor eine Abkürzung, so dass Sie den Selektor nicht immer und immer wieder eingeben müssen, wenn Sie Dinge wie Pseudo-Klassen oder reguläre Klassen verwenden möchten . Mein D ist auf dem Eltern-Selektor. Es muss in Verbindung mit Dusty verwendet werden, da der Eltern-Wähler einfach das kaufmännische Und-Zeichen in Ihrem Code durch die Eltern ersetzt , die Sie innerhalb des kaufmännischen Unds verschachtelt sind, kann irgendwo innerhalb Ihres Selektors erscheinen , wenn es funktioniert mit Ihrem Mantel. Ich verwende gerne den Eltern-Selektor mit Pseudoklassen, weil es mir erlaubt, diese alternativen Zustände wie Cover und Fokus direkt in meinen anderen Tags zu halten , und es fühlt sich organisierter an. 11. Importieren: in dieser Lektion werden wir über die Verwendung des beim Import mit Sass beim Import sprechen. Und SAS ist dem regulären CSS beim Import sehr ähnlich, dem Sie Ihr CSS in mehrere Dateien aufteilen können. Der Vorteil der Verwendung von Sass ist jedoch, jedoch, dass es den Import durchführt, wenn Sie den Code in Ihr CSS kompilieren oder generieren und alles in eine Datei mit einem CSS-Import einfügen. Der Browser muss immer noch mehrere HTTP-Anfragen ausführen, die mit einer Leistung It kommt. Es ist ähnlich wie mehrere Links zu mehreren CSS-Dateien in Ihrem HTML, und das ist auch keine gute Idee. Um mehrere Dateien in eine Datei zu kompilieren, müssen Sie Partials verwenden. Ein partieller Dateiname beginnt mit einem Unterstrich. Am Anfang können Sie beim Import ohne Partials verwenden, aber die Verwendung von Partials ist besser, da es Ihnen diese eine CSS-Datei für Ihren Browser geben wird. Die Syntax für den Import ist einfach beim Import und dann der Dateiname in Anführungszeichen. Sie müssen den Unterstrich nicht im Namen anzeigen. Wenn es ein Teil ist, weiß der Compiler, in unserem Projekt sowohl nach Partials als auch regulären Dateien mit diesem Namen zu suchen . Lassen Sie uns die SAS-Datei in mehrere Teile aufteilen, so dass es einfacher ist, Dinge zu finden und verwalten. Zuerst lege ich gerne den gesamten Reset-Code in eine Datei. Auf diese Weise kann ich es leicht in anderen Projekten wiederverwenden. Das einzige Problem, das ich hier habe, ist, dass der Reset-Basiscode wirklich an zwei Stellen ist, weil ich eine Variable hier in der Mitte verwende. Ich kann eine Variable erst verwenden, wenn sie definiert ist. Also habe ich diesen Teil des Codes unter die Variablendefinition verschoben. Also werde ich diese Zeile verschieben, die die Variable auf die tatsächlichen Website-Styles verwendet, was tatsächlich wahrscheinlich ein geeigneter Ort ist. Jetzt werde ich eine neue Datei namens Underscore reset dot s CSS erstellen. Ich ziehe den Reset-Code von oben und ziehe ihn in die Teildatei, und dann ziehe ich diesen zusätzlichen Reset-Code. Das ist unter den Variablendefinitionen und legte es auch dort ein. Ich habe die Akte gerettet. Wir können sehen, dass die neue Datei erkannt wurde, aber es hat noch keine Änderung an der SAS-Datei erkannt, also hat sie das CSS nicht regeneriert. Das wird nicht tun, bis ich die SAS-Hauptdatei gespeichert habe. Also gehe ich zurück zu ihrer Hauptdatei und füge die Importanweisung hinzu. Ich muss den Unterstrich nicht verwenden, und ich muss den Dateityp nicht eingeben. SAS sucht nach allen Dateien, die in CSS s CSS oder sogar SAS das ältere Dateiformat enden. Nun, wenn ich diese Datei speichere, wird der Stil-Punkt C s s regeneriert und überschrieben. Wenn wir uns die CSS-Datei ansehen, sollte sie nicht so viel anders aussehen. Der einzige Unterschied ist die Platzierung dieser Linie. Ich habe mich bewegt, wodurch die Grundfarbe für das body-Tag festgelegt wird. Jetzt können wir unsere website-spezifischen Variablen und Nixons in ihre eigene Datei einfügen. Ich rufe das Set an. Ich importiere diese Datei jetzt und speichere sie. Die Änderung wurde erkannt. Wenn wir uns die Seite ansehen, ist alles noch in Ordnung. Als Nächstes erstelle ich eine Datei für die Stile, die zur gesamten Website gehören und nicht seitenspezifisch sind . Ich werde das nochmal eine Haupt nennen. Es ist eine partielle, also beginnt es mit einem Unterstrich. Ich mag diese Technik, weil es sehr einfach macht, Ihre Variablendefinitionen und Mix-Ins zu finden , wenn Sie das Design ändern möchten. Wenn ich etwas ändern möchte, gehe ich einfach zur Einrichtung und kann die Variablen leicht finden. Wenn ich die Akzentfarbe in Rot ändere, obwohl ich nur die Stil-SAS-Datei beobachte, erkennt sie Änderungen an jeder Datei, die importiert wurde, so dass wir diese Änderung direkt hier sehen können . Und ich werde das rückgängig machen. Da ich jetzt nicht wirklich rot möchte, könnte ich dies weiter machen und für jeden der spezifischen Bereiche der Website importieren, vielleicht einen für die Startseite eine für die Videoseite, die Kategorieliste und so weiter. Und auf einer echten Seite. Es würde wahrscheinlich mehr Seiten geben, die ich wirklich finde, dass Ihr Code in mehreren Dateien so viel einfacher ist, als durch eine wirklich lange Datei scrollen zu müssen. Also mag ich die Importanweisung wirklich. Das letzte, worüber ich sprechen möchte, ist nicht wirklich mit der Importanweisung verwandt, aber da die Verwendung von Import Ihre Website-Ladezeit verbessern kann, indem die Anzahl der HTTP-Anfragen der Wirbelsäule reduziert wird, hat es mit der Leistung zu tun . Es ist eine gute Idee, immer Männer, wenn ich, Ihr CSS und JavaScript auf Ihrer Produktionswebsite, so möchte ich Ihnen einen einfachen Weg zu Männern zeigen, wenn ich Ihr CSS bei der Verwendung von sass. Wenn wir uns das generierte CSS gerade jetzt ansehen, können wir sehen, dass es nicht Männer seine lesbare mit vielen schönen weißen Raum bei der Entwicklung einer Website überprüft. Ich möchte CSS so sehen, für den Fall, dass ich es mir ansehen muss. Aber sobald es für die Produktion bereit ist, sollte es geändert werden, so dass die Datei kleiner ist und schneller in die Browser heruntergeladen wird . Um dies zu tun, müssen Sie einfach eine Option zu Ihrem Watch-Befehl hinzufügen. Ich höre auf zu beobachten und ziehe es den letzten Befehl. Dann füge ich einen Bindestrich hinzu, Strich-Stil komprimiert. Dadurch wird die Ausgabe komprimiert. Es wird den Code nicht regenerieren, bis ich etwas ändere, also füge ich hier einfach eine neue Zeile hinzu. Nun, wenn wir uns das CSS ansehen, ist alles im Einklang mit keinen Leerzeichen. Die Dateigröße wird definitiv kleiner sein, daher haben wir alle Schritte zum Erlernen der Grundlagen von Sass abgeschlossen. Im letzten Video werde ich darüber sprechen, wie Sie weiterhin Ihre SAS-Fähigkeiten verbessern und teilen einige gute Ressource ist 12. Weitere Kurse: Wenn Sie alle fortlaufenden Videos durchlaufen haben, sollten Sie die Grundlagen von SAS mittlerweile verstehen. Die gute Nachricht ist, dass die Kenntnis der Grundlagen von SAS bedeutet, dass Sie die Grundlagen eines jeden CSS-Pre-Prozessors wirklich verstehen . Wenn Sie die Chance haben, an einem Projekt zu arbeiten, sagen wir, Leszcz in der Zukunft, werden Sie kein Problem haben, es aufzunehmen, wahrscheinlich in nur wenigen Minuten. Die Syntax wird etwas anders sein, aber die Konzepte sind alle ähnlich. Ich habe dir in diesem Kurs nicht alles über Sass beigebracht. Mein Ziel war es, Sie mit den nützlichsten Konzepten zum Laufen zu bringen und Sie über jede Angst oder Angst zu bringen, die Sie haben könnten, noch eine andere Sprache oder ein anderes Framework zu lernen . Sobald Sie sich wohl fühlen mit dem, was ich hier gelehrt habe, wenn Sie Ihr Lernen und Ihre Fähigkeiten ein wenig weiter bringen möchten, können Sie das Konzept der Verwendung von Mathematik und Funktionen untersuchen, und SAS SAS kommt mit einer Reihe von integrierten Funktionen, die Sie kann in Ihrem Code verwendet werden. Viele von ihnen können für die Arbeit mit Farbe verwendet werden, z. B. aufhellen oder verdunkeln. Sie könnten in einer Mischung für Zutat verwendet werden. Zum Beispiel gibt es auch Funktionen, die Ihnen helfen können, responsive Websites mithilfe von Mathematik zu erstellen. Es ist auch möglich, eigene Funktionen zu erstellen. Ich empfehle auch, die vollständige SAS-Dokumentation zu lesen. Das finden Sie auch auf der SAS-Website. Wenn Sie einige Ideen zur Integration von SAS in Ihren Workflow wünschen, empfehle ich Ihnen, dieses Video von Nathan Henderson auf Sass and Compass anzuschauen. Es ist nur 16 Minuten, und es ist eine gute Überprüfung der hier gelehrten Konzepte, mit einigen zusätzlichen Ideen vorgestellt. Ich habe alles in diesem Kurs auf altmodische Weise mit der Befehlszeile gemacht. Ich glaube, es ist gut, neue Werkzeuge im grundlegendsten Format zu lernen, damit Sie wirklich verstehen, was los ist. Aber sobald Sie diese Grundlage haben, denke ich, dass es gut ist, einige der Werkzeuge zu verwenden, die die Dinge einfacher machen. Hier sind einige Tools, die Sie vielleicht erkunden möchten Scout, die Sie hier Code-Kit beschränkt haben, das für Max on Lee ist. Aber es ist nützlich für viel mehr als nur SAS und Pre-Press, ein neues Open-Source-Projekt, das unter Windows funktioniert und es sollte ähnlich wie Code Kit . Sie werden sicherstellen möchten, dass Ihr Texteditor die Punkt-CSS-Dateierweiterung Klammern behandeln kann weiß, dass dot s CSS wird die CSS in der Steuer zum größten Teil verwenden, und es behandelt es. Okay, aber viele Texteditoren können damit noch besser umgehen. Und Sie haben Plug Ins oder Erweiterungen eingeschränkt, um besseren Code, Vervollständigung und mehr zu erhalten . Führen Sie einige Untersuchungen durch, um sicherzustellen, dass Ihr Editor Ihrer Wahl auf die bestmögliche Weise für sass eingerichtet ist . Es wird wahrscheinlich nicht korrekt bei einer Neuinstallation eingerichtet, aber es lohnt sich die Zeit, um sicherzustellen, dass Ihr Editor Ihnen hilft, effizient zu codieren. Ich habe Compass schon ein paar Mal im Vorbeigehen erwähnt. Compass ist ein CSS-Authoring-Framework, das sass verwendet. Es kommt mit vielen eingebauten Mix-Ins für CSS drei Eigenschaften, Typografie und vieles mehr. Sie müssen diese also nicht selbst von Grund auf neu bauen. Es verfügt auch über Werkzeuge zum Erstellen von Image-Sprites und zum Erstellen des richtigen CSS für sie. Es gibt viel zu lernen mit Kompass, und ich könnte versuchen, in Zukunft einen Kurs damit zu machen. Wenn ich Zeit habe, ist es sehr nützlich, und wenn Sie Ihre SAS-Fähigkeiten auf die nächste Stufe bringen wollen. Ich empfehle, Kompass zu erkunden. Ich habe diese Klasse beigebracht, indem ich ein bestehendes Projekt von regulärem CSS in Sass konvertiert habe. Ich mag diesen Ansatz für das Lernen sass, weil Sie die Sasko vergleichen können, um uns zu sehen, und Sie können die Umwandlung und kleine Schritte tun. Ich empfehle, dass Sie versuchen, eine Ihrer Websites in die Verwendung von Sass zu konvertieren, um sicherzustellen, dass Sie alle Konzepte verstehen. Dies spart Ihnen am Anfang keine Zeit, aber wenn Sie die Website später ändern möchten, werden Sie eine großartige Grundlage für schnelle Änderungen haben. Wenn Sie ass auf der nächsten Website verwenden, die Sie entwickeln, können Sie Ihren Code schneller schreiben und es wird viel einfacher zu pflegen sein. Denken Sie daran, Sie können auswählen und wählen, welche Teile von Sass Sie verwenden möchten. Reguläre CSS ist gültiger SAS-Code, also verwenden Sie die Teile, die Sie mögen , und mit der Zeit können Sie mehr Ideen für das Erstellen von Websites schneller lernen und integrieren. Danke, dass Sie sich diesen Kurs angesehen haben. Ich hoffe, es hat Ihnen geholfen, eine weitere der vielen Fähigkeiten, die für die Web-Entwicklung benötigt werden . Ich glaube, diese paar Stunden haben das Lernen verloren. Eine neue Fertigkeit wie Sass wird sehr schnell zurückgewonnen werden, weil Sie sich in der Zukunft viel schneller entwickeln können . Ich hoffe, Sie haben den Kurs genossen. Wenn Sie irgendwelche Fragen haben, fragen Sie bitte und ich werde versuchen, zu helfen.