Verwenden von PostCSS zusammen mit Sass, Stylus oder LESS

() translation by (you can also view the original English article)

Machen Sie sich keine Sorgen, wenn Sie PostCSS verwenden möchten, aber Ihren bevorzugten Präprozessor immer noch lieben. Sie müssen sich nicht zwischen den beiden entscheiden – Sie können sie direkt nebeneinander verwenden.

Es gibt mehrere PostCSS-Plugins, die Präprozessoren sehr gut ergänzen, da sie Ihrem Workflow Funktionen hinzufügen, die ansonsten unmöglich oder zumindest schwieriger wären, wenn Sie nur einen Präprozessor verwenden.

Wir werden einige dieser kostenlosen Plugins ansprechen und dann Setup-Anleitungen durchgehen, um Ihnen zu zeigen, wie Sie PostCSS Seite an Seite mit Sass, Stylus oder LESS verwenden können.

Warum beides verwenden?

Bevor wir darauf eingehen, wie Sie Präprozessoren zusammen mit PostCSS verwenden können, werden wir ein wenig darüber sprechen, warum Sie dies tun möchten. Die kurze Antwort lautet: Zugang zu PostCSS-Plugins zu erhalten, deren Funktionalität Präprozessoren ergänzt. Um Ihnen zu zeigen, warum es sich lohnt, diese zu haben, gehen wir auf eine Handvoll Plugins ein, die mit Präprozessoren wirklich gut funktionieren.

Hinweis: Es ist möglich, ähnliche Endergebnisse zu erzielen, indem Sie Mixins und Funktionen in regulärem Präprozessor-Code verwenden, aber mit jedem der folgenden Beispiele wird der Prozess automatisch gehandhabt. Du schreibst dein CSS ganz normal und die Plugins kümmern sich um alles für dich, ohne Funktionen zum Aufrufen, keine einzuschließenden Mixins oder zu übergebende Argumente.

autoprefixer

Es wurden viele Präprozessor-Mixins geschrieben, um das Einfügen von Herstellerpräfixen zu handhaben. Zum Beispiel könnten Sie @include box-sizing(border-box); aus der Compass-Bibliothek, um box-sizing-Regeln mit Präfix des Herstellers auszugeben.

Das Problem, sich auf Mixins für Anbieterpräfixe zu verlassen, ist:

Sie müssen zuerst wissen, dass eine Eigenschaft Präfixe benötigt, bevor Sie sich entscheiden können, ein Mixin dafür bereitzustellen.
Sie müssen den Namen des zugehörigen Mixins und dessen Verwendung kennen.
Sie müssen im Auge behalten, wann für jede Eigenschaft keine Anbieterpräfixe mehr erforderlich sind (ich weiß, dass ich die box-sizing viel zu lange vorangestellt habe ...)

Autoprefixer beseitigt diese Bedenken, indem der Prozess der Anbieterpräfixierung automatisch durchgeführt wird. Autoprefixer scannt Ihr CSS, vergleicht es mit Daten von CanIUse.com und fügt dann die erforderlichen Präfixe hinzu.

Lesen Sie mehr über Autoprefixer unter: https://github.com/postcss/autoprefixer

rtlcss

Das Generieren von Standard- und RTL-Stylesheets (von rechts nach links) aus einer einzigen Quelle wurde ebenfalls mit Präprozessoren durchgeführt, erfordert jedoch normalerweise die Verwendung mehrerer Mixins und/oder das Interpolieren von Variablen in Ihrem Code an mehreren Stellen. Anstatt beispielsweise margin-left: 1rem; zu schreiben. Sie müssen möglicherweise margin-#{dir}: 1rem; schreiben oder @include margin-left( 1rem );.

Mit dem rtlcss-Plugin von Mohammad Younes müssen Sie jedoch keine Mixins oder Variableninterpolation verwenden, Sie schreiben einfach Ihr Stylesheet wie gewohnt und das Plugin findet alle Instanzen oder "rechts" oder "links" und tauscht sie aus. Also margin-left: 1rem; wird automatisch margin-right: 1rem; ohne dass Sie dafür einen speziellen Code schreiben müssen.

Lesen Sie mehr über rtlcss unter: https://github.com/MohammadYounes/rtlcss

postcss-colorblind

Mit dem postcss-colorblind Plugin von Brian Holt können Sie automatisch verschiedene Versionen Ihres Stylesheets generieren, die Ihnen aus erster Hand zeigen, wie Ihr Design für eine Person mit Farbenblindheit aussehen würde. Es kann acht verschiedene Arten von Farbenblindheit simulieren und hilft Ihnen dabei, ein wirklich solides Verständnis dafür zu bekommen, wie zugänglich Ihre Farbschemata sind.

Dies ist ein Beispiel für eine Funktionalität, die Sie wirklich in PostCSS finden müssen, da sie für Präprozessoren sehr schwierig zu erreichen wäre.

Lesen Sie mehr über postcss-colorblind unter: https://github.com/btholt/postcss-colorblind

postcss-svgo

Mit dem postcss-svgo-Plugin von Ben Briggs können Sie Inline-SVG-Code freihändig optimieren. Zum Beispiel dies:

background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

Kann auf weniger als die Hälfte des Codes reduziert werden:

1	background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

Lesen Sie mehr über postcss-svgo unter: https://github.com/ben-eb/postcss-svgo

cssnano

Während Präprozessoren Leerzeichen und Kommentare entfernen können, kann das cssnano-Paket von Ben Briggs alle Arten von Optimierungen über diese beiden Schritte hinaus durchführen. Wir behandeln cssnano ausführlich im Tutorial For Minification and Optimization.

Lesen Sie mehr über cssnano unter: https://github.com/ben-eb/cssnano

postcss-font-magician

Das postcss-font-magician-Plugin von Jonathan Neal macht das Hinzufügen benutzerdefinierter Schriftarten so einfach wie die Verwendung normaler Schriftarten. Sie müssen keine Mixins verwenden, fügen Sie einfach wie gewohnt eine font-family-Regel hinzu:

1	body {
2	font-family: "Alice";
3	}

...und das Plugin übernimmt die vollständige @font-face-Generierung für Sie:

@font-face {
   font-family: "Alice";
   font-style: normal;
   font-weight: 400;
   src: local("Alice"), local("Alice-Regular"),
        url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
        url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
        url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff")  format("woff"),
        url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf")   format("truetype")
}

body {
  font-family: "Alice";
}

Lesen Sie mehr über postcss-font-magician unter: https://github.com/jonathantneal/postcss-font-magician

Projektaufbau

Im Folgenden finden Sie sechs Setup-Anleitungen: eine Gulp- und Grunt-Anleitung für jeden wichtigen Präprozessor. Sie müssen nicht alle sechs lesen, Sie können einfach direkt zum Handbuch für Ihren bevorzugten Präprozessor und Build-Tool springen. Wenn Sie sich nicht sicher sind, ob Sie Gulp oder Grunt verwenden sollen, ist Gulp definitiv die einfachere Wahl für dieses Tutorial.

Unabhängig davon, welcher Anleitung Sie folgen, müssen Sie mit einem leeren Gulp- oder Grunt-Projekt beginnen. Sie können in den vorherigen Tutorials lesen, wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten

beziehungsweise.

Wenn Sie Ihr Projekt jedoch nicht manuell von Grund auf neu einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren. Führen Sie dann mit einem Terminal oder einer Eingabeaufforderung, die auf den Ordner zeigt, den Befehl npm install aus.

Installieren Sie PostCSS-Plugins in Ihrem Projekt

Nachdem Sie ein leeres Projekt für einen der folgenden Abschnitte eingerichtet haben, müssen Sie auch zwei PostCSS-Plugins installieren: Autoprefixer und cssnano. Sie können dies tun, indem Sie den Befehl ausführen:

1	npm install autoprefixer cssnano --save-dev

Wir werden diese beiden Plugins verwenden, um zu testen, ob PostCSS und Ihr Präprozessor wie erwartet zusammenarbeiten.

Vorverarbeitung vor PostCSS

Die erste Regel bei der Verwendung eines Präprozessors mit PostCSS lautet, dass Sie diesen Präprozessor immer zuerst ausführen sollten. Dies liegt daran, dass Sie keine präprozessorspezifische Syntax in Ihrem Code haben möchten, die ein PostCSS-Plugin ersticken könnte, und Sie möchten auch nicht, dass PostCSS Änderungen an Ihrem Code vornimmt, die verhindern könnten, dass ein Präprozessor wie erwartet ausgeführt wird.

PostCSS-Plugins und „PostCSS-Testcode“

Für jeden der von uns eingerichteten Präprozessoren lassen wir sie autoprefixer und cssnano ausführen, nachdem der Präprozessor seine Kompilierung abgeschlossen hat. In jedem Fall müssen wir Testcode hinzufügen, damit diese beiden Plugins funktionieren.

Wenn Sie eine Anweisung sehen, die Sie zum Hinzufügen Ihres PostCSS-Testcodes auffordert, fügen Sie dies der Präprozessor-Quelldatei, an der Sie gerade arbeiten, hinzu, um das Wiederholen desselben Codes in jedem der folgenden Abschnitte zu vermeiden:

.css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
    /* cssnano will remove this comment */
	display: flex;
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 2rem;
	margin-left: 1.5rem;
	margin-right: 2.5rem;
	font-weight: normal;
	padding: 1.75rem;
	width: calc(50rem - (2 * 1.75rem));
}

Bei Erfolg wird Ihr kompilierter Code in jedem Fall wie folgt aussehen:

1	.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Hinweis: Die Verwendung von Flexbox wurde automatisch mit einem Präfix versehen, und cssnano hat mehrere Optimierungen des Codes durchgeführt. Wir verwenden denselben Code zum Testen von cssnano wie im vorherigen Tutorial zur Minimierung und Optimierung. Einzelheiten zu den durchgeführten Optimierungen finden Sie daher im Abschnitt „cssnano“.

1. Sass + PostCSS

Da Sie bereits mit Node.js arbeiten, um Gulp oder Grunt und PostCSS auszuführen, können Sie Sass am einfachsten über LibSass verwenden. Dies ist auch erheblich schneller als Ruby Sass. Wir werden LibSass über die Module gulp-sass oder grunt-contrib-sass bereitstellen.

Einrichtung über Gulp

Installieren Sie das Modul gulp-sass in Ihrem Projekt mit npm install gulp-sass --save-dev.

Jetzt können Sie Ihr Gulpfile auf Folgendes aktualisieren:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.scss')
		.pipe(sass().on('error', sass.logError))
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Lassen Sie uns aufschlüsseln, was wir vom Standard-Starter-Gulpfile geändert haben:

Variablen zum Laden von gulp-sass, autoprefixer und cssnano hinzugefügt
autoprefixer und cssnano-Variablen zum processors-Array hinzugefügt
Die Dateierweiterung der Quelldatei, die wir zu ".scss" anstelle von ".css" kompilieren, wurde bearbeitet
Eine neue pipe()-Zeile, .pipe(sass()..., hinzugefügt, um den Sass zu verarbeiten, wobei darauf zu achten ist, dass sie vor der Zeile platziert wird, die PostCSS verarbeitet

Jetzt können wir einige Tests durchführen, um sicherzustellen, dass sowohl Sass als auch PostCSS wie erwartet kompiliert werden.

Präprozessor testen

Benennen Sie Ihre vorhandene Datei „src/style.css“ in „src/style.scss“ um und fügen Sie den folgenden Testcode hinzu:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Führen Sie gulp css aus und Sie sollten eine neue Datei „style.css“ in Ihrem Ordner „dest“ mit dem Inhalt sehen:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

PostCSS testen

Fügen Sie nun den zuvor in diesem Tutorial bereitgestellten PostCSS-Testcode zu Ihrer Datei „style.scss“ hinzu.

Führen Sie Ihren gulp css-Befehl aus und Sie sollten den richtigen Code in Ihrer Datei „dest/style.css“ sehen:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Einrichtung über Grunt

Installieren Sie in Ihrem neuen Grunt-Projekt das Modul grunt-contrib-sass mit npm install grunt-contrib-sass.

Fügen Sie dann eine grunt.loadNpmTasks()-Funktion dafür unter der vorhandenen hinzu, die Sie für PostCSS haben:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-sass');

Sie müssen nun eine neue Aufgabe für die Verarbeitung von Sass einrichten. Nach dieser Zeile:

1	grunt.initConfig({

...aber vor der bestehenden postcss-Aufgabe fügen Sie diesen Code hinzu:

    sass: {
      dist: {
        files: {
          'src/style.css': 'src/style.scss'
        }
      }
    },

Jetzt registrieren wir eine Aufgabe, die Sass und dann PostCSS ausführt. Fügen Sie nach der gerade eingefügten Funktion grunt.loadNpmTasks() Folgendes hinzu:

1	grunt.registerTask('css', ['sass', 'postcss']);

Präprozessor testen

Um Ihr Setup zu testen, benennen Sie Ihre vorhandene Datei „src/style.css“ in „style.scss“ um. Fügen Sie diesen Sass-Code hinzu:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Führen Sie den Befehl grunt css aus und Sie sollten eine neue Datei sehen, die in Ihrem "dest" -Ordner namens "style.css" erstellt wurde und diesen Code enthält:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333; }

PostCSS einrichten

Wir werden jetzt unsere Autoprefixer- und cssnano-Plugins zum Laufen bringen. Aktualisieren Sie das processors-Array Ihres Gruntfiles auf Folgendes:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

PostCSS testen

Fügen Sie den PostCSS-Testcode zu Ihrer Datei „style.scss“ hinzu, führen Sie den Befehl grunt css erneut aus und Sie sollten feststellen, dass Ihre neu kompilierte Datei „dest/style.css“ jetzt den korrekten Code mit automatischem Präfix und optimiertem Code enthält.

2. Stylus + PostCSS

Stylus und PostCSS arbeiten dank der Entwicklung des PostStylus-Pakets von Sean King, das die Verarbeitung von Stylus und PostCSS kombiniert, besonders gut zusammen. Wenn Sie ein Stylus-Entwickler sind, können Sie einfach PostStylus zu Ihrem Kompilierungsprozess hinzufügen und haben sofort Zugriff auf die Verwendung von PostCSS-Plugins als Teil Ihres Workflows.

PostStylus: https://github.com/seaneking/postStylus

Einrichtung über Gulp

Wenn Sie das vorgefertigte Gulpfile aus dem Starterprojekt verwenden, werden Sie feststellen, dass es das gulp-postcss-Plugin verwendet. Dies ist eigentlich nur da, da es für die Sass- und LESS-Setup-Prozesse benötigt wird, aber für Stylus brauchen wir es nicht, da wir stattdessen PostStylus als Compiler verwenden.

Sie können es mit npm uninstall gulp-postcss --save-dev aus Ihrem Projekt entfernen und diese Zeile aus Ihrem Gulpfile löschen:

1	var postcss = require('gulp-postcss');

Jetzt können wir die beiden Plugins installieren, die wir für die Stylus- und PostCSS-Kompilierung benötigen, indem wir den Befehl ausführen:

1	npm install gulp-stylus poststylus --save-dev

Aktualisieren Sie Ihr Gulpfile, um:

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var poststylus = require('poststylus');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.styl')
		.pipe(stylus({
			use: [
				poststylus(processors)
			]
		}))
		.pipe(gulp.dest('./dest'));
});

Das haben wir oben gemacht:

Variablen zum Laden von gulp-stylus, poststylus, autoprefixer und cssnano hinzugefügt
autoprefixer und cssnano-Variablen zum processors-Array hinzugefügt
Die Dateierweiterung der Quelldatei, die wir zu ".styl" anstelle von ".css" kompilieren, wurde bearbeitet
Die .pipe()-Zeile, die .pipe(postcss(processors)) liest, wurde entfernt.
Ersetzt durch .pipe(stylus({..., um die Module gulp-stylus und poststylus so einzustellen, dass sie unsere Kompilierung verarbeiten

Präprozessor testen

Jetzt können wir die Kompilierung testen. Benennen Sie in Ihrem „src“-Ordner „style.css“ in „style.styl“ um und fügen Sie diesen Test-Stylus-Code hinzu:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Führen Sie den Befehl gulp css aus und Sie sollten eine Datei „style.css“ mit diesem Inhalt in Ihrem Ordner „dest“ sehen:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333;
4	}

PostCSS testen

Fügen Sie den zuvor bereitgestellten PostCSS-Testcode zu Ihrer Datei „style.styl“ hinzu und stellen Sie sicher, dass im eingefügten Code nur Tabulatoreinzüge enthalten sind, keine Leerzeichen.

Kompilieren Sie neu und überprüfen Sie, ob Sie die entsprechende Ausgabe in Ihrer Datei „dest/style.css“ haben.

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Einrichtung über Grunt

Wie beim Gulp-Projekt für Stylus ist der standardmäßige PostCSS-Compiler, der mit dem Starterprojekt geliefert wird, nicht erforderlich, da er nur für Sass- und LESS-Setup-Prozesse da ist. Sie können es mit npm uninstall grunt-postcss --save-dev aus Ihrem Projekt entfernen.

Jetzt können wir grunt-contrib-stylus und poststylus mit dem Befehl installieren:

1	npm install grunt-contrib-stylus poststylus --save-dev

Wir werden grunt-postcss nicht mehr verwenden, also suchen Sie diese Zeile:

1	grunt.loadNpmTasks('grunt-postcss');

Und ersetzen Sie es durch:

1	grunt.loadNpmTasks('grunt-contrib-stylus');

Da wir grunt-postcss nicht verwenden, bedeutet dies, dass wir die postcss-Aufgabe, die wir in grunt.initConfig({...}); definiert haben, nicht mehr benötigen. Löschen Sie diese Aufgabenkonfiguration und ersetzen Sie sie durch diese neue stylus-Aufgabe:

    stylus: {
      compile: {
        options: {
        },
        files: {
          'dest/style.css': 'src/style.styl'
        }
      }
    }

Präprozessor testen

Jetzt können wir die Kompilierung testen. Benennen Sie in Ihrem „src“-Ordner „style.css“ in „style.styl“ um und fügen Sie diesen Test-Stylus-Code hinzu:

$font-stack = Helvetica, sans-serif
$primary-color = #333

body
  font: 100% $font-stack
  color: $primary-color

Führen Sie den Befehl grunt stylus aus und Sie sollten eine Datei „style.css“ mit diesem Inhalt in Ihrem Ordner „dest“ sehen:

1	body{font:100% Helvetica,sans-serif;color:#333}

PostCSS einrichten

Um unsere PostCSS-Plugins zum Kompilierungsprozess hinzuzufügen, müssen wir zuerst diesen Code ganz oben in unserer Gruntdatei über der Zeile module.exports... einfügen:

1	var poststylus = function() {
2	return require('poststylus')(['autoprefixer', 'cssnano'])
3	};

Hier laden Sie alle PostCSS-Plugins, die Sie verwenden möchten, und nicht in ein processors-Array, wie Sie es von unseren anderen Tutorials gewohnt sind.

Suchen Sie dann das options-Objekt in der Stiftaufgabe und aktualisieren Sie es wie folgt:

1	options: {
2	use: [poststylus]
3	},

Dies weist grunt-contrib-stylus an, poststylus während der Kompilierung und seine Plugins zusammen mit ihm zu verwenden.

PostCSS testen

Fügen Sie den „PostCSS-Testcode“ zu Ihrer Datei „src/style.styl“ hinzu, führen Sie grunt stylus aus und Sie sollten den folgenden Inhalt in Ihrer Datei „dest/style.css“ sehen:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

3. LESS + PostCSS

Einrichtung über Gulp

Installieren Sie das gulp-less-Modul in Ihrem Projekt mit npm install gulp-less --save-dev.

Jetzt können Sie Ihr Gulpfile auf Folgendes aktualisieren:

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var less = require('gulp-less');

var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('css', function () {
    var processors = [
		autoprefixer,
		cssnano
	];
	return gulp.src('./src/*.less')
		.pipe(less())
		.pipe(postcss(processors))
		.pipe(gulp.dest('./dest'));
});

Lassen Sie uns aufschlüsseln, was wir vom Standard-Starter-Gulpfile geändert haben:

Variablen zum gulp-less Laden, autoprefixer und cssnano hinzugefügt
autoprefixer und cssnano-Variablen zum processors-Array hinzugefügt
Die Dateierweiterung der Quelldatei, die wir zu ".less" anstelle von ".css" kompilieren, wurde bearbeitet
.pipe(less()) hinzugefügt, um das LESS zu verarbeiten, wobei darauf zu achten ist, dass es vor der Zeile platziert wird, die PostCSS verarbeitet

Präprozessor testen

Jetzt können wir einige Tests durchführen, um sicherzustellen, dass sowohl LESS als auch PostCSS wie erwartet kompiliert werden.

Benennen Sie die vorhandene Datei „src/style.css“ in „src/style.less“ um und fügen Sie den folgenden Testcode hinzu:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Führen Sie gulp css aus und Sie sollten eine neue Datei „style.css“ in Ihrem Ordner „dest“ mit dem Inhalt sehen:

1	body{font:100% Helvetica,sans-serif;color:#333}

PostCSS testen

Fügen Sie nun zu Ihrer Datei „style.less“ den PostCSS-Testcode hinzu, der weiter oben in diesem Tutorial bereitgestellt wurde.

Führen Sie Ihren gulp css-Befehl aus und Sie sollten jetzt den richtigen Code in Ihrer Datei „dest/style.css“ sehen.

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Einrichtung über Grunt

Installieren Sie in Ihrem neuen Grunt-Projekt das grunt-contrib-less-Modul mit npm install grunt-contrib-less und fügen Sie dann eine grunt.loadNpmTasks()-Funktion dafür unter der vorhandenen Funktion für PostCSS hinzu:

1	grunt.loadNpmTasks('grunt-postcss');
2	grunt.loadNpmTasks('grunt-contrib-less');

Sie müssen nun eine neue Aufgabe für die Verarbeitung von LESS einrichten. Nach dieser Zeile:

1	grunt.initConfig({

...aber vor der bestehenden postcss-Aufgabe fügen Sie diesen Code hinzu:

    less: {
      production: {
        files: {
          'src/style.css': 'src/style.less'
        }
      }
    },

Jetzt registrieren wir eine Aufgabe, um LESS und dann PostCSS auszuführen. Fügen Sie nach der gerade eingefügten Funktion grunt.loadNpmTasks() Folgendes hinzu:

1	grunt.registerTask('css', ['less', 'postcss']);

Präprozessor testen

Um Ihr Setup zu testen, benennen Sie Ihre Datei „src/style.css“ in „style.less“ um. Fügen Sie diesen LESS Code hinzu:

@font-stack: Helvetica, sans-serif;
@primary-color: #333;

body {
  font: 100% @font-stack;
  color: @primary-color;
}

Führen Sie den Befehl grunt css aus und Sie sollten eine neue Datei sehen, die in Ihrem "dest" -Ordner namens "style.css" erstellt wurde und diesen Code enthält:

1	body {
2	font: 100% Helvetica, sans-serif;
3	color: #333333;
4	}

PostCSS einrichten

Jetzt fügen wir unsere PostCSS-Plugins zum Kompilierungsfluss hinzu. Aktualisieren Sie das processors-Array Ihres Gruntfiles auf Folgendes:

1	processors: [
2	require('autoprefixer')(),
3	require('cssnano')()
4	]

PostCSS testen

Fügen Sie den PostCSS-Testcode zu Ihrer Datei „style.less“ hinzu, führen Sie den Befehl grunt css erneut aus und Sie sollten feststellen, dass Ihre neu kompilierte Datei „dest/style.css“ jetzt den korrekten Code mit automatischem Präfix und optimiertem Code enthält:

body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

Im nächsten Tutorial

Als nächstes werden wir uns etwas ansehen, das Sie fast als eine andere Art der Vorverarbeitung betrachten könnten – die Verwendung von PostCSS für automatisch generierte BEM/SUIT-kompatible CSS-Klassen. Dieser Prozess macht die BEM/SUIT-Entwicklung viel einfacher und effizienter.

Wir sehen uns im nächsten Tutorial!