Erste Schritte mit SASS und ein besserer CSS-Workflow | Rob Sutcliffe | Skillshare

Playback-Geschwindigkeit


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

Erste Schritte mit SASS und ein besserer CSS-Workflow

teacher avatar Rob Sutcliffe, UI Designer / Developer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
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 jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

26 Einheiten (1 Std. 54 Min.)
    • 1. Einführung

      0:58
    • 2. SASS beherrscht

      5:48
    • 3. Richte deine Umgebung ein

      2:42
    • 4. SASS oder SCSS

      3:56
    • 5. Nesting

      3:49
    • 6. Verachtung von Eigenschaften

      1:44
    • 7. Refrencing

      4:16
    • 8. Kommentare

      2:13
    • 9. Variabel

      3:45
    • 10. Datentypen

      9:22
    • 11. Operationen

      3:17
    • 12. Benutzerdefinierte Funcitons

      6:45
    • 13. Builtin

      2:02
    • 14. Wo du noch mehr Funktionen findest

      0:37
    • 15. Mixins

      6:09
    • 16. Include

      3:17
    • 17. Erweitern

      4:40
    • 18. Was ist Kompass

      5:39
    • 19. Compass

      2:42
    • 20. Compass Beispiel

      1:11
    • 21. Compass Beispiel

      2:51
    • 22. Wo du weitere Compass findest

      0:29
    • 23. Listen

      7:58
    • 24. Loops

      16:05
    • 25. Wenn du sonst noch einmal

      11:39
    • 26. Glückwunsch

      0:30
  • --
  • 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.

2.320

Teilnehmer:innen

2

Projekte

Über diesen Kurs

Das Schreiben von CSS ist lang, pauschal und dauert die Zeit, um das Debüt zu haben. Alle anderen Programmiersprachen vor einem Jahrzehnt verwirklicht die Lektion – CSS kann auch nicht die Möglichkeit haben, ihn zu verbessern, bis die Browser uns vertauscht ist. SASS gibt uns diese Kraft, wir können auf dem Aufbauen aufbauen, ohne die Art und Weise zu ändern deine Arbeit aufbauen mussten.

In zwei Stunden wirst du mindestens zwei Stunden pro Woche mit dem Schreiben SASS

Triff deine:n Kursleiter:in

Teacher Profile Image

Rob Sutcliffe

UI Designer / Developer

Kursleiter:in

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: Am Anfang war das CSS, und man muss es eine Zeile nach dem anderen ausschreiben, als ob Computer nie erfunden worden wären. Wenn Sie Korrekturen vornehmen möchten, war es so, als ob Sie jede Seite mit White out rechts im Ersatz durchgehen müssen, als ob Computer nicht erfunden worden wären. Mein Name ist Rob, und ich hatte Angst, der Evolution beizutreten. Ich dachte, wenn ich Sass lernen würde, müsste ich die Befehlszeile lernen. Und ich dachte, ich würde hässlichen Code einfügen, wie Sie es früher in Dreamweaver waren, wenn Sie den Wiz E Week Editor verwenden . Phantasievoll lag ich falsch. Und in den nächsten zwei Stunden werde ich Ihnen zeigen, warum ich Ihnen zeigen werde, wie Sie einfachere Stylesheets schreiben können. Sie werden sauber und schlank sein. Sie sind auf dem neuesten Stand und auf dem neuesten Stand 9. Variabel: Also habe ich Ihnen Variablen direkt am Anfang des Intro gezeigt, wenn ich weiß, dass Sie offensichtlich sterben, um sie zu bekommen und ein Spiel mit ihnen zu haben, weil es Ihnen so viel, so viel Kontrolle gibt . Also lassen Sie uns einfach eine Variable hier oben erstellen. Wir werden die Variablen erstellen, die Oberseite des Dokuments, und dann können wir sie woanders verwenden. Also hier habe ich Schriftfamilie. Helvetica. Nun, wie wäre es, wenn wir einfach Spaß hatten, und dann irgendwo, der denselben Fonds verwendet, und Sie einfach in diesem Schriftstapel hier auftauchen und es wird das Ganze sagen, um sicherzustellen, dass, wenn jemand keine Gesundheit hat, die auf seinem Computer ist, Es sind die vier zurück nach Ariel und sollten sie wissen, sogar haben, dass es jedem Sensor komisch entspricht. Nun, das wird dem Anhaken offensichtlich eine Hölle geben, die es kann. Weißt du, eigentlich, ich mag es, dass alles in meiner Abteilung dieselbe Front-Familie hat. Also lasst uns einfach die menschliche Dissektion auch runterwerfen. Offensichtlich könnte ich es einfach in die Leiche stecken, aber nehmen wir an, wir werden andere Mittel woanders im Dokument verwenden. Also gerade jetzt ist es nur Hass Juan und Abschnitt und ich lade es neu. Und jetzt ist es offensichtlich geladen. Schriftfamilie hielt das Kanu in all das. Nun, offensichtlich, ein großer Vorteil ist, dass ich das einfach an einem Ort ändern könnte, wenn ich es ändern müsste. Und vorausgesetzt, dies wird als Projekt wachsen, kann ich dies als eine externe Datei mit vielen verschiedenen CSS-Dateien haben, die davon laufen. Also, wenn die gesamte Marke ihre Schrift etwas geändert hat, dann können wir sie einfach an einem Ort ändern und alle Stylesheets würden das Gleiche ablaufen . Also hier benutze ich einige ziemlich schreckliche Farben, weil Aiken, ich habe einige vielleicht etwas schönere Dinge nicht ausgearbeitet. Vielleicht wäre es besser gewesen, wenn wir für 33377 weg wären, so etwas wäre vielleicht ein bisschen schöner. Aber anstatt das auszuarbeiten, setze ich einfach das Wort Blau ein. Nur grundlegende CSS Sachen. Lassen Sie uns ein paar verschiedene Farben auswählen. Stattdessen nehmen wir an, wir werden eine schöne grüne Farbe haben und die grüne Farbe wird sein . Sie wollten das benutzen und dann später, wo es grün ist, setzen wir einfach das eigentliche, es steht Grave. Lasst uns das einfach grün machen. Okay, also werden wir auch eine schöne gelbe Farbe haben. Dieser Hintergrund. Könnte es vielleicht ein bisschen sein? Nein, Sir. Also lasst uns mit etwas Schöneres gehen, das dieses hier hat. Und dann hier unten setzen wir gelb. Ich werde hier einfach variabel sein. Also die Variable, die Sie erkennen können, weil sie am Anfang ein Dollarzeichen hat und dann lassen Sie uns das Rot auch ersetzen, braucht nur ein Pfundzeichen an der Vorderseite. Okay, und dann drehen wir das hier, wo es rot steht, machen wir auch diese Variable. Also hat es gerade ein Dollarzeichen vor, so dass Sie jetzt sehen können, wie ähnlich es sagt für einen mit einem Dollarzeichen. Es steht jetzt rot mit einem Dollarzeichen. Und das ist es nur als Variable zu vervollständigen. So dass bekannt jetzt weiß zu gehen, schauen Sie an der Spitze des Dokuments und sehen, was die Farbe von Rot für sicher ist. Das und ich aktualisiere das. Sie können sehen, dass wir Augen haben etwas andere Farben in jetzt, 11. Operationen: Das nächste, was wir uns ansehen müssen, ist, was können wir mit diesen Zahlen machen? Wie können wir das? Wie können wir sie ändern? Der ganze Zweck, Funktionen zu haben, ist, dass wir einige grundlegende Mathematik oder einige komplizierte Mathematik mit unseren Zahlen machen können. Also hier haben wir eine Variable, und im Moment ist es eine Zeichenfolge drauf, die Zahlenoperationen sagt. Aber ich werde das in diesem Video ändern. Wir werden uns das CSS hier ansehen. Das ist also ein CSS. Das ist Ausgabe, und das ist der SAS, der eingeht. Also lasst uns das eine Sekunde loswerden. Und lassen Sie uns versuchen, eins mit eins hinzuzufügen. Und wie Sie sehen, ist das aktualisiert und es ist auch. Offensichtlich hätten wir das tun können. Wenn wir 10 plus eins hätten, wird es 11 sein. Wenn wir 10 minus eins hätten, wäre es offensichtlich neun. Es ist eine Fünf pro Sekunde. Wenn ich dieses Astra-Symbol benutze, wird es mal. Das sind also 50. Und wenn ich den Ford Slash benutze, wird er ihn teilen, OK, OK, aber es gibt ein bisschen mehr als das, denn was ist, wenn wir es mit Pixeln zu tun haben. Wenn ich hier drüben Pixel schreibe, gibt es mir einen Fehler. Sie sehen, was passiert ist, dass SAS die Bezeichnung abnimmt. Das Argument auf der linken Seite der Gleichung war die Bezeichnung für die gesamte Gleichung. Also, wenn, zum Beispiel, wenn ich P x auf die 10 hatte und dann speichern Sie es wieder zeigt sich hier ist eine zwei. Wenn ich das P X von den fünf abnehme und es wieder speichern, immer noch die Klappe, um jetzt ist es die PX bekommen. Was wir wollen, ist, dass das Element auf der linken Seite die Art der Bezeichnung oder Zeichenfolge ist, die wir verwenden möchten. Also, zum Beispiel, wenn ich hier eine Zeichenfolge schreibe und dann, ähm, plus es auf fünf geht, füge fünf als String leichter hinzu. Nun, wenn Sie raus, die schnellen Bits von Mathematik, über die wir wissen sollten, ist was, wenn wir fünf durch drei teilen, was passiert dann? Nun, wir bekommen 1.66667 Wir wollen vielleicht nicht, dass diese riesige Zahl da drin ist. Das wird vielleicht ziemlich kompliziert sein. Vielleicht wollen wir es auf- oder runter bringen. Es gibt also eine eingebaute Funktion namens round. Wir werden in einigen dieser Funktionen verwendet werden. Eine ganze Menge von unserem SAS-Workflow. Also gewöhnen wir uns an sie. Wenn du keine Runde zum nächsten willst, kommst du runter zum, kannst du bis zur Decke aufrunden und das wird dir zwei geben oder du kommst runter auf den Boden, was dich auf die nächste Nummer runter rundet, die mir gibt eine Eins. Alternativ das andere, was sehr nützlich ist, vielleicht möchten Sie es als Prozentsatz zurückgeben, und das wird mir 166% geben, weil fünf 166% auf drei sind. 15. Mixins: Okay, jetzt werden wir über Mix-Ins reden. Mix-Ins sind ein wenig wie Variablen, aber Sie könnten etwas mawr einschließen. Etwas mehr verschiedene Eigenschaften im Inneren. Es ist wie die Wiederverwendung eines Blocks dieses Codes, als wäre es eine Variable. Also schauen wir uns diese Seite hier an. Ich habe zwei Arten von Überschriften und ich habe den Haupttext auf dem Linktext. Nun, wirklich, die Überschriften haben wirklich die gleiche Front. Also hier oben habe ich eine Frontfamilie, die Helvetica ist, und es sind alle San Serif-Schriftarten. Und ich habe noch einen, der ein Mono-Spaced-Fonds ist. Jetzt denke ich, Überschrift sollte auch die Helvetica neu sein, und es sollte einige der gleichen Funktionen wie die aus dem Haupt H ein Fonds haben. Also, eigentlich weißt du eigentlichwas? Lassen Sie uns diesen ganzen Codeblock hier kopieren und oben bei den Variablen bleiben und lassen Sie uns das alles in ein paar Klammern verschachteln und wir werden dieses Mischen nennen und wir werden das at Zeichen am Anfang verwenden und dann genau richtig mischen. Ich bin auf dem Weg zu Fuß Fun ist genau das, was ich diese Mischung nenne. Es ist sehr ähnlich wie diese Variablen unterschiedliche Namen haben, wenn wir unsere Variablen oder unsere Mix-Ins benennen , solange wir keine Sonderzeichen mehr als Bindestriche und Unterstriche Andi haben . Im Idealfall Sie sie nicht mit Zahlen beginnen. Nur Best Practice und mit einigen Programmiersprachen wird es nicht funktionieren. Solange wir uns an diese Regeln halten, können wir sie so nennen, wie wir wollen. Also, dann hier unten in Hetch eins, werde ich einfach schreiben. Fügen Sie ein, und ich werde den Kopf Fuß schreiben. Und wenn ich das sage, sollte das gut funktionieren. Ich aktualisiere dies wird sehen, dass dies nicht alles geändert hat. Das ist immer noch all dieses Styling, das ich von der H ein Tack getrennt habe. Also wollen wir auch, Spaß in unseren Hass zu bringen, ist was? Also, jetzt haben wir die gleiche Art von Styling, aber es ist ein wenig widersprüchlich, denn tatsächlich, der Hass im Hass, beide haben fast das, wo sie genau die gleichen Stile haben , also vielleicht hassen sie es sollte ein wenig kleiner sein. Also, was wir hier tun können, ist genau wie mit den Funktionen, wie mit Aufhellen und Verdunkeln, die ich jetzt bezahlt habe, genau wie, wie wir in diesen beiden Argumenten bestanden und wir sagten: Welche Farbe? Auf welchem Prozent? Wir wollten es passieren. Wir können argumentieren, in die Richtung vorne zu gehen. Also lassen Sie uns die Frontgröße von hier aus nehmen und übergeben, dass in ein Argument ist. Also, jetzt heißt es: Überschrift vorne und dann in Klammern einschließen. Dann wird es zu E n sagen, aber wenn es eine Überschrift zu Größe ist, wird es sagen, 1,6 meiner mag das nicht. Okay, jetzt kommen wir einfach hierher, wo es steht, nach vorne zu gehen, und wir werden das bei dieser Variablen hier drinnen tun. Also, das hier geht vorbei. Ein Argument, das vorne geht, geht um 2 Uhr morgens vorbei. Und hier übergibt es ein weiteres Argument, das Front 1.6 übergeht . Dies wird also zu einer variablen Dure werden, die den Umfang dieser Mischung einnimmt. Wenn ich diese Schriftgröße hier oben aufrufe, wird dies einer Variablen ähnlich, aber einer Variablen, die wir nur innerhalb des Mixings verwenden können. Und dann hier unten, sage ich die Schriftgröße. Dann, als ich diese Seite aktualisiert habe, wird das neu geladen. Wurde vorne Größe zwei AM auf diesem eine Schriftgröße von 1,6 Jahren. Der Grund dafür ist, dass dies eine neue Variable innerhalb der Mischung erzeugt, die nur so lange überlebt, wie diese Mischung überlebt. Und ich habe es hier für die Größe benutzt, und ich habe es übergeben. Wenn ich erstellt habe, wenn ich eingeschlossen habe, dass es macht, hoffe ich, dass alles Sinn macht. Wenn nicht, dann schreiben Sie mir bitte in den Kommentaren. Nehmen wir also an, dass wir viele Überschriften haben, die tatsächlich 1,6 sind, vielleicht einige unserer verschiedenen Überschriften in einem 1.6. Also vielleicht sollten wir einen vollständigen Rücken erstellen und einfach sagen, Wenn wir dort keinen Wert übergeben haben, irgendeinen Wert, lass es uns 1,6 e m machen und dann können wir das einfach von hier entfernen. Ich will This is Stone ist dies sagt, wenn kein Wert übergeben wird, wenn der Include gemacht wird, geben Sie einfach die Schriftgröße den Wert von 1,6 cm an. Also, wenn ich um 2 Uhr morgens herausnehme. Von hier geht es davon aus, dass ich die Überschrift eins 1,6 C haben möchte, und wenn ich hier noch einen anderen Wert einfüge, wird es diese 1.6 überschreiben. Okay, also gab es eine Mischung. Ich hoffe, Sie haben viel Spaß, einige davon zu kreieren. 16. Include: Nun, wenn wir anfangen, zu viele dieser Mix-Ins hinzuzufügen, werden wir einen sehr, sehr beschäftigten Stil bekommen . Blätter an der Spitze haben alle diese darin. Und auch, wir könnten ein Stylesheet irgendwo anders haben, wo wir die gleichen runden Ecken auf der gleichen Überschriftenschriftart haben wollen . Also wollen wir uns nicht wiederholen. Wir wollen, dass alles kompakt ist und es ist am einfachsten möglich. Also lassen Sie uns diese aus kopieren und erstellen Sie eine neue Datei unter unserem S S s Ordner kalt mischen Speicher F CSS. Und hier drinnen werden wir einfach alle unsere Mix-Ins in einer Liste setzen. Nun, das ist großartig. Aber offensichtlich dieser Stern, den sie braucht Teoh Import all diese Mischung und immer noch Also an dem Ort, wo wir die Mix-Ins haben werde ich nur Import schreiben, und dann werde ich Mixing Star S, C. S s und Semikolon am Ende. Und dies wird jetzt alle diese Mix-Ins importieren, damit sie in dieser Seite verwendet werden können, sieht nicht , dass keinen Unterschied gemacht hat. Und wenn wir uns unser Stylesheet ansehen, bringt es immer noch all diese Regeln ein, ohne zusätzlichen Code zu erstellen, um diese Mix-Ins zu haben . Aber wenn wir jetzt auf unseren CSS-Ordner zurückblicken, sind es tatsächlich offensichtlich alle F-CSS-Dateien kompiliert. Also haben wir jetzt einen Mix in Geschäften genannt. Ja, wenn ein Punkt-CSS, das leer ist, weil es keine Ausgabe gibt, ist es nur Mix-Ins, dass dieser Rückgabecode zurück, aber wir können dies umgehen, wenn wir nur hinzufügen. Ich schließe gerade diese Mischung seit Filz. Wenn ich gerade auf den Start unterstrichen habe, dann ist es diese Filzdateien entfernt. Aber das ist immer noch gut in hier importiert. Wenn ich die gefundenen Seitenschritte aktualisiere, wird die Datei immer noch importiert, obwohl sie vorne einen Unterstrich haben sollte. Dieser Importmann ignoriert es nur, aber wenn er kompiliert wird, nimmt er an, dass die Datei nicht existiert oder wir nicht erstellen möchten. Es ist eine CSS-Datei, so dass wir dies wieder tun können. Wir könnten welche erschaffen. Wir könnten hier oben weitere Importe erstellen, es Variablen nennen und eine neue Datei mit Unterschulvariablen erstellen. CSS. Und wir könnten diese Variablen einfach von hier auf dieser Seite kopieren, sollte immer noch absolut gut geladen werden. Es bringt immer noch diese Variablen ein. Es bringt immer noch diese Mix-Ins, aber es kompiliert sie nicht. Und es hält dieses Raumschiff sehr, sehr einfach, sehr sauber. Und es ermöglicht uns, die gleichen Stylesheets wiederzuverwenden, die gleichen Variablen s CSS und mischen und pikant assis in allen anderen Dateien im gesamten Projekt. 17. Erweitern: Okay, ich habe eine ganz neue Regel hier namens Link auf die Einige neue Stile dort für Link es hat zieht in dieser Luft abgerundete Ecken mischen sich ein, um ihm zu geben, hat diese Ecke etwas Polsterung und etwas Marge. Es hat Farbe und es hat etwas Spaß, ein und im Hintergrund. Ich habe ein paar andere Links hier oben, die eigentlich keine Klasse haben. Wenn wir in Index schauen, können wir sehen, dass diese keine Klasse haben, aber ich wollte immer noch genau diesen gleichen Stil haben. Lassen Sie uns also einige erweitern diese Link-Klasse in die A. Lassen Sie mich Ihnen zeigen, was ich meine. Also hier haben wir Artikel A, also wird es nur irgendwelche Links innerhalb eines Artikels auswählen, und ich werde Extend schreiben und dann genau richtig, Doc Link. Also, was das tut, ist, dass dies alle vorhandenen Klassen in Verbindung bringen wird. Also, wenn ich das sage und ich das aktualisiere, sehen wir jetzt, dass diese Links genau das gleiche Styling haben. Ist das gerade ausgedehnt? Dass ich besonders interessant war, ist, wenn ich jetzt in meinem CSS-Stil schaue. Sie werden sehen, dass es hier in Abschnitt Link geschrieben ist, was die ursprüngliche Regel war. Das geht darum und dann Abschnitt A, was die Regel ist. Lassen Sie uns dies sein Styling haben, und dann ist es alle die gleichen Stile an den gleichen Ort gesetzt. Und wenn ich auch waas, hatte ich eine andere Farbe. Vielleicht sage ich „Farbe grün“. Dann ist es weiter und es ist diese zusätzliche alle unten hinzugefügt, die nur die Farbe ändert. Aber all das hat immer noch zusammengehalten. Nun, warum das für uns interessant ist, werden Sie feststellen, wenn Sie auf das S CSS Blatt zurückblicken . Ist das, wo wir verwendet haben, gehören, und wir haben eine Mischung in. Es wird tatsächlich jedes Mal den gleichen Code neu erstellt. Also hier, obwohl der Grenzradius, den wir genau denselben Grenzradius haben wollten, ist er voran und fügte diesen Chunkin wieder hinzu, wo ist hier? Es ist nur üblich, es getrennt und legte den Code dort ein Mal ein. Das ist also ein wenig effizienter, wenn man sie zweimal ausdruckt. Nein, Anbetracht dieser Mischung, und tatsächlich dauert es einige Argumente in der Schriftgröße. Dann ist das immer noch eine gültige Mischung. Aber dieser hier tut dem eigentlich keinen Gefallen. Also, wenn wir das aus der Mischung nehmen und auf Seite auf, wir werfen es zurück auf diese Seite, ich werde wissen, machen Ecken nur einige normale Erfolgsregeln wie Ecken wären ein Objekt. Aber anstatt einen Arzt davor zu stellen oder ein Hash-Tag, als wäre es eine Klasse auf I D, werde ich ein Prozentzeichen setzen. Was das bedeutet, ist, dass meine CSS-Datei nicht läuft. Teoh macht gerade ein paar Fehler, weil es versucht. Teoh versucht, dies hier zu lesen, also wenn ich das einfach ausdehne, also verlängere ich und ich habe das vorgestellte Zeichen auf ihnen geschrieben Ecken, so dass sollte das gut und dann ein hier verlängern, es heißt, gehören Ecken, die ich schreiben werde, Ecken zu verlängern. Also, wenn ich jetzt in dieser Form schaue, wirst du sehen, dass es eine Waffe gibt, die gut ist. Jetzt werden Sie sehen, dass es tatsächlich alle drei von ihnen herausgezogen und sagte, dass diese alle einen Grenzradius von fünf Pixeln haben . Anstatt die gleichen drei Zeilen an drei verschiedenen Stellen im gesamten Blatt zu platzieren , sie nur an einer Stelle hinzugefügt, also konnten wir dies erneut tun, um einen Rand aufzufüllen, der hier das gleiche hatte wie hier und Erstellen Sie eine ganz neue Regel und erweitern Sie diese dann. Also, nur um eine Mischung in zusammenzufassen, ist eine Funktion, in der wir irgendeine Art von Argument einfügen möchten. Es ist also nicht jedes Mal derselbe Code, während, und eine Klasse, die wir erweitern, etwas mit starren Regeln sein wird, bei denen diese immer gleich sein werden. Es geht immer in den gleichen Grenzradius, und das wird unser Stylesheet so klein wie möglich halten. 18. Was ist Kompass: so früher haben wir über Compass gesprochen, weil wir über Kompass App gesprochen haben. Jetzt ist dies die APP, wie wir wissen, dass R. C S CSS-Dateien beobachtet und sie zu CSS kompiliert, während wir gehen. Aber Compass ist auch eine Erweiterung von SAS, die viele zusätzliche Funktionen und Mix-Ins bietet, die wir in unsere Arbeit aufnehmen können. Solange wir einen Kompass haben, der uns beobachtet,haben wir Zugang zu denen. Solange wir einen Kompass haben, der uns beobachtet, Wenn wir nicht kommen besessen verwenden, gibt es alternative Kompass-App. Es gibt Alternativen, und bitte fragen Sie mich, ob Sie diese sehen möchten, oder wir müssen tun, wenn wir Compass jetzt verwenden möchten ist, dass wir Importkompass oben sagen müssen, und dies wird alle Kompass-Bibliotheken importieren. Es gibt tatsächlich fünf verschiedene Sub-Bibliotheken von Compass, und es gibt eine Dienstprogramme Typografie, CSS drei Layout und lesen und zurücksetzen. Nun, wenn ich nur White Compass wird tatsächlich diese Top-kostenlosen Dienstprogramme Typografie und CSS drei importieren . Und ich würde das keinen Vorteil sagen, wenn Sie den Unterschied kennen, es sei denn, Sie sind, bis Sie sich sehr spezifische Funktionen ansehen, werden Sie wissen wollen, in welcher es sich befindet. Aber wenn wir importieren, ist diese sehr ähnlich, wenn wir importiert sind Variablen oder unsere Mix-Ins . Es ist nicht wirklich, etwas in die Stil-Form zu setzen, bis wir es sagen. Mit einer Ausnahme wird dieser hier zurückgesetzt. Wenn ich sage, Importe, Kompass-Resets, wir setzen einfach den Halbkegel auf das Ende, und dann schaue ich mir meine Stylesheets an. Es hat tatsächlich diesen ganzen Brocken zusätzlichen Code in, und wenn ich meine Seite aktualisiert habe, werden Sie sehen, dass es mir seltsame Dinge trifft und zurückgesetzt wird. Für jeden, der nicht weiß, dass es sich um eine Sache handelt, die oft eine CSS-Datei ist, würden Sie Teoh hinzufügen, um verschiedene Macken oder Unterschiede zwischen verschiedenen Browsern zu entfernen . Also, wenn ich den Rand und die Polsterung am Rand von all diesen Dingen entferne, dann werden sie definitiv in allen Browsern gleich aussehen. Und ich kann diese Stile wieder hinzufügen, wie und wann ich sie brauche, damit Listenstile entfernt werden. Es entfernt bestimmte Tabellenstile, machte alles so einfach wie möglich, und es ist heraus, es hier jetzt zu setzen. Ich würde empfehlen, eine Reset-Datei zu verwenden, da es Ihnen offensichtlich helfen wird, Stile zu entwickeln , die in verschiedenen Browsern auf der ganzen Platine funktionieren. Aber ob Sie Kompass verwenden möchten, ist das Zurücksetzen von Blättern. Oder vielleicht möchten Sie normalize verwenden. Oder hier sind noch ein paar andere. Ich fand den Hassdampf oder fünf Dr. CSS. Es gibt einen Yahoo, der sehr beliebt ist. Universal-Selektor. Reset ist eine ganze Reihe von Eric Meyers Reset CSS. Es gibt ein paar verschiedene Reset-Blätter, und Sie möchten den Kompass möglicherweise nicht verwenden. Eins. Ich würde empfehlen, zu entscheiden, welche Reset-Datei Sie selbst verwenden möchten, und das auszulassen. Nun, was das Layout angeht. Es wird dir nicht schaden, es dort zu haben. Das gleiche mit den ursprünglichen drei Dienstprogrammen. Typografie CSS drei. Lasst uns sie da drin lassen. Und dann, was das tut, ist das gibt uns Zugriff auf Hunderte weitere Funktionen Mix Ins, auf die wir nicht bereits Zugriff hatten. Zum Beispiel, wir sind hier, um Ecken dieses, aber wir brauchen das nicht wirklich, weil das alles bereits in Compass eingebaut ist. Also, anstatt zu erweitern, lassen Sie uns und die Funktionen als Randradius Medias auf genau rechts fünf Pixel hier einschließen . Wenn ich das speichere, aktualisieren Sie einfach die Seite. Und wie Sie sehen werden, haben die Links immer noch abgerundete Ecken. Also, wenn ich das einfach hier unten benutze, ist gut, wo wir verlängerte Ecken haben und dann können wir das einfach entfernen. Und wie Sie sehen können, haben wir immer noch alle unsere abgerundeten Ecken, die, wenn ich wollte, könnte ich dann die Menge ändern, und ich kann diese haben viel schwerere Ecken. Und natürlich, wenn ich wollte, könnte ich auch eine etwas andere Kompassfunktion namens Border Corner Radius verwenden. Und was das tut, ist, dass ich zusätzliche Argumente hinzufügen kann, im Gegensatz zu oben links auf meinen Links. Jetzt bin ich gerade um die Ecke oben links. Es ist nicht besonders gute Taste, aber wie Sie dies sehen können viel mehr Funktionalität, und da und wieder, die Menge an Funktionalität und Mix-Ins in es ist riesig, und wir konnten nicht möglicherweise decken sie alle. Also werde ich raten, dass Sie einen Blick über einen Kompass-Stil Hund werfen , der eine Liste von allen verfügbaren Funktionen haben wird, und ich werde einen Link dazu auf dem Video hinzufügen. In den nächsten paar Videos. Ich zeige Ihnen ein paar Beispiele, aber von Zeit zu Zeit wird es etwas geben, was Sie tun wollen, und es ist sehenswert, ob es hier eine Funktion gibt, bevor Sie gehen und Ihre eigene erstellen . 19. Compass: Okay, also zeige ich dir nur ein weiteres kurzes Beispiel. Wenn Sie sich hier oben ansehen, habe ich gerade den ganzen Kompassordner importiert. Ich habe gerade gesagt, Importkompass. Also letztes Mal hatte ich ein paar verschiedene wie CSS drei wie diese. Aber tatsächlich, wenn wir nur den ganzen Ordner importieren, haben wir Zugriff auf alle alle Mix-Ins und Funktionen. Um also etwas über Kompass zu lernen , importieren Sie sie alle. Jetzt werde ich einen kleinen Kastenschatten um diesen Artikel hinzufügen. Also, wenn ich Recht habe, fügen Sie Box Shadow That geht Teoh importieren Sie alle der verschiedenen CSS-Regeln für verschiedene Browser und Sachen, um einen Boxer zu haben. Also werde ich den Schatten grün machen es zwei Pixel, zwei Pixel versetzt mit einer 10 Pixel Unschärfe auf das wird uns diesen Kastenschatten um diesen Block geben . Das sieht eigentlich ein bisschen extrem aus. Also wollte ich tatsächlich Lichter in diesem Grün ein bisschen, aber ich will Teoh nicht und ich war ein Licht darin. Ich wollte transparenter sein, weil es eine andere Farbe im Hintergrund geben könnte , also würden wir dies natürlich mit etwas wie RGB A in CSS tun und jetzt natürlich, um rgb zu tun benötigen Sie die RGB-Werte. Aber eigentlich wird es für mich klappen. Und wenn ich schreibe einfach grün hier und dann schreibe ich 0.5 ist der Alfa. Es wird den RGB-Wert für mich herausfinden, wenn ich also nur aktualisiere, wirst du dieses Licht in sehen. Aber wenn ich mir die CSS-Datei anschaue, sehen Sie hier, wo wir all unsere Box-Schatten-Zeug haben. Es hat tatsächlich 70 137 1 oder zwei für uns geklappt. Also brauchten wir Tiu nicht. Ich musste das überhaupt nicht anfassen. Es ist geklappt, und das zeigt Fund sie jetzt, eigentlich, was ist, wenn wir einen Insektenschatten auf genau dem gleichen Artikel haben wollen? Ich werde das einfach tun. Ich schreibe Anzent G P A. Und diesmal schaffen wir es. Es ist etwas schwarz. Lassen Sie mich ganz leicht. Ein Pixel, das man wählt fünf Pixel und das ist Insekten, ein kleiner Schatten hier. Das sieht eigentlich ziemlich schrecklich aus, wegen zu vieler widersprüchlicher Schatten. Aber wie Sie sehen können, haben wir zu Box-Regeln hinzugefügt. Ihre Box-Shadow Regeln mit der gleichen Funktion hier und im Stylesheet. Es wurde nur hinzugefügt, eine nach dem anderen 20. Compass Beispiel: so als ein weiteres wirklich, wirklich schnelles Beispiel. Ich werde Ihnen nur die Kapazitätsfunktion zeigen, weil ich denke, dass es ziemlich interessant ist. Encompass, wenn ich schreibe, enthalten Kapazität. Nein 0.5 unter diesem Header hier hat offensichtlich diesen Kopf gemacht. Ich habe eine Kapazität von der Hälfte, was eigentlich nicht wie diese nützliche Rolle scheint, weil wir nicht einfach Kapazität oder 0,5 selbst schreiben können ? Aber tatsächlich zeigt dies vielleicht etwas von der Macht, die Sie haben, wenn Sie einige dieser Dysfunktionen verwenden. Dies wurde in Nixon's gebaut, weil es dies auch für Legacy in den Explorer-Browsern hinzugefügt wird, was notwendig ist. Tiu hat weniger Rapazität gezeigt, so viele Browser wie möglich, aber vielleicht etwas, das wir oft auslassen würden, weil es ein ziemlich großer Teil von Code ist, und wir können nicht immer die Mühe machen, ihn zu finden. So Dinge wie das, was Sie von Zeit zu Zeit konnte, verlassen Kompass wird für Sie hinzufügen auf. Das ist vielleicht zeigt die Macht einiger dieser Mix-Ins 21. Compass Beispiel: wir Sagenwir mal für Artikel eins, wir haben beschlossen, ihm einen grünen Hintergrund zu geben , der aussehen wird, glaube ich, Sie werden zustimmen. Ziemlich schön. Also bin ich, wenn ich einfach hier nach cool hinzufüge. Aber gemahlenes Grün wird diese grüne Variable verwendet. Jetzt wird das die anderen Hintergründe überschreiben. Also werden wir einen mit einem grünen Hintergrund Moment haben. Gelber Hintergrund. Nun, Nun, leider können wir unseren Text jetzt nicht lesen, oder? Weil die Schotten, die eine grüne Karte auf grünem Hintergrund haben. Also lassen Sie uns in Artikel eins, Lassen Sie uns es so machen, dass Absatzfarbe. Und jetzt werde ich einfach hier reinlegen. Include, Und dann werde ich diese Mischung verwenden, im Gegensatz dazu, Kontrast, Dead Green auf Was das tun wird, ist es wird für mich funktionieren, ob oder Lichter oder eine dunkle Farbe wird am besten sein auf der Oberseite dieses Grüns. Es ist also so konzipiert, dass eigentlich dieses Weiß in der besten Farbe statt in einem Schwarz ist, was, wenn wir zum normalen Absatz kommen, wenn wir hier drin sind, einfach ein wenig neue Zeilen versprechen. NATO, dann, wenn wir hier drin sind con vertrauenswürdig? Nein, die Hintergründe sind nicht ganz gelb, oder? Es ist gelb aufgehellt, 10%. Also lasst uns das da reinlegen. Und das ist, was das tut, eigentlich Ah, schwarze Farbe wird auf diesem Hintergrund besser aussehen. Weiß wird jetzt besser in diesem Hintergrund. Ich bin mir nicht sicher, ob ich das komplette Weiß mag, weil wir nicht wirklich weiß irgendwo anders im Design verwenden . Also, eigentlich, gehen wir zurück zu unseren Variablen und fügen Sie eine neue Variable. Äh, ein neuer, sehr stimmlicher Kontrast. Es leuchtet de Filz, und dies wird genau das gleiche wie gelb. Nun wird dies tatsächlich gelb als Standardfarbe für Lichter kontrastierender Text verwendet. Also eigentlich hasst das hier oben wirklich den gleichen Stil haben will. Also lasst uns das einfach auch hier benutzen. Ok, da gehen wir. Also, wenn wir in der Reihe von gestartet aussehen, es ist offensichtlich nur die Farbe dort erstellt. Basierend auf dem, was es ausgearbeitet ist, ist der beste Kontrast zur Hintergrundfarbe 22. Wo du weitere Compass findest: Also hoffe ich, dass wir diese wenigen Mischen aus dieser Kompass-Bibliothek herausgenommen haben. Sie können sehen, dass das Einschalten und die Tiefenaus-Funktionen von Mix-Ins, die sie bereits erstellt haben . Wenn Sie ein paar mehr sehen möchten, als Sie offensichtlich suchen können, wie und wenn Sie einen bestimmten Bedarf haben . Oder Sie können gehen, um Kompass Bindestrich Stil, die Orc Schrägstrich Beispiele Teoh sammeln zusammen oder sehen Sie ah, ganze Siris von verschiedenen Beispielen. 23. Listen: Jetzt wird es einen Punkt kommen, an dem Sie wirklich, wirklich daran gewöhnt sind, Überschuss zu verwenden, mit dem Sie mit Kompass gespielt haben oder was auch immer aus einem Framework, das Sie genossen haben. Und du wirst an den Punkt kommen, an dem du bereit bist, die Trainingsräder abzunehmen und einige deiner eigenen Funktionen zu schreiben. Schauen wir uns also einige der fortgeschritteneren Funktionen an. Obsess, damit wir ein paar Ideen bekommen können, wie wir einige Funktionen erstellen können, die Sie uns speziell helfen werden. Also das erste, was man sich vertraut machen muss, ist etwas, das Listen genannt wird. Wenn Sie zuvor andere Frameworks vor anderen Programmiersprachen verwendet haben, könnten Sie mit der Idee aus einer Raise vertraut sein, eine Erhöhung sind ein Satz von Variablen. Also, wo ist denn hier? Grün ist hier gleich dieser Farbe. Gelb entspricht dieser Farbe. Orange entspricht dieser Farbe auf Rot gleich dieser Farbe. Wir könnten eine Liste von Farben erstellen, die alle Farben darin haben würden. Also hier haben wir eine Liste von Farben, und es ist alles in diesem einen Array hier gespeichert. Diese eine Liste, die an dieser Stelle einer Variablen sehr ähnlich aussieht, offensichtlich, offensichtlich, aber wenn ich waas, um diese Farbenvariable zu setzen. Dies listet hier auf. Das wird es nicht sagen. Ich bekomme Irrtum. Sehen Sie, ich habe einen Fehler, weil das, was ich nie auf meiner Haupt-Style-Seite bekam, weil wir in einige dieser Variablen kommen , die Dinge wie Orange und Gelb sagen, die nicht mehr existiert. Aber hier, was passiert ist, ist, Teoh zu versuchen, benutzen Sie diese ganze Liste von Farben, wo wir nur eine wollen. Also, was wir an diesem Punkt tun werden, ist, dass wir eine eingebaute SAS-Funktion namens Länge verwenden und wird eine bestimmte Nummer aus dieser Liste erhalten. Und wir wollen die 2. 1 Wir wollen diese f f f f Null ein fünf. Also werde ich zwei reinlegen, und das wird jetzt nur noch das Gelb zurückgeben. Lasst uns durch meine andere Seite gehen. Ich werde diese Fehler vorerst bekommen. Und ersetzen Sie einfach diese Orange mit drei Farben drei und ersetzen Sie alle Gelben auf dieser Seite. Ersetzen Sie alle Grüns durch eins und ersetzen Sie das Rot durch eine volle. Okay, also ist das Sparen von Fine. Ich werde keine Fehler machen. Und wenn ich nur die Seite aktualisiere, werden all diese Farben alle genau so geladen, wie Sie es erwarten würden, weil es diese Nummer aus der Liste aufnimmt. Also, was wir hier haben, ist, dass wir Farben jetzt nicht mehr variabel sind, sondern eine Liste von Variablen, und jede von ihnen wählt ein bestimmtes Element aus der Liste, so dass dies möglicherweise nicht nach einem nützlichen im Moment suchen. Und tatsächlich, wenn wir durch den Code schauen, ist es nicht besonders elegant, weil die 10. Farbe für uns ein bisschen weniger bedeutet als das Wort gelb, was ein bisschen beschreibender ist. Und in den nächsten paar Videos wirst du anfangen zu sehen, warum diese Listen viel, viel leistungsfähiger sein könnten . Eine Sache, die ich an dieser Stelle sagen werde, ist, dass das mit dem Raum hier funktioniert, aber wir werden denselben Raum für andere Funktionen verwenden. Neueste. Also, was eine bessere Idee ist, wenn wir diese Variablen mit einem gemeinsamen wie diesem aufteilen. Das ist also immer noch eine Liste hier, aber es ist ein bisschen mehr definiert als eine Liste, und es wird keine Leerzeichen an verschiedenen Orten falsch interpretieren, also liebt dies immer noch absolut gut, wie Sie sehen können. Das nächste, was ich Ihnen wirklich über Listen zeigen möchte, ist, was wir eine Karte nennen, eine Listenkarte wo vielleicht statt Farben zu sagen und dann nur eine Liste zu haben, können wir einen bestimmten Schlüssel für jedes Element in der Liste haben. Jetzt ist ein Schlüssel ein Schlüssel ist ähnlich. Identifizieren Sie uns, dass wir wissen, über welches Element in der Liste wir sprechen. Es wird diese Nummer ersetzen. Also, anstatt Nummer zwei zu sagen, wird in der Lage sein, gelb zu sagen, jetzt wird es ungefähr so aussehen. Ich werde hier richtig grün setzen, Dickdarm, und dann die Nummer haben. Und dann in der nächsten Zeile, Yellow Challenge. Und das müssen nicht offensichtlich Worte sein, dass Farben Dinge einzigartig sein könnten. Dies wir alle eindeutigen Namen, die keine Sonderzeichen in anderen als Bindestrichen und Unterstriche haben und nur Zahlen haben. Nach dem ersten Zeichen könntest du gemeinsames Was immer du wolltest nennen. Es könnte eine Idee sein, zu sagen, Primärfarbe oder Hintergrundfarbe, oder etwas, das sogar sinnvoller sein könnte als nur die tatsächliche Farbe, vor allem, wenn Sie zwei verschiedene Schattierungen von Orange hatten, wie wir irgendwie haben und dann hier, wo es in Farbe steht, wir eigentlich nicht mehr 10 sagen. Jetzt werden wir sagen, Karte bekommt und dies ist eine eingebaute Funktion, um diese Karte die Farben Karte zu bekommen und anstatt zu beginnen, gelb zu sagen. Also, wenn wir das gleiche, aber Code auf den Mix Ins hier verwenden, ist diese rote Füllung. Und dann alle Kehle hier, tragen Sie mit mir ein zweites Haupt, oder das war eigentlich auch, was gelb ist, was zu Wir werden gelb sein, jeder, der grün sein wird. Und ich habe das letzte in „Hit and Save“ gesetzt. Aktualisieren Sie einfach die Seite. Ähm, ich scheine diese Farbe Haar Teoh geändert zu haben, um nichts wie ESPN Orange darüber zu lesen . Sie können sehen, es ist genau so, wie es vorher war. Also im Grunde, was wir hier haben, ist, anstatt nur ein Element in jeder Variablen zu haben, wie wir zuvor hatten, haben wir eine Liste von Variablen erstellt, und dann haben wir einen Schlüssel für diese Listen erstellt, damit wir gehen und ein bestimmtes Element ganz leicht und wir können offensichtlich mit diesen sehen, wenn wir durch unseren Code schauen. Genau das, was ich sagte, wir bekommen von wo Farben gelb ist offensichtlich ziemlich selbsterklärend . Und jetzt , , wenn man sich das ansieht, sieht das ein bisschen verwirrender aus als zu Beginn. Was das war. Aber was ich Ihnen zeige, ist eine grundlegende Funktionalität, die die Bausteine der Funktionen sein wird , die wir in den nächsten paar Videos betrachten werden. 24. Loops: rechts Weiter. Wir werden jetzt über Schleifen reden. Setzen Sie einfach alle diese Farben zurück, wie sie jetzt waren, weil es einfacher ist zu sehen, dass es nur Lesen oder Gelb sagt. Aber ich werde Ihnen einen guten Weg zeigen, dass wir die zugeordneten Listen oder Listen verwenden können. Im Allgemeinen tun Teoh einige Funktionen, damit wir hier sehen können, dass es vier Artikel gibt, die jeweils eine andere Idee haben . Artikel eins, Artikel zwei, Artikel drei, Artikel vier Und wenn wir hier hineinschauen, habe ich einen benutzerdefinierten Stil nur für Artikel 1 erstellt und der hier die Farben und die Kontrastfarbe festlegt . Und die anderen drei, die ich gerade verlassen habe. Also werden wir tatsächlich ein paar verschiedene Stile für jeden einzelnen Artikel auf erstellen. Bevor ich das mache, werde ich eine zugeordnete Liste erstellen, um uns ein wenig Informationen für jeden dieser Artikel zu geben . Also werde ich meine Kartenlistenartikel nennen, weil es ein ziemlich offensichtlicher Name ist, um hier und dann innerhalb von Artikeln zu verwenden . Ich werde eine andere Unterliste für jeden der vier Artikel erstellen. Ich werde sie nicht nummerieren, weil sie bereits in einer Reihenfolge sind, also haben sie keine Art von Namen dort nur voll in vier Listen in einer anderen Liste namens Artikel. Also lassen Sie uns drei verschiedene Variablen in dieser Liste haben. Lasst uns BG haben, was der Hintergrund sein wird, und die 1. 1 wird gelesen und lasst uns ein Elternteil haben, das hämmern wird, und dieser wird 10 Pixel haben und wir haben Seitengröße, die wird die Größe der Überschrift, und dieser wird 1,6 e sein. Jetzt, jeder dieser Abschnitte, werde ich etwas andere Regeln erstellen. Das wird grün sein. Das wird gelb sein. Das wird orange sein. Diese werden fünf Pixel haben. Das wird um einen Punkt 4 Uhr morgens sein. Zwei Pixel, 1 Uhr morgens. Ich werde diese Halbpunkte einfach vom Ende nehmen, weil das nicht das Ende ist. Er traf die Liste, aber eines der Ende hier, winzige das ein bisschen. Okay, das hat also eine etwas andere Belästigung für den Rest von ihnen. Dies wird auch eine andere ausstehende haben. Und ein viel größerer Fehler lügt. Nun, das ist sehr groß Okay, also haben wir diese drei verschiedenen Regeln für je drei verschiedene Stile für jeden Artikel. Und jetzt bin ich gut, voran zu gehen und eine Schleife zu erstellen, die durch die Artikel schauen und für jeden etwas andere Stile erstellen wird. Wenn wir das hier ersetzen, bezieht sich das derzeit auf Artikel 1, um ihm seinen Hintergrund zu geben und den Farbkontrast zu machen und ihn mit dieser Farbe kontrastieren zu lassen. Es sind also im Moment ziemlich einfache Regeln. Aber die Art und Weise, wie es referenziert, verwendet das kaufmännische Und-Zeichen und dann ohne Leerzeichen, die direkt beim Schreiben von Artikel eins eingehen . Und dieses kaufmännische Und-Zeichen, wie wir wissen, wird nur die Tatsache wiederholen, dass Artikel Abschnitt sagt, und es erlaubt mir, einen bestimmten Artikel zu referenzieren. Also, was ich tun werde, ist, dass ich diese jede Funktion verwenden werde, und ich werde sagen, jeder Artikel jetzt Artikel ist der Wenn wir auf die Variablen zurückblicken, wurde das Artikel genannt, also Artikel ist eine neue Variable. Ich erstelle eine neue Liste, ich meine, und ich werde jeden Artikel in Artikeln sagen und dann geht das Teoh Schleife durch jeden Artikel. Nun das, sagt man hier, aber wir werden nicht zulassen, dass jede Schleife eine etwas andere Zahl ist. Also werde ich gehen. Teoh erstellen Sie hier eine neue Variable namens I und dies wird zu Equal Index Index ist eine eingebaute Funktion in zu bewerten. Und was Index tut, ist, dass Sie sich die Artikellisten ansehen und den spezifischen Artikel finden , den wir gerade betrachten und den Index erhält. Also, wenn es die 1. 1 ist, geht es. Wenn es sich bewusst ist, dass dies die 1. 1 ist, wird der Wert von eins drehen. Wenn es eine Sekunde im Gegenzug ist, der Wert von zwei. Also diese Variable, die ich jetzt gleich 123 oder vier ist, je nachdem, auf welcher Schleife wir sind. Also könnten wir das hier auf das Ende setzen, aber das geht nicht an die Arbeit, weil es davon ausgegangen wird, dass das ein Teil von diesem Namen ist . Also müssen wir ein extra kleines bisschen überschüssige Syntax verwenden, die ungefähr so aussieht, werden wir haben, als ob es ein CSS i d wäre. Wir werden ein Hash-Haar haben und dann lockig öffnen eine Klammer und eine schließende und dann ist das gehen zu ändern 1234 Es ist nicht durchlaufen. Wir sollten jetzt in der Lage sein, diesen Code auszuführen und er läuft durch. Also haben sie alle im Moment einen grünen Hintergrund, denn wenn wir uns unser Stylesheet ansehen, durchläuft es jetzt diese 1234 und erstellt jedes Mal den exakt gleichen Stil mit einem separaten I D. Am Ende. Okay, also wollen wir nicht ganz. Wir wollen nicht ganz, dass es immer einen Hintergrund von Grün tun. Wir wollten Met verwenden, wird Funktion und da drin werden wir uns unseren Artikel ansehen und wir werden diesen Schlüssel hier Hintergrund verwenden . Und dann lassen Sie uns einfach die gleiche Referenz auch hier verwenden, nur nicht die ganze Sache, sondern nur hier drin. So wird es auch den Kontrast in der Farbe erhalten. Mal sehen, wie das aussieht. Okay, also das ist gut. Das ist also durch sein Rot gekommen. Das ist gelb. Das ist orange. Und das hat auch herausgefunden, ob es besser mit der hellen oder dunklen Farbe kontrastiert . Also was? Es ist ein gelber Hintergrund. Es ist schwarz gewählt, und wenn es ein grüner Hintergrund hat diese gelbe Karte gewählt, weil das ist die Farbe, die am besten kontrastiert. Okay, schauen wir hier zurück und sehen, was wir sonst noch haben. Wir haben Hassgröße, und wir haben Polsterung. Also, bis jetzt haben wir Hintergrund-Fuß-Familie verwendet. Okay, also bis jetzt haben wir dieses h benutzt, um hier zu markieren, und wir rufen die Überschrift vorne an, wenn Sie sich richtig erinnern, ist die Überschrift vorne ein Mix in. Wir haben erstellt und schwächen senden in einer Schriftgröße. Also, wenn wir das jetzt in jeden bestimmten Artikel setzen, können wir diese jetzt die Größe für die Überschrift senden. Wenn wir den Hass-Größe-Schlüssel verwenden, also lasst uns sehen, kommt und hier rein werden wir nur sagen, Hitgröße. Offensichtlich wickelt sich das ziemlich viel herum, weil ich offensichtlich nur die Größe geändert habe, damit Sie es einfacher sehen können. Aber lassen Sie mich ein bisschen mehr hierher ziehen. Okay, jetzt sollten die Hass-zwei idealerweise eine Überschrift haben, die den Schriftstil ändern wird, um einen zu finanzieren, wird die Größe ändern, die wir in setzen , und es wird es fett machen, was bereits in Ordnung ist, also gibt es unsere verschiedenen Fondsgrößen. Das sieht ziemlich interessant aus. Und dann in diesem Hauptbereich hier haben wir hier Polsterung. Aber wir werden das rausnehmen, wir werden ein separates Stampfen für jeden von den verschiedenen Artikeln haben. Und dafür werden wir meine Geräte wieder benutzen. Und in der Karte bekommt wir gehen. Teoh, benutze die Pad-Taste, die wir von unserer Variablen hier bekommen haben. Ok. Und wie Sie sehen können, ist es jetzt jeder dieser Boxen ein etwas anderes Klopfen gegeben, also ist das eine jede Schleife. Aber um des Experimentierens willen, lassen Sie uns einfach zeigen, wie wir genau das gleiche Problem mit einer anderen Art von Schleife machen können. Dies wird eine Vier-Schleife genannt, die jetzt in einer Vier-Schleife sagen würde, denn wir werden eine neue Variable namens Dollar Sinai erstellen, die genau die gleiche funktionieren wird, wie es vorher für ein Dollar-Zeichen von eins bis vier war. Weil wir vier auf unserer Liste haben, aber wir wissen nicht, ob es vielleicht fünf oder drei und die Zukunft geben würde. Also wollen wir eine eingebaute Funktion namens Länge verwenden, die wir nur Artikel umwickeln werden, und diese Funktion wird sehen, wie viele Elemente in dieser Liste sind, wenn Sie uns zurückgeben. Es wird also sagen, dass eine Schleife von 1 bis 4 Mal wird und dies wird jedes Mal erhöhen , wenn wir uns genau die gleiche Idee geben, also brauchen wir das nicht mehr. Dies wird nur durchschauen und uns Artikel als Liste die ganze Zeit geben. Aber lassen Sie uns das I D verwenden, um zu referenzieren, welche Idee in dieser Liste wir verwenden möchten. Also eigentlich, was wir tun müssen, ist, dass wir hier unten drei separate Listen erstellen müssen. Also werde ich wieder eine Farbe nennen, und es wird sagen, lesen grün, gelb, gelb, orange Ich werde ein kaltes Keuchen haben, das nur 10 Pixel, fünf Pixel, zwei Pixel, 12 Pixel und eine andere, die Überschriftengröße genannt wird. Aber sie wird 1,6 cm 1,4 Uhr eins sagen. Ja, 2 Uhr morgens und wir werden nur diese kartierte Liste entfernen, und stattdessen werden wir uns mit drei einfacheren Listen befassen. Also haben wir Farben Polsterung und Überschriftengröße. Jetzt. Das bedeutet, dass wir das jetzt durch Farben ersetzen werden. Ich denke, ich habe den englischen Weg geschrieben und dann hier werden wir Hintergrundfarben sagen und wir gehen zurück zu dieser funktionalen Verwendung vor dem 10. 1 Und dieses Mal wird sich das i d , auf das wir verweisen, jedes Mal ändern. Also werden wir Dollarzeichen I verwenden, das sich je nach Aussehen erhöhen wird. Also lasst uns das einfach noch mal benutzen. Ja, das wird sagen, klopfen statt Farben und dann hier unten, wird es sagen, wie die Überschrift Größe, glaube ich. Lassen Sie mich nur Überschriftengröße Polsterfarben überprüfen. Das sollte okay sein, jetzt zu sagen verstehen, ich habe die American League geschrieben. Lass mich die benutzen, okay? Und das ist ziemlich interessant. Ich scheine einige ziemlich beeindruckende hämmern auf diesem 1. 1 Ah, Ich habe 10 pc, die Sie keine Ahnung haben Was davon? Wenn ich zurück zu 10 Pixel wechselt, gibt mir jetzt 10 Pixel und wir haben alle die gleichen Größen und Poundings, die wir zuvor hatten, die mit einem etwas anderen System abläuft. Und schließlich haben wir eine Weltschleife, was eine while-Schleife tut, ist es fast das gleiche wie eine Vollschleife tun wird . Außer wir können wählen, wie viel ich jedes Mal inkrementieren. So könnten wir potenziell jede andere Box haben, die Styling auf sie angewendet hat, zum Beispiel, oder wir könnten ihm eine andere mathematische Formel geben, um zu erstellen, welche Zahl ist. Aber bei dieser Gelegenheit werde ich nur das Auge gleich machen ich plus eins auf jeder Schleife durch. Und während ich weniger als die Länge der Farben ist, dann werden wir die Schleife fortsetzen. Das bedeutet auch, dass wir, bevor wir die Schleife beginnen , ich Wert geben müssen. Wir geben ihm einen Wert von Null. Also, was hier passiert, ist, dass wir hier runterkommen. Es wird sagen, dass ich gleich Null ist, während ich weniger als vier ist, was die Länge der Farben durch die Schleife geht. Es wird hier treffen. Dadurch werde ich eins werden, was uns rauslassen wird. Setzen Sie den ganzen Code. So Artikel eins hat die erste Farbe, die erste Menge von Polsterung und die erste Überschrift Größe. Und dann, weil man noch weniger als vier ist, wird es wieder herumlaufen, und dieses Mal wird es auch werden . Und es wird nur jedes Mal inkrementell durchschauen, wenn es dies trifft und im Wesentlichen genau das gleiche tun, wie für Luke, genau es. Die Macht, die wir hier haben, ist , wie ich sagte, wir könnten jedes Mal sagen, und es wird dann bestimmte Boxen auslassen und andere stylen, und wir können jede Art von Mathematik-Funktionen, die wir wollen, damit tun. Also vielleicht eine Weile, Loop hat ein wenig mehr Strom aus vier Schleifen, möglicherweise ein bisschen einfacher nach rechts. Es gibt also drei verschiedene Arten von Schleifen, und sie alle können die gleichen Dinge erreichen. Aber in verschiedenen Situationen werden verschiedene Schleifen Ihren Bedürfnissen mehr als höher entsprechen. 25. Wenn du sonst noch einmal: Jetzt verwenden wir immer noch diese Kompassdatei, um ein paar Funktionen zu verwenden, und ich denke, wir könnten diese Funktionen vielleicht selbst neu erstellen. Jetzt denke ich, wir sind an der Stelle, an der wir anfangen können, diese Lernräder ein wenig abzunehmen und einfach unsere eigenen zu erschaffen. Das ist also ein Interessantes, das wir hier haben. Kontrastieren Sie es. Versuchen wir es. Wenn wir dies neu erstellen können, so dass Kontrast getan ist entweder gelben oder schwarzen Text zu schaffen, je nachdem, welche Art von Hintergrund ist. Mal sehen, ob wir einfach unsere eigene Mischung erstellen könnten, die dasselbe tut. Also, wenn ich es einfach nicht könnte und mischen, werde ich es Kontrast nennen. Ich werde ein Argument mit einer Hintergrundfarbe senden und dann werden wir hier drinnen einen kleinen Test machen. Dann wird es ein Wenn sonst genannt, und es wird so etwas aussehen, wird sagen, ob und es wird diese variable Hintergrundfarbe überprüfen und wir wollen überprüfen, wie hell es ist, also werden wir eine eingebaute Funktion namens Leichtigkeit verwenden, und das wird einen Prozentsatz zurückgeben, also wollen wir überprüfen, ob es weniger als 50% ist, und das ist eine Bedingung hier, wo es sagt, dass dies uns eine Zahl geben wird und wir diese beiden Zahlen gegeneinander nehmen, damit wir verschiedene Dinge und wir könnten gleich sagen und das würde uns sagen, wenn die Farbe genau 50% ist. Wenn es sehr, sehr spezifisch grau war , dann würde dies ja oder nein sagen und wir könnten sagen, Wir wollen überprüfen, ob diese Farbe weniger als 50% oder mehr als 50% ist . Aber wir könnten sagen: Ist es kleiner oder gleich? Sie können auch überprüfen, ob es nicht gleich ist, indem Sie ein Erklärungszeichen verwenden und dann gleich sind. Und das wird wahr sein, wenn es etwas anderes ist als das ganz Spezifische. Gray wird den Befehl ausführen, der zwischen diesen beiden geschweiften Klammern liegt. Aber in diesem Fall möchte ich nur überprüfen, ob es weniger als 50% Leichtigkeit ist. Dies wird also einen Wert von 49 oder weniger Prozent zurückgeben, was bedeutet, dass es ein dunkler Hintergrund ist, was bedeutet, dass ich eine helle Farbe möchte. Also lass uns gelb setzen Okay, das wird uns gelben Text geben. Wenn es einen dunklen Hintergrund gibt, aber lassen Sie uns einen Fullback für, wenn es einen hellen zweifarbigen Hintergrund gibt. Also werden wir hier schreiben, das sonst auf dem Schild steht. Und dann haben wir noch zwei Klammern und in diesen Klammern wird die Farbe für helle Hintergründe sein. Und ich werde diese anthrazitgraue Farbe eintragen, und das ist der ganze Mixon, den wir brauchen. Alles, was wir tun müssen, ist diese eine Farbe zu überprüfen, um zu sehen, ob sie dunkler oder heller als 50% ist und dann eine Farbe für den Text entsprechend zurücksenden. Das war also die ursprüngliche Kompassfunktion. Eine Mischkontrast-ID auf meiner wird als Kontrast bezeichnet. Also werden wir jetzt zu meiner wechseln und sehen, wie die Seite aussieht. Ok, großartig. Das ist also fast genau das Gleiche, wie es waas ist. Außer jetzt habe ich etwas mehr Kontrolle über das Mischen, also mal sehen, ob wir hier einen Rauch oder ein paar weitere Tests erstellen können, um zu sehen, ob wir etwas anderes herausfinden können . Also lassen Sie uns das hier unten als ein anderes hinzufügen, wenn und wir gehen Teoh, überprüfen Sie zuerst etwas anderes. Das wird also sagen, wenn ich hier noch eine Bedingung zum Testen schreiben werde , und wenn es ein Ja ist, dann wird es das tun. Wenn es ein Nein ist, wird es auf die nächste gehen und sehen, ob es das ist oder nicht. Und wenn es ein Ja ist, wird es gelb machen. Wenn es ein Nein ist, wird es dazu kommen. Und das ist der Fullback-Standard. Wenn etwas auf das andere kommt, wird es immer wahr sein, und es wird den Text schwarz machen. Also dieser hier, wir werden sagen, wenn die Hintergrundfarbe Nein, nicht dieses Zeichen. Wir wollen ein Dollarzeichen. Hintergrundfarbe ist gleich zweimal, weil wir es nicht tun. Wir versuchen nicht, es zu zwingen, das gleich zu machen. Wir versuchen zu überprüfen, ob es dem entspricht. Also tragen wir normalerweise gleich zweimal in der Programmierung, um diese Dinge zu überprüfen. Wenn die Hintergrundfarbe gleich ist, lassen Sie uns sehen, ob gleich grün ist, so dass wir wissen, dass die 2. 1 gleich grün ist. Also bei der Gelegenheit, die grün ist, werden wir ihm eine Ähm geben, ich gebe ihm eine weiße Farbe, also wenn ich diese Seite jetzt aktualisiere, hat er Weiß für das Korn. Sonst wird überprüfen, wie dunkel der Hintergrund ist. Wenn es dunkler als eine bestimmte Menge ist, wird es gelb machen, und es ist weniger als eine bestimmte Menge. Es wird es schaffen, das heißt 333 schwarze Farbe. Okay, das ist großartig. Mal sehen, ob wir es vielleicht machen können, so dass diese Orange auch weiß ist. Also wollen wir zu zwei Argumenten haben, die hier drin getestet wurden. Wir wollen ALS konditionieren. Also werde ich einfach voran gehen und schreiben oder in der Mitte hier, oder die Hintergrundfarbe ist gleich. Oh, nein. Okay, jetzt ist das eigentlich ein wenig verwirrend, nicht wahr? Weil die Hintergrundfarbe gleich grün oder Hintergrund ist. Farbe ist orange, aber wir müssen es wissen lassen, in welcher Reihenfolge diese Dinge zu testen. Und wenn ich ein paar Klammern um das herum setze, würde alles in diesen Klammern gleich wahr oder falsch sein, bevor es alles liest. Und wenn ich das in Printkrankheit setze, kann das das hier ablenken, damit wir uns nicht überschneiden. Ich habe diesen Abdruck gesetzt. Das ist dann müssen wir Werte haben, die jeder gleich, wahr oder falsch. Wenn einer von ihnen gleich wahr ist, dann geht es direkt zu dieser nächsten Zeile. Wenn sie beide falsch sind, dann wird es zu diesem nächsten gehen. Okay, also lassen Sie uns das speichern und sehen, ob wir jetzt weißen Text auf orange Box haben. Alternativ könnten wir schreiben und hier drin und das wäre nur wahr, wenn diese beide wahr wären. Also nur, wenn die Hintergrundfarbe grün und orange war, was nie passieren wird. Und Sie werden sehen, dass dann wieder zurück zu dem, was die Lichter gelb werden und was? Fang an, zu schwarz zu werden. Wenn Sie ein paar Argumente haben, gegen die Sie testen können, können Sie überprüfen, ob sie beide wahr sind, und dann wird es zu diesem gehen. Das ist also eine if else Aussage. Aber für solch ein einfaches Stück Code mit nur ein paar Zeilen, und wir könnten genauso gut eine SAS-Funktion namens if-Funktion verwenden. Also werde ich das nur ein wenig erweitern und Ihnen zeigen, wie das funktioniert. Also, wenn die Funktion geht, hat Teoh einen wahren oder falschen Wert, und dann einen Code, den wir für true oder Code ausführen werden, der für false ausgeführt wird. Also werde ich hier Farbe schreiben, und es wird zwei Möglichkeiten geben. Es könnte gelb sein oder es könnte diese graue Farbe sein. Jetzt brauchen wir nur, dass dieser erste Abschnitt hier entweder wahr oder falsch sein wird. Also, was wir idealerweise tun sollten, ist in all das zu setzen, weil wir das Kontrastbit nicht wollen. Wir wollen nur, dass Karte Bit in hier und nur die bedingte Leichtigkeit von weniger als oder größer als 50% bekommen . Ich möchte das hier reinlegen und dort die Farbe haben. Nun, das sieht im Moment wie eine ziemlich komplizierte Linie aus. Aber wenn ich es einfach speichern und diese Seite aktualisieren, werden Sie sehen, dass die Codes schwarz auf, dass. Coz gelb, was das tut. Sagt es, wenn das wahr ist, mach es gelb. Wenn das falsch ist, mach es schwarz. Und das ist, was wir testen, was sagt, Leichtigkeit größer als oder weniger als 50%. Und es hat diese Farbe in der Mitte, die die Karte bekommt Artikelhintergrund. Das sieht da drin ein bisschen kompliziert aus. Was wir also tun könnten, ist am Anfang jeder Schleife, wir könnten eine neue Variable erstellen Lassen Sie uns es abkühlen Hintergrundfarbe auf Lassen Sie uns es einfach gleich machen. Matt Gaetz Artikel Hintergrundfarbe. Das wird ein bisschen abnehmen, denn dann tun wir es nicht. Wir wiederholen diesen Text nicht. Wir können das einfach jedes Mal verwenden, was ein bisschen Natur ist. Aber das ist immer noch ziemlich kompliziert, also könnten wir tatsächlich se und eine andere Variable namens Is Light haben. Lassen Sie uns nennen, es ist Licht, und dies wird einfach nur ein boolescher Wert sein, da darin wahr oder falsch ist. Und ich setze das hier rein, und es sollte wirklich sein Dunkles heißen. Würde es das nicht hier reinbringen? Und dies wird entweder einen Wert von yes, true oder false haben , je nachdem, ob dies eine Leichtigkeit von mehr oder weniger als 50% hat. Jetzt können Sie sehen, dass dies ein viel, viel klarer, ein wenig Code ist. Und wenn ich diese Seite hier aktualisiere, funktioniert sie immer noch genau so, wie wir dachten. Was wir hier tun, ist das Erstellen einiger Variablen am Anfang jeder Schleife durch, so dass wir auch einfach dieses Padding hinzufügen können. Hier. Ich habe eine variable kalte Polsterung an. Wir könnten dasselbe mit der Überschriftengröße tun, also zeigt es nur viel klareren Code 26. Glückwunsch: Nun, herzlichen Glückwunsch. Du hast es bis zum Ende unseres Kurses geschafft und in nur zwei Stunden hat er die Art und Weise verändert, wie du Stylesheets schreibst . Sie können voran gehen und beginnen Zeit zu sparen Schreiben besseren Stil. Sie ist sofort. Ich hoffe, Sie haben den Kurs Fun gefunden, wenn ich hoffe, Sie fanden es informativ. Wenn Sie aus irgendeinem Grund nicht haben, schreiben Sie mir bitte eine Nachricht und lassen Sie mich wissen, wie ich es in Zukunft verbessern kann Wenn Sie eine bitte teilen Sie es mit Ihren Freunden auf Recht zu überprüfen und ich hoffe Sie wieder zu sehen Aber natürlich, sehr, sehr bald