Share
Kouto Swiss ist eine fantastische neue Mixin-Bibliothek für den CSS-Präprozessor Stylus, die von den Entwicklern Pierre-Antoine Delnatte und Thierry Lagasse von KRKN erstellt wurde. Es zielt darauf ab, das Standard-Toolkit zu sein, an das sich Stylus-Entwickler wenden, und nachdem ich die Funktionsvielfalt genau durchgesehen habe, kann ich sagen, dass es diese Rolle sicherlich wert wäre.
Wenn Sie mit Stylus oder CSS-Präprozessoren nicht vertraut sind, können Sie über meinen Artikel ein Intro erhalten. Warum ich Stylus wähle (und Sie sollten auch).
Und wenn Sie gerade dabei sind, schauen Sie sich die ersten beiden Videos meines neuen Kurses an. Werden Sie ein CSS-Superheld mit Stylus. Sie sind beide kostenlos und werden Sie durch das führen, was Stylus ist und wie Sie es sich leicht machen können, damit zu arbeiten.
Um Kouto Swiss zu installieren, empfehle ich zuerst Node.js zu installieren und dann den Befehl auszuführen npm installiere kouto-swiss über ein Terminal oder eine Eingabeaufforderung in Ihrem Projektordner. Ich habe festgestellt, dass dies der einfachste Weg ist, um sicherzustellen, dass Abhängigkeiten erfüllt werden.
Fügen Sie dann diese Zeile oben in Ihre Stylus-Datei ein und Sie können loslegen:
@import 'node_modules / kouto-swiss'
"Kouto Swiss" bedeutet "Schweizer Taschenmesser", und im Sinne dieses berühmten kleinen Emblems von geballter Nützlichkeit hat diese Mixin-Bibliothek viele hilfreiche Dinge in einem kleinen Paket zusammengepackt.
Es gibt viel zu viele Funktionen in Kouto Swiss, als dass wir sie hier alle behandeln könnten. Heute werden wir uns zunächst eine Auswahl von sechs seiner Funktionen ansehen.
Die Einbeziehung von Normalize.css in Ihre Projekte ist meiner Meinung nach eine Notwendigkeit.
Wenn Sie einen CSS-Präprozessor verwenden, der normalerweise eine aktiv gewartete Version von Normalize.css enthält, die in Ihre bevorzugte Sprache geschrieben wurde, laden Sie sie in Ihr Projekt herunter, importieren sie, halten Sie Ausschau nach Updates und importieren Sie sie bei Bedarf erneut.
Wenn Sie dagegen Kouto-Swiss verwenden, müssen Sie sich keine Gedanken über diese Schritte machen. Fügen Sie einfach eine einzelne Zeile zu Ihrer Stylus-Datei hinzu:
normalisieren()
Der vollständige Code von Normalize.css wird direkt in Ihr Stylesheet geschrieben:
Mit diesem Ansatz müssen Sie lediglich Ihren Kouto-Swiss auf dem neuesten Stand halten, und Normalize.css wird sofort entsprechend behandelt. Keine zusätzlichen Dateien, Pakete oder Importe, um die man sich Sorgen machen muss; Der gesamte Prozess wird über diese eine Codezeile abgewickelt.
Wenn Sie Normalize.css nicht wirklich mögen und vielleicht Eric Meyers CSS-Reset bevorzugen, gibt es einen "Einzeiler", den Sie auch dafür verwenden können: meyer-reset ()
Wenn Sie sich nicht an ältere CSS-Eigenschaften halten, müssen Sie mehrmals herstellerspezifische Präfixe und Fallbacks verwenden, um Cross-Browser-kompatiblen Code auszugeben. Das Aufrechterhalten der Präfixe und Fallbacks von Anbietern kann jedoch schwierig sein, da sich die Anforderungen an den Ort, an dem sie verwendet werden sollen, ständig ändern.
Kouto-Swiss behandelt dieses Problem schnell und kommuniziert mit der Can-I-Use-Website, um alle Präfixe und Fallbacks Ihrer Anbieter für Sie auf dem neuesten Stand zu halten. Sie können Ihre eigenen Einstellungen für die Browser und Versionen hinzufügen, die Sie unterstützen möchten, oder Sie gehen einfach zu den Standardeinstellungen über, die sich aus den Empfehlungen "Kann Ich Verwenden" ergeben.
Es gibt keine besonderen Schritte, um Ihren Code Cross-Browser-kompatibel zu machen. Schreiben Sie einfach Ihren Stylus-Code, als ob alle seine Eigenschaften bereits universell unterstützt würden:
Das resultierende CSS enthält die richtigen Herstellerpräfixe und den Fallback-Code:
Sehen Sie sich die vollständige Liste der CSS-Eigenschaften an, die von der Herstellerpräfix- und Fallback-Funktion unterstützt werden.
Die relativ neue Möglichkeit, Shapes mit CSS3 zu generieren, hat sich als äußerst nützlich erwiesen, um Websites schnell und einfach zu laden, einfach zu färben und durch alleinige Code-Bearbeitung zu skalieren.
CSS3-Dreiecke sind eine der Formen, die erstellt werden können. Der Versuch, den Code so zu schreiben, dass er mit der gewünschten Größe, Farbe und dem gewünschten Winkel ausgegeben wird, kann schwierig sein.
Kouto-Swiss bietet eine unglaublich einfache Handhabung Dreieck() mixin, das alle Versuche und Irrtümer aus der Erzeugung von Dreiecken herausnimmt, indem Sie einfach sagen, in welche Richtung das Dreieck zeigen soll, wie groß es sein soll und welche Vordergrund- und (optionalen) Hintergrundfarben es sein soll.
Lassen Sie zum Beispiel ein paar fallen Dreieck() Mixins mit einigen vordefinierten Farbvariablen wie:
Dann wird Ihre CSS-Dreieckskreation zu einem Spaziergang im Park:
Es ist immer eine gute Praxis, eine Schriftstapel Gegen jede Zeichensatzfamilien-Deklaration in Ihrem Stylesheet. Wenn Ihre bevorzugte Schriftart aus irgendeinem Grund fehlt, haben Sie einige Alternativen. Das Herausfinden, welche Zeichensätze einander ausreichend ähnlich sind, um einen guten Stapel zu bilden, kann etwas mühsam und schwierig sein.
Kouto-Swiss beinhaltet a font-stack () mixin, das seine Fontstack-Informationen von cssfontstack.com von Denis Leblanc bezieht und die einfache Ausgabe von Fontstacks basierend auf gängigen Schriftfamilien ermöglicht.
Zum Beispiel der folgende Stylus-Code:
generiert diese vollständigen Schriftstapel:
Schauen Sie sich die vollständige Liste der Schriftarten an, die von diesem Mixin abgedeckt werden.
Kouto Swiss kann fünf verschiedene Arten von Farbschemata erstellen:
Sie füttern die Farbschema-Generierungsfunktion a Samen färben und speichern Sie die Informationen, die für eine Stylus-Variable zurückgegeben werden. Es werden zwei bis vier Farben zurückgegeben, die Sie auf folgende Weise ausgeben können:
Im obigen Code habe ich eine blaue Farbe von verwendet # 3083bf und führte es durch jede der fünf Farbschema-Generierungsfunktionen, die dann diese Farbschemata generiert haben:
Wenn die Seed-Farbe dann geändert wird, kann ein ganz neuer Satz von Farbschemata aus demselben Satz von Code generiert werden. Zum Beispiel zu ändern # 30bfb3 gibt Ihnen:
In der Dokumentation finden Sie genaue Informationen über die einzelnen Funktionen zur Erzeugung von Farbschemata.
CSS-Animationen sind ähnlich wie CSS-Formen eines der nützlichsten neuen Werkzeuge in unserem Webdesign-Arsenal. Elemente, die zuvor Flash oder JavaScript benötigt hätten, können jetzt mit reinem CSS zum Leben erweckt werden.
Im Moment benötigt der Browserübergreifende CSS-Animationscode jedoch eine Menge von Herstellerpräfixen. Mit Kouto Swiss @keyframe In Kombination mit dem oben beschriebenen Hersteller-Präfix wird es ziemlich einfach, Ihre Animationen zu kodieren. Zum Beispiel diese 29 Zeilen von Stylus:
Geben Sie die erforderlichen 232 Zeilen CSS aus. Ich denke, Sie werden zustimmen, dass es ein Albtraum wäre, manuell zu schreiben:
Die resultierende Animation sieht folgendermaßen aus:
Weitere Informationen finden Sie in den Dokumenten @keyframe Animation in Kouto Swiss.
Kouto Swiss ist eine hervorragende Ergänzung zur Welt der CSS-Entwicklung, und ich empfehle dringend, es für eine Probefahrt auszuprobieren.
Es gibt eine lange Liste von Zusatzfunktionen, die wir noch nicht einmal angesprochen haben, also besuchen Sie http://kouto-swiss.io, um den vollständigen Überblick zu erhalten.
Und denken Sie daran, wenn Sie etwas Hilfe benötigen, um Ihre Stylus-Entwicklung zu beginnen, schauen Sie sich die zwei kostenlosen Videos aus meinem Kurs an, um zu erfahren, wie Sie loslegen können: Werden Sie ein CSS-Superheld mit Stylus.
Accentsconagua