Node.js の express に指定できる CSSプリプロセッサ についての忘備録です。 express のヘルプを表示するとサポートする CSSプリプロセッサを知る事ができます。これらについて、ウェブで調べて、実際に試した時のメモです。
-c, --css <engine> add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
Express と連携する CSSプリプロセッサ
LESS
LESSは変数、ミックスイン、演算、そして関数のような動的な処理をCSSに追加拡張できます。 クライアントサイド(IE6+、Webkit、Firefox)、またnode.js、Rhinoを利用してサーバーサイドでも動作します。
- Language Features http://lesscss.org/features/
- The dynamic stylesheet language(日本語) http://less-ja.studiomohawk.com/
Stylus
表現力豊かでダイナミックで堅牢なCSSとの事、リファレンス中心で説明が無い
- ホームページ http://stylus-lang.com/
- stylus ドキュメント日本語訳 https://github.com/enja-oss/stylus
- CSSメタ言語「Stylus（スタイラス）」の基礎知識 http://www.risewill.co.jp/blog/archives/3758
Sass
- ホームページ http://sass-lang.com/
- Sass ドキュメント日本語訳 https://github.com/enja-oss/Sass
- Sassオレオレリファレンス https://tenderfeel.github.io/SassReference/first.html
compass
CompassはSassを元に開発したフレームワーク
* ホームページ http://compass-style.org/
* CSSの常識が変わる！「Compass」の基礎から応用まで！ https://liginc.co.jp/designer/archives/11623
動作させてみた記録
Stylus CSSプリプロセッサを指定してアプリを生成した場合
$ express --css stylus myapp3
create : myapp3 <--- ミドルウェアとして sytlus が設定される
create : myapp3/package.json
create : myapp3/app.js
create : myapp3/public
create : myapp3/public/javascripts
create : myapp3/public/images
create : myapp3/public/stylesheets
create : myapp3/public/stylesheets/style.styl <--- フォルダとファイルが追加される
create : myapp3/routes
create : myapp3/routes/index.js
create : myapp3/routes/users.js
create : myapp3/views
create : myapp3/views/index.jade
create : myapp3/views/layout.jade <--- スタイルシートの設定が追加される
create : myapp3/views/error.jade
create : myapp3/bin
create : myapp3/bin/www
install dependencies:
$ cd myapp3 && npm install
run the app:
$ DEBUG=myapp3:* npm start
style.styl を修正して、npm start でアプリを起動すると、CSSプリプロセッサが実行されて、style.css が生成される。 次のファイルはアプリ生成直後の初期状態のファイルで、stylusのソースです。
myapp3/public/stylesheets/style.styl
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
a
color: #00B7FF
表示結果は、以下の様になります。
フォント色とバックグランド色を指定して npm start を実行します。
myapp3/public/stylesheets/style.styl
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
color: white <-- フォント色を追加
background-color: #26343F <-- バックグラウンド色を追加
a
color: #00B7FF
バックグランド色とフォント色の変更後の実行結果です。
expressコマンド生成したアプリケーションのディレクトリをリストすると、public/stylesheets に css が生成されているのが判ります。
myapp3/public$ tree
.
├── images
├── javascripts
└── stylesheets
├── style.css
└── style.styl
このstyle.css の中身で、Stylus のソースから、生成されたCSSファイルです。
stylesheets/style.css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
color: #fff;
background-color: #26343f;
}
a {
color: #00b7ff;
}
LESS CSSプリプロセッサを指定してアプリを生成した場合
$ express --css less myapp4
create : myapp4
create : myapp4/package.json
create : myapp4/app.js
create : myapp4/public
create : myapp4/public/javascripts
create : myapp4/public/images
create : myapp4/public/stylesheets
create : myapp4/public/stylesheets/style.less <-- このファイルが less で生成
create : myapp4/routes
create : myapp4/routes/index.js
create : myapp4/routes/users.js
create : myapp4/views
create : myapp4/views/index.jade
create : myapp4/views/layout.jade
create : myapp4/views/error.jade
create : myapp4/bin
create : myapp4/bin/www
install dependencies:
$ cd myapp4 && npm install
run the app:
$ DEBUG=myapp4:* npm start
LESS プリプロセッサのソース
style.less
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
color: #fff; <-- 追加 フォントを白へ変更
background-color: #26343f; <-- 追加 バックグランドを濃紺へ変更
}
a {
color: #00b7ff;
}
やはり、アプリをスタートするとCSSが生成される。 LESSのプリプロセッサは、CSSを触れない感じでした。
style.css
body{padding:50px;font:14px "Lucida Grande",Helvetica,Arial,sans-serif;color:white;background-color:#26343F}a{color:#00B7FF}
Sass CSSプリプロセッサを指定してアプリを生成した場合
myapp4$ express --css sass myapp5
create : myapp5
create : myapp5/package.json
create : myapp5/app.js
create : myapp5/public
create : myapp5/public/javascripts
create : myapp5/public/images
create : myapp5/public/stylesheets
create : myapp5/public/stylesheets/style.sass
create : myapp5/routes
create : myapp5/routes/index.js
create : myapp5/routes/users.js
create : myapp5/views
create : myapp5/views/index.jade
create : myapp5/views/layout.jade
create : myapp5/views/error.jade
create : myapp5/bin
create : myapp5/bin/www
install dependencies:
$ cd myapp5 && npm install
run the app:
$ DEBUG=myapp5:* npm start
生成したアプリのフォルダーとファイルのリストです。
myapp5$ tree
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.sass <-- Sassのテンプレートが出来ている
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
Saasのソースに、フォント色とバックグランド色を追加してみます。
myapp5/public/stylesheets/style.sass
body
padding: 50px
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
color: white <--- 追加
background-color: #26343F <--- 追加
a
color: #00B7FF
必要なモジュールをインストールして、アプリを起動します。
myapp5$ npm install
myapp5$ npm start
> myapp5@0.0.0 start /home/tkr/express_work2/myapp5
> node ./bin/www
これで、アプリをアクセスできれば、動作確認OKです。
起動時に、CSSファイルが生成されます。以下が生成されたCSSファイルです。
myapp5/public/stylesheets/style.css
myapp5/public/stylesheets$ cat style.css
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
color: white;
background-color: #26343F; }
a {
color: #00B7FF; }
/*# sourceMappingURL=style.css.map */
compass CSSプリプロセッサを指定してアプリを生成した場合（失敗)
compass を指定してアプリを生成します。
$ express --css compass myapp6
create : myapp6
create : myapp6/package.json
create : myapp6/app.js
create : myapp6/public
create : myapp6/public/javascripts
create : myapp6/public/images
create : myapp6/public/stylesheets
create : myapp6/public/stylesheets/style.scss
create : myapp6/routes
create : myapp6/routes/index.js
create : myapp6/routes/users.js
create : myapp6/views
create : myapp6/views/index.jade
create : myapp6/views/layout.jade
create : myapp6/views/error.jade
create : myapp6/bin
create : myapp6/bin/www
install dependencies:
$ cd myapp6 && npm install
run the app:
$ DEBUG=myapp6:* npm start
フォルダとファイルのリストです。
myapp6$ tree
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.scss
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
7 directories, 9 files
compassのプリプロセッサのソースです。 Sass が元との事ですが、カッコ付きですね。 なんか変だなぁ。。。
myapp6/public/stylesheets$ cat style.scss
@import "compass/css3";
body {
padding: 50px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
color: white;
background-color: #26343F;
}
a {
color: #00B7FF;
}
必要なモジュールをインストールして、アプリを起動する。 ブラウザでアクセスした処でエラー発生した。 ENOENTは、Linuxシステムコールのエラーでファイルが存在しないエラーでした。
myapp6$ npm install
<中略>
myapp6$ npm start
> myapp6@0.0.0 start /home/tkr/express_work2/myapp6
> node ./bin/www
GET / 304 950.069 ms - -
events.js:141
throw er; // Unhandled 'error' event
^
Error: spawn compass ENOENT
at exports._errnoException (util.js:873:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith2Args (node.js:442:9)
at process._tickCallback (node.js:356:17)
npm ERR! Linux 3.13.0-65-generic
npm ERR! argv "/home/tkr/.ndenv/versions/v4.4.7/bin/node" "/home/tkr/.ndenv/versions/v4.4.7/bin/npm" "start"
npm ERR! node v4.4.7
npm ERR! npm v2.15.8
npm ERR! code ELIFECYCLE
npm ERR! myapp6@0.0.0 start: `node ./bin/www`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the myapp6@0.0.0 start script 'node ./bin/www'.
npm ERR! This is most likely a problem with the myapp6 package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node ./bin/www
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs myapp6
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls myapp6
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/tkr/express_work2/myapp6/npm-debug.log
以上