Zur Übersicht

SCSS, CSScomb und PHPStorm

Eine schnelle Einführung in CSScomb und wie man sich das Leben damit leichter machen kann

Artikelbild

Erst vor kurzem sind wir in der Firma von LESS auf SCSS umgestiegen. Den Grund für den Wechsel lieferte hauptsächlich Bootstrap v4 und die zusätzlich weite Verbreitung von SCSS.

Mit diesem Umstieg wollten wir auch gleichzeitig mehr Ordnung in unsere Arbeitsweise bringen. Dazu zählt eine einheitliche Code-Formatierung und eine "genormte" Reihenfolge von CSS-Properties. Um das zu erreichen, setzen wir aktuell auf CSScomb.

CSScomb ist ein Tool, welches bestehenden CSS/SCSS/LESS Code nach eigenen Wünschen formatiert und bereinigt. Auf der Website findet man einen interaktiven Wizard, der bei der Erstellung der gewünschten Codeformatierung hilft. Diese Konfiguration wird dann als .csscomb.json im jeweiligen Projekt abgelegt. Diese Datei ist bei uns im git mit eingecheckt. Ausführen kann man CSScomb im Terminal oder...

CSScomb in Kombination mit PHPStorm

Als Erstes installiert man CSScomb mit Hilfe von NPM:
npm install csscomb -g
Nach der Installation steht einem CSScomb im Terminal zur Verfügung.

Nun kann man CSScomb als "external tool" zu PHPStorm hinzufügen. Das geht wie folgt:

Zuerst öffnet man die Einstellungen und sucht nach "External tools"

Dort fügt man über das "+" ein neues Tool hinzu.

Nun benötigt man den Pfad für CSScomb. Diesen kann man ausfindig machen, indem man which csscomb im Terminal eingibt.

Diesen überträgt man in das Eingabefeld neben "Program".
Parameters: $FilePath$ --config $ProjectFileDir$/.csscomb.json
Parameters: $FilePath$
Working Directory: $FileDir$

UPDATE: CSSComb sucht automatisch in allen übergeordneten Ordnern nach einer Datei mit dem Namen .csscomb.json. Die Angabe des Config-Parameters ist somit nur notwendig, wenn man sich nicht an die Namenskonvention hält.

Nun steht CSScomb im Kontextmenü zur Verfügung.

Die Formatierung

Nun fehlt nur noch die CSSComb Konfiguration. Diese habe ich mit Hilfe des Wizards erstellen lassen und in mein Projektverzeichnis mit dem Namen .csscomb.json abgelegt.

Beim Anlegen des CSSComb-Tools in PHPStorm wird diese Konfiguration bereits als Parameter übergeben ($FilePath$ --config $ProjectFileDir$/.csscomb.json).

Die vorläufige Konfiguration für die allgemeine Formatierung sieht bei mir so aus:

(code lang: javascript)
{
"remove-empty-rulesets": true,
"always-semicolon": true,
"color-case": "lower",
"block-indent": " ",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": true,
"quotes": "single",
"sort-order-fallback": "abc",
"space-before-colon": "",
"space-after-colon": " ",
"space-before-combinator": " ",
"space-after-combinator": " ",
"space-between-declarations": "\n",
"space-before-opening-brace": " ",
"space-after-opening-brace": "\n",
"space-after-selector-delimiter": "\n",
"space-before-selector-delimiter": "",
"space-before-closing-brace": "\n",
"strip-spaces": true,
"tab-size": true,
"unitless-zero": true,
"vendor-prefix-align": true
}
(/code)

Nun möchte ich noch eine Reihenfolge für die CSS-Properties anlegen. Diese kann man über die "sort-order" Einstellung festlegen. Hier orientiere ich mich an der Reihenfolge von Bootstrap.

Wichtig ist hier, dass zusätzlich Variablen, Imports, Extends und Includes gesondert berücksichtigt werden. Diese müssen als Erstes in der sort-order angeführt werden, da diese mitunter an die falsche Stelle verschoben werden könnten:

(code lang: javascript)
{
...
"sort-order": [
"$import",
"$variable",
"$extend",
"$include",
...
]
}
(/code)

Vorher/Nachher

Hier sind nun die Resultate die CSScomb liefert:

Original
Output ohne Berücksichtigung von Variablen
Finales Ergebnis

Hier könnt ihr die für den Artikel verwendete .csscomb.json downloaden

Kommentare

comments powered by Disqus