Vorstellung von Scut, einer neuen Sass-Hilfsbibliothek

Der folgende Beitrag ist ein Gastbeitrag von David Clark. Ich finde Davids neue Sass-Bibliothek „Scut“ ziemlich interessant. Sie ist wie eine Design-Hilfsbibliothek, die sich von einer Design-Pattern-Bibliothek dadurch unterscheidet, dass sie keine bestimmte Struktur oder kein bestimmtes visuelles Design erzwingt. Ich habe diese Art von Dingen schon immer faszinierend gefunden, vor allem, weil ich es nie geschafft habe, es auf eine Weise umzusetzen, die sich für mich gut anfühlt. Ich neige immer zu sehr zum visuellen Design oder werde zu abstrakt, bis es nicht mehr sehr nützlich ist. Ich glaube, David ist hier genau auf dem richtigen Weg. Ich überlasse es ihm, es im Detail zu erklären.

Ich habe eine Open-Source Sass-Hilfsbibliothek mit einer klaren Mission gestartet: unsere Implementierungen gängiger Style-Code-Muster zu erleichtern und zu verbessern. Ich nenne sie Scut.

Scut ist eine Sammlung von Sass-Mixins, Platzhaltern, Funktionen und Variablen, die so allgemein gehalten sind, dass sie weitgehend wiederverwendbar sind – in jedem Projekt, jedem Design – und einfach in diverse Arbeitsabläufe und Codierungsstandards zu integrieren sind. Jedes Scut-Utility ist ein Versuch, Wiederholungen zu reduzieren, die Organisation zu verbessern und die Wiederverwendung und den Austausch von Style-Code zu fördern.

Scut ist kein Frontend-Framework und bietet keine Standardstile: Es befasst sich nicht mit den Farbverläufen Ihrer Schaltflächen, dem Innenabstand Ihrer Boxen, der Schriftgröße Ihrer Überschriften oder der Farbe Ihrer Haut. Und es liefert Ihnen keine Vendor-Präfixe: Der einzigartige Fokus von Scut unterscheidet es von anderen Präprozessor-Bibliotheken. Es sollte Ihnen beim Erstellen von Websites helfen – besonders wenn Sie, wie ich, an vielen Websites arbeiten, anstatt an einer einzelnen großen Anwendung – aber es tut nicht alles. Es ist ein Begleiter und kein Ersatz für andere beliebte Tools und Praktiken.

Ich habe diesen Artikel geschrieben, um meine Motivation, meine Absicht und meine Methode bei der Gründung von Scut zu erklären und vor allem, um Ihren kollaborativen Input zu suchen.

Bitte behalten Sie also beim Lesen im Hinterkopf, dass sich Scut noch in den Anfängen befindet und Sie, lieber Leser, die Macht haben, es zu verändern und zu verbessern, sei es durch Hinzufügen und Aktualisieren von Hilfsmitteln oder durch Klärung der zugrunde liegenden Prinzipien. Wenn Sie zu irgendeinem Zeitpunkt beschließen, es auszuprobieren oder Ideen einzubringen, besuchen Sie bitte die Dokumentation von Scut oder das Repository auf Github.

Wie wir Style-Code jetzt teilen und warum es Platz für Scut gibt

Wiederverwendbare Komponenten: Füge hier eine hübsche Schaltfläche ein

Betrachten Sie Bootstrap, Foundation, PureCSS usw. – egal, ob wir sie Frontend-Frameworks, UI-Kits, Design-Systeme oder wie auch immer nennen, ihr Zweck ist klar: Entwicklern zu helfen, funktionale, attraktive, zuverlässige Benutzeroberflächen schnell und einfach aus vorgefertigten Komponenten zu erstellen.

Auch wenn wir diese Frameworks nicht oft verwenden, sollten wir ihren Wert erkennen und daraus lernen. Vor allem demonstrieren sie die Tugenden eines systematischen Ansatzes für das Webdesign. Mark Ottos Aufforderung „Baue dein eigenes Bootstrap“ und Brad Frosts Beschreibung von „Atomic Design“ erinnern uns daran, dass wir, wenn wir die wiederverwendbaren Komponenten anderer nicht übernehmen wollen, unsere eigenen Bausteine erstellen sollten, die ebenso systematisch und wiederverwendbar sind. Mailchimps Pattern Library und Mapbox’s Base dienen als groß angelegte Beispiele für diesen Ansatz.

Diese Vielfalt des Teilens und Wiederverwendens von Style-Code – die Komponentensammlung, das Design-System – hat viel Aufmerksamkeit erregt, und das ist gut so. Aber es ist nicht die einzige Vielfalt; und ich schreibe all dies, um zu sagen, dass Scut anders ist.

Ein gutes Frontend-Framework hilft uns auf viele Arten, aber der Umfang seiner Wiederverwendbarkeit über verschiedene Projekte und Designs hinweg ist begrenzt. Scut zielt auf eine breitere, rudimentärere Art der Wiederverwendung ab – Wiederverwendung nicht von polierten Komponenten, sondern von den abstrakten, generischen Mustern und Praktiken, die diesen Komponenten zugrunde liegen. (Zumindest von jenen Mustern und Praktiken, die in reinem CSS nicht klar und einfach sind.)

Abstrakte, generische Muster und Praktiken: „Unfertige“ Stile

Eine weitere Möglichkeit, Style-Code zu teilen und wiederzuverwenden – die Art und Weise von Scut – beinhaltet die Übertragung nützlicher Manöver, cleverer Tricks und Best Practices, aber keine fertigen Komponenten.

Hier ist die Grundidee: Erstellen und teilen Sie Module, die so allgemein, flexibel und nackt wie möglich sind, damit sie in jedem Projekt verwendet werden können, um ein nützliches Muster zu implementieren, ohne eine bestimmte Umgebung dafür zu verlangen oder vorzugeben.

Diese Art des Teilens geschieht auf zwei Arten: Tutorials und Hilfsbibliotheken.

Tutorials

Als paradigmatisches Beispiel für das Tutorial verweise ich auf diesen Blog, CSS-Tricks, wo der hervorragende Chris Coyier Muster erklärt und veranschaulicht, die wir alle in unserer Arbeit anwenden können. Dann gibt es andere Blogs, Bücher, Artikel, Stack Overflow-Antworten, diverse Ressourcen und Ähnliches – mehr Tutorials im Internet, als wir zu gebrauchen wissen.

Das Schreiben, Lesen und Teilen von Tutorials ist eine unverzichtbare Praxis, besonders hervorragend, weil Tutorials beim Teilen lehren. Sie bieten jedoch Praktiken, die wir reproduzieren können, anstatt Werkzeuge, die wir wiederverwenden können: Sie verbreiten Wissen, nicht Hilfsmittel.

Hilfsmittel

Das wiederverwendbare generische Hilfsmittel, die Idealkonstituente von Scut, ist eine Art Erweiterung des Tutorials. Es stellt sich heraus, dass viele (wenn nicht die meisten) der Styling-Tricks, Tipps und Best Practices, über die wir lesen oder schreiben, in wiederverwendbare Hilfsmittel abstrahiert werden können.

Als feines Modell dessen, was ich unter „Hilfsmittel“ verstehe, betrachten Sie die vielen Funktionen von Underscore, dem JavaScript-„Utility-Belt“ – und natürlich seinen Nachfolger Lodash (für diesen Artikel nehmen Sie bitte einfach an, dass „Underscore“ = „Underscore oder Lodash, was immer Sie bevorzugen“). Lassen Sie mich erklären: Ich habe Eloquent Javascript, von Marijn Haverbeke gelesen, und neulich bin ich auf ein gängiges, nützliches Muster gestoßen, das „reduce“- oder „fold“-Funktion genannt wird. In der Tradition der Tutorials erklärt Haverbeke, was eine „reduce“-Funktion tut und zeigt mir, wie ich eine erstelle. Ich könnte also meine eigene schreiben – wir könnten alle unsere eigene schreiben … Aber Underscore hat bereits eine „reduce“-Funktion, die wir alle verwenden können – und da die Funktion von Underscore den Open-Source-Gauntlet durchlaufen hat, wird sie besser sein als alles, was ich selbst produzieren könnte (obwohl ich nicht für Sie, in all Ihrer Weisheit, sprechen kann). So sehr ich vom gewonnenen Wissen profitiere, oft profitiere ich noch mehr, indem ich dieses Wissen mit einem Open-Source-Hilfsmittel kombiniere.

In der Welt des Style-Codes ist der beste Weg, eine solche Sammlung von Hilfsmitteln gemeinschaftlich zu erstellen, mit einer Präprozessor-Bibliothek. (Zwei wesentliche Vorteile von Präprozessor-Tools gegenüber Klassensammlungen sind (1), dass sie Variabilität eingebaut haben, und (2), dass sie nur unsere endgültige Stylesheet, die an den Client gesendet wird, beeinflussen, wenn sie tatsächlich verwendet werden.) Also: Hier kommt Scut ins Spiel.

Lassen Sie uns das JavaScript „reduce“-Beispiel von oben mit etwas Style-Code parallelisieren. Auf CSS-Tricks gibt es einen immens nützlichen Artikel, „Zentrierung im Unbekannten“, über das Zentrieren von Elementen mit unbestimmten Abmessungen. Der kniffligste Teil ist die vertikale Zentrierung. Nach dem Lesen dieses Artikels kenne ich die Methode, dem Elternelement `display: table;` und dem zu zentrierenden Kindelement `display: table-cell; vertical-align: middle;` zuzuweisen. Und das ist fantastisch: Es ist ein wertvoller Trick, den man lernen kann. Aber lassen wir es nicht dabei bewenden. Um dieses Tutorial zu erweitern und ein wiederverwendbares, teilbares Hilfsmittel zu erstellen, kann ich ein Sass-Mixin schreiben – so etwas wie dieses

@mixin vertically-center ($child: ".vcentered") {
  display: table;
  & > #{$child} {
    display: table-cell;
    vertical-align: middle;
  }
}

Wenden Sie dieses Mixin auf das Elternelement an; übergeben Sie den Selektor des zu zentrierenden Kindes als Argument (oder geben Sie diesem Kind die Standardklasse vcentered); und Sie haben die vertikale Zentrierung erreicht – und das durch die Erstellung eines Werkzeugs, das wiederverwendet und geteilt werden kann.

Im Wesentlichen tun wir mit CSS (über Sass) dasselbe, was Underscore mit JavaScript tut. Stellen Sie eine Menge dieser Hilfsmittel zusammen, stellen Sie sie der Open-Source-Community zur Verfügung, und Sie sollten am Ende eine hilfreiche Bibliothek erhalten.

(Übrigens bietet Scut drei verschiedene Methoden zur vertikalen Zentrierung, jede für verschiedene Kontexte geeignet.)

Ich werde unten mehr über die Methodik der Scut-Hilfsmittel erklären; aber zuerst fragen Sie sich vielleicht ...

Was ist mit bestehenden Präprozessor-Bibliotheken?

Wenn Sie ein regelmäßiger Leser von CSS-Tricks sind, haben Sie wahrscheinlich von Compass und Bourbon gehört. Es gibt andere Sass-Bibliotheken, und LESS und Stylus haben ihre eigenen hervorgebracht. Diese Bibliotheken existieren bereits, werden von starken Gemeinschaften unterstützt und funktionieren hervorragend; sie bieten „abstrakte, generische Muster und Praktiken“ – warum also eine weitere erstellen? Weil, nach allem, was ich gesehen habe, die bestehenden Präprozessor-Bibliotheken sich stark auf Vendor-Prefixing und die Unterstützung älterer Browser konzentriert haben, ohne viele wiederverwendbare Stilmuster anzubieten. (Einige, ja, aber nicht viele.) So wertvoll sie auch sind, sie sind auch, wie alles unter der Sonne, begrenzt.

Ihre Einschränkungen fielen mir auf, als ich anfing, Autoprefixer zu verwenden. (Wenn Sie das noch nicht getan haben, empfehle ich Ihnen, Andrey Sitniks Gastbeitrag auf CSS-Tricks zu lesen.) Ich hatte Compass ausprobiert und Bourbon regelmäßig verwendet; aber mit meinem Vendor-Prefixing, das Autoprefixer erledigt, schienen Compass und Bourbon nicht mehr sehr nützlich. Sie boten ein paar Helfer, die ich ab und zu aufrief, aber nicht regelmäßig.

Ich begann mich zu fragen, wofür sonst eine Präprozessor-Bibliothek gut sein könnte. Und das führte zu der Idee hinter Scut – einer Präprozessor-Bibliothek, die Vendor-Prefixing ignoriert, um sich ausschließlich auf abstrakte Styling-Muster zu konzentrieren.

Die Prinzipien und Zwecke von Scut

Welche Probleme lösen Scut-Hilfsmittel?

Scut-Hilfsmittel sollten die wichtigsten Vorteile von CSS-Präprozessoren verkörpern. Ich werde meine Favoriten auflisten.

Die wichtigsten Vorteile des CSS-Präprozessors – die auch die wichtigsten Vorteile des Scut-Hilfsmittels sind

• Es hilft mir, Wiederholungen zu vermeiden. Anstatt denselben Code an verschiedenen Stellen einzugeben, verwende ich ein Mixin, Extend, eine Funktion oder eine Variable, und mein Code wird weniger mühsam zu tippen; genauer – weniger anfällig für Tippfehler und unbeabsichtigte Variationen; und einfacher zu ändern und zu warten – da jeder wichtige Teil nur an einer Stelle liegt.
• Es hilft mir, Code zu organisieren, indem zusammengehörige Regeln in benannte Muster gruppiert werden – so dass ich anstelle von verworrenen Listen verschiedener Regeln, die auf unterschiedliche Weise zum Erscheinungsbild einer Komponente beitragen, sehe, welche Regeln sich auf welche spezifischen Effekte beziehen.
• Es hilft mir, Code wiederzuverwenden (wie oben erklärt).

Zusätzlich sollte das Muster, das ein Scut-Hilfsmittel implementiert, unter einem oder mehreren der folgenden Probleme leiden – und das Hilfsmittel sollte dieses Problem natürlich lösen:

1. Das Muster ist unintuitiv

Die erforderlichen CSS-Regeln erklären sich nicht von selbst. Es steckt eine Art Trick dahinter: Sie müssen initiiert worden sein, um den Code zu entschlüsseln. Da es einen Trick gibt, ist das Muster schwer zu merken. Es sei denn, Sie haben die Operation bereits hundertmal ausgeführt, müssen Sie wahrscheinlich Anleitungen auf dem Blog von jemandem nachschlagen; und selbst dann müssen Sie etwas nachdenken, experimentieren und tweaken, um es wieder richtig hinzubekommen.

Zur Veranschaulichung: Sie möchten vielleicht ein Element mit fließenden Abmessungen und einem festen Seitenverhältnis erstellen – sagen wir, 16/9. Nach einiger Suche haben Sie eine funktionierende Methode gefunden – aber Sie sehen vielleicht nicht, warum, nur durch das Betrachten des CSS.

.parent-element {
  overflow: hidden;
  position: relative;
}
.parent-element:before {
  content: "";
  display: block;
  height: 0; /* Huh? */
  padding-top: 56.25%; /* Wha? */
}
.parent-element > .child-element {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; /* Filling a container with zero height? */
}

Verwenden Sie stattdessen ein Scut-Mixin, und ein Blick auf Ihren Code ergibt Sinn.

.parent-element {
  @include scut-ratio-box(16/9, ".child-element");
}

Das Mixin organisiert und benennt das Muster – und spart Ihnen natürlich auch die Wiederholung des komplizierten Durcheinanders, wenn Sie woanders ein anderes Verhältnis-Box benötigen.

Betrachten Sie als weiteres Beispiel den berühmten CSS-Dreieck. Ohne Erklärung ist der erforderliche Style-Code obskur. Um ein blaues rechtwinkliges Dreieck mit 50 Pixel Höhe und 50 Pixel Breite zu erstellen

.triangle-right {
  width: 0; 
  height: 0; /* A shape with no dimensions? */
  border-top: 25px solid transparent; /* Why 25px here? */
  border-bottom: 25px solid transparent; /* Who needs invisible borders? */
  border-left: 50px solid blue; /* My right-pointing triangle is a left border? */
}

Der Trick ist alt und ehrwürdig und gut in Tutorials im Web dokumentiert. (Chris Coyier hat kürzlich eine clevere Animation erstellt, um zu erklären, wie und warum es überhaupt funktioniert.) Vielleicht haben Sie also einiges gelesen, Sie verstehen es, Sie führen es selbst durch. Trotz Ihrer Brillanz sollte der Vorteil eines guten Mixins klar sein, um den obigen Code in eine einzige verständliche Zeile zu verwandeln.

.triangle-right {
  @include scut-triangle(right, 50px, blue);
}

Und was ist, wenn Sie eine komplexere Form erstellen möchten, die mehrere Dreiecke beinhaltet – Dreiecke, die selbst etwas komplizierter sind? Dann wird das Mixin noch wertvoller.

2. Das Muster verdient eine Kurzform

Das Muster mag einfach genug sein, um es selbst zu schreiben – nicht kompliziert, durchaus intuitiv – aber es besteht aus einer Reihe von Regeln, die nützlich und regelmäßig zu einer benannten Kurzform gruppiert werden können.

(Natürlich integriert reines CSS bereits einige Kurzformen. Scut fügt nur weitere hinzu.)

Zum Beispiel enthält Scut einige Positionierungs-Mixins: anstatt –

position: absolute;
top: 1em;
right: 2em;
bottom: 3em;
left: 4em;

– können Sie scut-absolute verwenden und schreiben –

@mixin scut-absolute(1em 2em 3em 4em)

3. Das Muster beinhaltet wichtige Best Practices

Sie denken vielleicht, Sie wissen, wie es selbst geht – aber es sei denn, Sie sind eingeweiht und haben alles Richtige gelesen, tun Sie es vielleicht nicht auf die beste Weise. Und selbst wenn Sie einst, in Ihrer Blütezeit, den besten Weg kannten, haben Sie vielleicht inzwischen einige spielverändernde Innovationen vergessen oder verpasst.

Nichts ist vergleichbar mit einer Open-Source-Bibliothek, um dieses Problem zu lösen. Tatsächlich sind Best Practices einer der Bereiche, in denen bestehende Präprozessor-Bibliotheken ziemlich stark sind. Scuts Best-Practice-Hilfsmittel – wie scut-font-face, scut-clearfix und scut-hd-bp (für auflösungsbasierte Media Queries) – ähneln einigen Mixins, die Sie in Bourbon und Compass finden werden.

4. Das Muster ist extrem verbreitet und ein wenig nervig

Sie verwenden das Muster konsequent – jedes Projekt, meist mehrmals pro Projekt. Und jedes Mal murmelt etwas in Ihrem Geist „Schon wieder?“ und eine dunkle psychische Wolke zieht über Ihre psychische Sonne, eine flüchtige Erkenntnis, dass Sie ein paar Tastenanschläge dem Tod näher sind.

Wenn ich einen Pfennig für jede Mal hätte, wenn ich margin, padding und list-style-type bei einer ungestylten Liste nullen würde – O! die Sandwiches, die ich kaufen könnte – Also waren einige der ersten Hilfsmittel von Scut scut-list-unstyled und seine üblichen Variationen, scut-list-inline und scut-list-floated, unten abgebildet (mit verschiedenen „Skins“ angewendet, um zu demonstrieren, wie ein abstraktes Hilfsmittel in allen Arten von Designsituationen angewendet werden kann).

Wie erstellt man ein Scut-Hilfsmittel?

Kurz gesagt: maximieren Sie die Wiederverwendbarkeit. Wiederverwendbarkeit ist das, was ein bibliotheksfähiges Hilfsmittel von einem projektspezifischen unterscheidet.

Integrieren Sie ausreichende Details zur Implementierung des Musters, aber nicht mehr. Das Hilfsmittel allein sollte keine passable Komponente ergeben. Nochmals, Scut geht nicht darum, gut konstruierte, fertige Designs weiterzugeben: es geht darum, die Konstruktion und Fertigstellung von einzigartigen Designs zu erleichtern.

Verwenden Sie Argumente, um typische Variationen des Themas zu ermöglichen. Wenn immer möglich, fügen Sie konservative Standardwerte für diese Argumente hinzu – damit Benutzer nicht jedes Mal jedes Argument eingeben müssen – und ordnen Sie diese Argumente in der Reihenfolge an, in der sie wahrscheinlich geändert werden. Verwenden Sie zusätzlich @content-Blöcke, wenn sie sinnvoll sind, wenn Sie regelmäßige Anpassungen erwarten, die nicht in Argumente passen.

Namespace, um Konflikte mit anderen Bibliotheken und projektspezifischem Code zu vermeiden. Scut fügt allen seinen Teilen ein Präfix scut- hinzu. Auf diese Weise können wir ein „clearfix“-Hilfsmittel in Scut einbinden, ohne uns Sorgen machen zu müssen, dass es mit Bourbon- oder Compass-Clearfixes (die nicht namenskapselt sind) kollidiert. Und wir können generische Hilfsnamen wie „size“ (scut-size) und generische Variablennamen wie „circle“ (scut-circle) verwenden, ohne das natürliche Gleichgewicht zu stören.

Zuletzt: dokumentieren Sie gründlich, dokumentieren Sie gut. Ich versuche, das mit Scuts Dokumentation sehr gut zu machen – und ich würde natürlich Ihren Input und Rat schätzen. Wir alle waren schon frustriert von Dokumentation – wir alle kennen diesen Schmerz – also erkennen wir alle, dass die effektive Wiederverwendbarkeit eines Werkzeugs direkt mit der Qualität seiner Dokumentation zusammenhängt.

Nun zu einigen Einwänden

Ich benutze kein Sass

Was auch immer Ihr Workflow ist, welche Entscheidungen Sie auch getroffen haben, gute oder schlechte, Scut kann wahrscheinlich helfen, zumindest ein wenig. Wenn Sie kein Sass verwenden, können Sie sich trotzdem den Open-Source-Code ansehen und ihn entweder portieren (zu Ihrem Präprozessor Ihrer Wahl) oder ihn zusammen mit der Dokumentation von Scut als eine Reihe von Mini-Tutorials, eine Art Style-Pattern-Referenz, lesen.

Ich liebe OOCSS und kann nicht zwei Herren dienen

Object-Oriented CSS (OOCSS) und Scut lösen ähnliche Probleme mit ähnlichen Lösungen: nämlich erweiterbare Muster (oder „Objekte“). Aber sie sind keineswegs dasselbe. Vielleicht sind Sie ein OOCSS-Fan und halten all diese Mixins und Extends für ineffizienten Unsinn. Sie wollen eine „clearfix“-Klasse, keine Mixin, die Code dupliziert, oder eine Menge von `@extend`-Direktiven, die Ihr kompilierter CSS verunreinigen. Sie möchten Ihre Dreiecke mit Klassenlisten wie triangle triangle-large triangle-down triangle-red erstellen, nicht ein Dreieck-Mixin, das mehrmals mit unterschiedlichen Argumenten aufgerufen wird.

Nun, das ist in Ordnung. Es gibt keinen Grund, hier über die Vorzüge von Präprozessoren gegenüber klassenlastigen Codierungsstandards, semantischen gegenüber präsentationsbezogenen Klassennamen usw. zu streiten, denn Scut schließt die OOCSS-artige Codierung oder keinen anderen Stil aus: rufen Sie einfach die Hilfsmittel von Scut bei Bedarf auf, um Klassen für Ihre Objekte und deren Erweiterungen zu erstellen.

Einige Scut-Hilfsmittel gefallen mir nicht

Lassen Sie mich wissen, was geändert werden muss (erstellen Sie ein Issue auf Github), und wir können gemeinsam daran arbeiten, ein besseres Scut zu entwickeln.

Denken Sie auch daran, dass einige der aktuellen Dienstprogramme experimenteller sind als andere. Während Scut durch seine instabile Jugend (v0.x.x) stolpert, suche ich nach Mitarbeitern, die daran interessiert sind, herauszufinden, was funktioniert und was nicht, welche Dienstprogramme die Codebasis eines Projekts verbessern und welche es kryptischer und schwieriger zu warten machen könnten.

Ich glaube, diese ganze Idee ist dumm

Auch hier können Sie mir gerne sagen, was Sie anders machen würden. Zeigen Sie mir, wie es geht. Oder Sie können getrennte Wege gehen, etwas tun, das Ihnen Spaß macht, um sich wieder aufzuheitern – essen Sie einen Kuchen, fahren Sie Fahrrad – und vergessen Sie, dass Sie das jemals gelesen haben.

Neugierig? Überzeugt? Verwirrt? Versuchen Sie, Scut zu verwenden und dazu beizutragen

Ich hoffe, ich habe bisher genug gesagt, um Sie davon zu überzeugen, sich Scut anzusehen, vielleicht ein wenig damit herumzuspielen – oder sogar, traue ich mich zu wünschen, beizutragen.

Wenn Sie bereit für einen Testlauf sind, erfahren Sie in der Dokumentation von Scut, wie Sie die Bibliothek installieren und anwenden. (Im Grunde verwenden Sie Bower oder laden Sie die neueste Version auf Github herunter und fügen sie dann mit @import in Ihr Sass ein. Ganz einfach.)

Und wenn Sie denken, dass Sie vielleicht etwas von Ihrer eigenen Brillanz zum Projekt beisteuern möchten, zögern Sie bitte nicht. Legen Sie los. Scut ist eine einfache Bibliothek, ein einfacher Open-Source-Beitrag – was besonders schön für diejenigen von uns sein könnte, die hauptsächlich in HTML und CSS arbeiten und sich davor scheuen, sich in andere Github-Projekte zu stürzen. Scut geht darum, Ihre Arbeit, meine Arbeit und die Arbeit anderer Entwickler *einfacher* zu machen, vielleicht sogar ein wenig *besser*; Tutorials in wiederverwendbare Dienstprogramme zu erweitern; Best Practices zu fördern; und gute Ideen zu teilen – Ziele, denen wir zustimmen können. Ich hoffe, Sie finden es ein lohnenswertes Experiment.