Sass mit node-sass (Node.js)

Beispiel Dateien

File:normalize.scss
File:skeleton.scss

Links

https://webdesign.tutsplus.com/tutorials/watch-and-compile-sass-in-five-quick-steps--cms-28275

Quickstart

Installation

• Node.js mit dem npm Paketmanager sollte installiert sein
• node-sass Installieren falls noch nicht vorhanden:

npm install node-sass

oder

npm install -D node-sass

Mit der -D Option schreibt npm die Abhängigkeit gleich in ein Package.json File wenn man das nutzen will (vorher mit npm init anlegen). Im Ordner node-modules werden auch die binaries abgelegt.

oder

npm install --save-dev node-sass

SCSS Files Kompilieren

node-sass --include-path sass INPUT_FILE.scss OUTPUT_FILE.css

Kommandos

How to use node-sass from Command line and npm scripts

General format:

$ node-sass [options] <input.scss> [output.css]
$ cat <input.scss> | node-sass > output.css

Beispiele: Eine Datei von Hand kompilieren

$ node-sass styles.scss styles.css 

Eine Datei im scss/ Unterordner nach css/ kompilieren

node-sass --include-path sass scss/styles.scss css/styles.css

Alle Dateien in einem mySass Ordner von Hand in einen myCss Ordner kompilieren

$ node-sass mySass/ -o myCss/ 

Watcher für Einzeldatei in Unterordnern

 node-sass --watch --include-path sass scss/styles.scss css/styles.css

Watcher der alle Dateien in einem Ordner bei Änderungen automatisch kompiliert

$ node-sass -w sass/ -o css/ 

Tutorials

Tutorial: Kurz und schmerzlos

Eine Praxistaugliches Beispiel mit einer Variante die ohne nodeamon und ohne Package.json auskommt

Basis

Im Projektordne Basisstruktur anlegenr:

mkdir scss css js images
npm init
npm install -D node-sass

Installiert node-sass mit allen tools im Projektordner unter node-modules (wir verwenden also node-sass lokal)

In Package.json Compiler Shortcut eintragen:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path sass scss/styles.scss css/styles.css"
  },

touch scss/styles.scss

Unser zentrales scss File.

Abhängige scss Files werden später über @import nachgeladen. Die .scss Dateien kommen alle unter /scss styles.scss

@import "normalize.scss";
@import "skeleton.scss";

Ausführen mit:

npm run sass-compile

Sass Watcher hinzufügen

Im Package.json bauen wir Varianten um Watcher hinzuzufügen. Am besten gleich noch einen um den ganzen Ordner zu kompilieren. I.d.R. werden wir aber nur das Skript sss-watch brauchen die -folder Beispiele dienen nur zur Illustration

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "sass-compile": "node-sass --include-path sass scss/styles.scss css/styles.css",
    "sass-compile-folder": "node-sass scss/ -o css/",
    "sass-watch":"node-sass --watch --include-path sass scss/styles.scss css/styles.css",
    "sass-watch-folder": "node-sass --watch scss -o css"
  },

Tutorial: Ein Projekt mit SASS und dem NodeJS Server

Ziel ist ein einfach aber effektiv zu handelndes Projekt ohne die Nutzung von gulp.js nur mit npm Skripten.

Hinweis: In diesem Beispiel wird als Watcher der nodeamon eingesetzt. Im nächsten Beispiel nutzen wir eine noch einfachere Version welches einfach node-sass direkt zum Watchen nutzt.

Basis Struktur

• Projektordner anlegen z.B.:

mkdir www && cd www 

• Im Projektordner NPM Initialisieren (erstellt ein package.json File)

npm init

• css und scss und bin Ordner anlegen (bin enthält später command line scripte)

mkdir bin public scss && mkdir public/css

• main scss File

touch scss/main.scss

node-sass und nodeamon installieren

npm install -D node-sass nodemon

Hinweis: nodeamon ist eigentlich umständlich. Es wird in diesem Beispiel als Watcher genutzt. Aber node-sass kann das eigentlich selbst (siehe andere Beispiele)

• Mit der -D Option schreibt npm die a Abhängigkeit in das package.json
• node-sass wrappt die Libsass Bibliothek und kompiliert später die scss Dateien zu css Dateien
• nodemon überwacht normalerweise Änderungen an Serverseitigem Node.js Code und überwacht in unserem Fall, ob sich ein scss File ändert
• Dummy scss

$badass: #bada55;
body { 
  margin: 0; 
  background-color: $badass; 
}

Kompilieren

Skripte im Package.json erweitern:

“scripts”: {
  “build-css”: “node-sass --include-path scss scss/main.scss   public/css/main.css”
},

..un Testen

npm run build-css

Das funktioniert schon mal. Als nächstes ein Watcher, damit sich das css jedesmal bei Änderungen des scss Files automatisch kompiliert:

Watcher

Wir erweitern unser Package.json mit einem watch-css Skript

“scripts”: {
 “build-css”: “node-sass --include-path scss scss/main.scss public/css/main.css”,
 “watch-css”: “nodemon -e scss -x \”npm run build-css\””
},

Ausführen.

npm run watch-css

Jetzt wird automatisch kompiliert...

Aufräumen

Wir können die beiden Skripte build-css und watch-css auslagern. Dann wird alles aufgeräumter. Dazu legen wir zwei Dateien (ohne Suffix) an:

bin/build-css

node-sass --include-path scss scss/main.scss public/css/main.css

bin/watch-css

nodemon -e scss -x “npm run build-css”

Ausführbar machen:

chmod +x bin/build-css
chmod +x bin/watch-css

Und das Package.json anpassen:

“scripts”: {
 “build-css”: “./bin/build-css”,
 “watch-css”: “./bin/watch-css”
},

Snippets für Varianten

• Script Teil in package.json erweitern

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "scss": "node-sass --watch scss -o css"
}

node-sass: Refers to the node-sass package.

--watch: An optional flag which means “watch all .scss files in the scss/ folder and recompile them every time there’s a change.”

scss: The folder name where we put all our .scss files.

-o css: The output folder for our compiled CSS.

When we run this script it will watch every .scss file in the scss/ folder, then save the compiled css in css/ folder every time we change a .scss file.

5. Run the Script To execute our one-line script, we need to run the following command in the terminal:

npm run scss

And voila! We are watching and compiling SASS.