David Walsh über das Redesign mit Sass

David hat kürzlich seinen Blog neu gestaltet und eine Reihe von Gastbeiträgen für seine Website veröffentlicht. Wir haben uns für einen Crossover-Stil entschieden: Er schreibt einen Artikel für CSS-Tricks und ich schreibe einen Artikel für den David Walsh Blog. Er hat Sass in seinem Redesign verwendet und sein Artikel unten handelt von dieser Erfahrung. Ich benutze es schon fast ein Jahr, also ist mein Beitrag auf seiner Seite über diese Erfahrung.

Eine Website zu erstellen, ohne einen CSS-Präzessor zu verwenden, scheint eine schreckliche Entscheidung zu sein.  Selbst wenn es nur darum geht, ein paar Farben oder Elementabmessungen schnell zu ändern, oder sogar nur CSS-Dateien einfach zusammenzuführen und zu komprimieren, werden CSS-Präzessoren immer wichtiger.  Für die kürzliche Neugestaltung des David Walsh Blogs entschied ich, dass jetzt der richtige Zeitpunkt war, mich kopfüber in CSS-Präzessoren zu stürzen.  Hier sind ein paar Gedanken zu meiner Erfahrung, und hoffentlich lernen Sie dabei ein paar Tipps.

Die Entscheidung, „sassy“ zu sein

Es gibt nicht viel zu entscheiden, ob man ein Werkzeug wie Sass oder LESS verwenden möchte oder nicht, die Frage ist eher, welches verwendet werden sollte. Am Ende habe ich mich für Sass entschieden, weil

• meine Erfahrungen mit LESS … weniger als ansprechend waren; das Werkzeug scheint … weniger gepflegt zu sein
• ein Dienstprogramm wie Compass, eine Sammlung von Mixins mit einem Updater, ist unschätzbar wertvoll
• die extend() API großartig aussah
• das Einbetten von Media-Query-Stilen innerhalb eines Selektors die Organisation verbessert
• die Sprite-Generierung ein enormer Zeitsparer ist
• Chris Coyier es mir gesagt hat!

Wenn Sie einen Blog wie den David Walsh Blog oder CSS-Tricks verwalten, bietet das Erlernen eines neuen CSS-Dienstprogramms auch die perfekte Gelegenheit, über ein weiteres nützliches Thema zu schreiben.  Die Verwendung von Sass für dieses Projekt war offensichtlich die beste Wahl.

Nützliche Snippets

Hier sind ein paar der Sass-Snippets, die ich oft auf meiner Website verwendet habe

Hersteller-Präfixe

@mixin vendorize($property, $value) {
	-webkit-#{$property}: $value;
	-moz-#{$property}: $value;
	-ms-#{$property}: $value;
	-o-#{$property}: $value;
	#{$property}: $value;
}

Float Clearing

@mixin clear() {
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }
    &:after {
        clear: both;
    }
}

Offscreen Text

@mixin linkTextOffscreen() {
    text-indent: -9999px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    font-size: 0;
    text-align: start;
}

:hover, :active, :focus Styles

@mixin hoverActiveFocus($property, $value) {
    &:hover, &:active, &:focus {
        #{$property}: $value;
    }
}

Ich habe diese Mixins in meinem Code recht häufig verwendet. Einige meiner Snippets ahmen die von Compass bereitgestellte Funktionalität nach, aber ich mag es, die spezifischen Stile zu sehen, die von Mixins bereitgestellt werden.

Fehler, Fehler

Wie bei jedem Werkzeug, das man zum ersten Mal benutzt, habe ich einige Fehler gemacht.  Fehler sind aber gesund – man lernt daraus und schreibt darüber, damit andere nicht die gleichen Fehltritte machen.  Zu den Fehlern, die ich gemacht habe, gehören

• Verschachtelung == Blähung:  Der größte Fehler, den ich mit Sass gemacht habe, war bei weitem das Verschachteln von Stilen, wenn es nicht nötig war.  Zum Zeitpunkt der Veröffentlichung war meine Haupt-CSS-Datei ein zum Erbrechen verdauende 59 KB!  Ich arbeite immer noch daran, die Größe meiner Stile zu reduzieren, und das ist eine viel schwierigere Aufgabe, da die Website bereits gestartet ist, wegen…
• …Kollisionen der Spezifität:  Aufgrund meines Problems mit dem Verschachteln von Stilen, wenn es nicht nötig war, stieß ich auf eine Reihe von Spezifitätskonflikten, die meine CSS-Datei noch weiter aufblähten.  Als es um die CSS für Media Queries der Bildschirmgröße ging, musste ich alles als !important markieren.  Das ist eine unglaubliche Menge an CSS-Blähungen und Aufwand aufgrund der unsachgemäßen Verwendung der Sass-Selektor-Verschachtelung.
• Sprite-Generierung… zu spät:  Einer der Hauptgründe, warum ich mich für SASS entschieden habe, war, dass ich wusste, dass SASS die Sprite-Generierung verwaltet.  Was für ein Zeitsparer, oder?  Nun, nur solange man wusste, wie man sie überhaupt formatiert.  Mein Problem war, dass ich mein CSS mit normalen background-image-Deklarationen erstellt habe, ohne auf das gewünschte Format von SASS zu achten.  Ich ging dazu über, meine Sprites zu erstellen, nachdem ich das richtige Format kannte, und sagte: „WTF FML“.  Am Ende habe ich meine eigenen Sprites erstellt, weil ich mein SASS von Anfang an nicht richtig geschrieben habe.  Ein sehr ärgerlicher Fehler.
• Duplizieren von Compass-bereitgestellten Helfern:  Ich muss sie nicht zitieren… Ich bin mir mehr als sicher, dass ich die von Compass bereitgestellte Funktionalität dupliziert habe.  Ich werde wahrscheinlich später dafür bezahlen, wenn ich meinen Code nicht aktualisiere und mir der Browserfähigkeiten bewusst bleibe.

Tipps und letzte Eindrücke

Ich möchte jedem ein paar Tipps für den Einstieg in SASS mit auf den Weg geben und ein paar letzte Eindrücke zur Sass-Entwicklung teilen

• Trotz meiner Duplizierung von Sass-bereitgestellter Funktionalität und Verschachtelungsproblemen ist Sass ein unglaubliches Werkzeug, das in Verbindung mit Compass die ultimative verfügbare Tool+Update-Umgebung bietet.
• Wenn Sie Selektoren verschachteln, fragen Sie sich, ob dies wirklich notwendig ist.  Sicher, Verschachtelung ermöglicht auch eine bessere Codeorganisation, aber eine aufgeblähte Stylesheet lässt alle Ihre Benutzer leiden.
• Erstellen Sie Variablen für Ihre CSS-Animations-Eigenschaften, insbesondere Dauer und Verzögerung.  Eine konsistente Animationstaktung sorgt für optisch ansprechende UI-Effekte.
• Erstellen Sie Variablen für Block-Padding und verwenden Sie einfache Gleichungen ($blockPadding/2) für kleinere Blöcke.  Dies gewährleistet eine konsistente Elementabstands.
• Sie können Media Queries für Selektoren verschachteln, aber ich bevorzuge die Erstellung einer separaten Datei für mobile / Media-Query-spezifische Stile;  dies ermöglicht es mir, den gesamten Satz von mobilen Stilen auf einen Blick zu sehen.  Das Gleiche gilt für meine Druckstile.
• Ich habe diese Anleitungen verwendet, um Sass-Syntax-Highlighting zu Sublime Text 2 hinzuzufügen.
• Behalten Sie die Größe Ihrer CSS-Dateien während der Codierung im Auge und überprüfen Sie regelmäßig Ihre Verschachtelungsstrategie, um Style-Blähungen zu vermeiden.
• Nutzen Sie CSS-Animationen bestmöglich – sie können Ihnen auf lange Sicht viel JavaScript-Code ersparen.

Letztendlich bin ich mit meiner Entscheidung, Sass als meinen CSS-Präprozessor zu verwenden, unglaublich zufrieden.  Die Dokumentation ist hilfreich, Sie können in wenigen Minuten loslegen, und Compass ist in vielerlei Hinsicht ein unschätzbares Werkzeug.  Meine einzigen Probleme mit Sass waren selbst verschuldet und werden beim nächsten Mal leicht vermeidbar sein.  Geben Sie Sass eine Chance für Ihre nächste Website oder Neugestaltung – sein Nutzen ist unermesslich und wird sich für die Dauer Ihres Projekts auszahlen.