Sass to CSS Wie man Whitespace beim Kompilieren beibehält

Wollten Sie schon immer die visuelle Struktur Ihrer Sass-Dateien beibehalten, wenn Sie CSS kompilieren, ohne dabei den Whitespace zu verlieren? In diesem kurzen Tipp zeige ich Ihnen wie!

Schneller Tipp

Dieser schnelle Tipp ist für diejenigen unter Ihnen, die Sass in eine "erweiterte" Form bringen müssen. Wenn Sie zu „komprimiert“ oder „minimiert“ kompilieren, ist die Frage nach Leerzeichen irrelevant.

Das Problem

Stellen Sie sich vor, Sie haben mehrere Sass-Partials, die wie folgt formatiert sind, einschließlich der leeren Zeilenumbrüche am unteren Rand:

/ ************************************************** ****************************** * * Teilweise. * *************************************************** **************************** / body font-size: 100%;  

Wenn Sie sie unter normalen Umständen zusammenstellen, erhalten Sie Folgendes:

/ ************************************************** ****************************** * * Teilweise. * *************************************************** **************************** / body font-size: 100%;  / ************************************************* ******************************* * * Teilweise. * ************************************************ **************************** / body font-size: 100%;  / ************************************************* ******************************* * * Teilweise. * ************************************************ **************************** / body font-size: 100%;  

Angenommen, Sie möchten Folgendes:

/ ************************************************** ****************************** * * Teilweise. * *************************************************** **************************** / body font-size: 100%;  / ************************************************* ******************************* * * Teilweise. * *************************************************** **************************** / body font-size: 100%;  / ************************************************* ******************************* * * Teilweise. * *************************************************** **************************** / body font-size: 100%;  

Die Lösung

Wir werden Dinge lösen, indem wir ein Grunt-Plugin namens Grunt-Replace verwenden. Weitere Informationen zum Einrichten und Ausführen von Grunt finden Sie in den folgenden Ressourcen:

• 

  Die Befehlszeile für Webdesign: Automatisierung mit Grunt

  In diesem Lernprogramm erfahren Sie, wie Task-Runner eingerichtet werden. In diesem Prozess wird auch ein Beispiel für das Einfügen von Skripts aus Bower-Paketen für…
• 

  Neuer Kurzlehrgang: Einrichten eines Pro-Front-End-Entwicklungsworkflows

  Möchten Sie einen effizienteren Workflow für Ihre Front-End-Entwicklung einrichten? Testen Sie unseren neuesten Kurs, Einrichten eines Pro-Front-End-Entwicklungsworkflows. Du wirst lernen…

Wir laden grunt-replace zusammen mit einigen anderen Abhängigkeiten in unsere package.json-Datei, wie im folgenden Ausschnitt dargestellt:

 "devDependencies": "grunt": "^ 1.0.1", "grunt-replace": "^ 1.0.1", "grunt-sass": "^ 2.0.0", "load-grunt-task": "^ 3.5.2"

Dann müssen wir in unserer grunt.js-Datei die Aufgabe implementieren:

 // Aufgabe: Ersetzen. Ersetzen Sie: css: Optionen: usePrefix: false, Muster: [Übereinstimmung: '/ ** /', Ersetzung: "], Dateien: ['css / styles.css': 'css / styles. css '// für einzelne Datei

Spiel

Wir wenden die Ersetzungsaufgabe an nach dem Wir haben unsere Sass-Datei zusammengestellt (überprüfen Sie die Quelldateien für weitere Details).

Beachten Sie die Muster Option, die Folgendes anzeigt:

Übereinstimmung: '/ ** /', Ersetzung: "

Dies weist Grunt an, die kompilierte Datei durchzusehen und Instanzen von zu finden / ** / und ersetzen Sie sie jeweils durch eine leere Zeichenfolge. Jetzt müssen wir nur noch unsere Sass-Partials durchgehen und diese platzieren / ** / Kommentare, wo immer wir Whitespace wollen, und überlassen Sie Grunt den Rest:

/ ************************************************** ****************************** * * Teilweise. * *************************************************** **************************** / body font-size: 100%;  / ** / / ** / / ** / / ** / / ** / / ** / / ** /

Fazit

Grunt-Replace ist eine wirklich nützliche Aufgabe, um häufig verwendete Zeichenfolgen zu finden und sie durch etwas anderes zu ersetzen, wenn Sie Grunt ausführen. In diesem Fall ist es das perfekte Werkzeug, um zu verhindern, dass Leerzeichen aus unserem kompilierten Sass entfernt werden. Wofür würden Sie es sonst verwenden??

Nützliche Ressourcen

• Grunzen ersetzen
• Schluck ersetzen