CSSプリプãƒã‚»ãƒƒã‚µãŒæ‰‹æ”¾ã›ãªã„ï¼
最åˆã¯Sass+Compassを使ã£ã¦ãŸã‘ã©ã€Bootstrapを使ã†æ©Ÿä¼šãŒå¢—ãˆã¦ãã¦Lessを使ã†ã“ã¨ãŒå¤šããªã£ãŸã€‚
Lessをコンパイルã™ã‚‹éš›ã¯Less.appを使ã£ã¦ãŸã‘ã©ã€MacOS版ã—ã‹ãªã„ã®ã§Windows開発環境ã®äººã¨ä¸€ç·’ã«ã‚„ã‚‹ã¨ãã«ã©ã†ã—よã†ã‹ã¨ã€‚
Win用ã®GUIコンパイラを探ã™ã®ã‚‚ã„ã„ã‘ã©ã€GUIコンパイラã«ã‚ˆã£ã¦å‡ºåŠ›çµæžœé•ã£ãŸã‚‰ã‚ã‚“ã©ãã•ã„(ãã†ã„ã†ã“ã¨ã‚ã‚‹ã‹ã©ã†ã‹ã‚ã‹ã‚‰ãªã„ã‘ã©ã€æ¤œè¨¼ã—ã¦ãªã„ã‹ã‚‰æ–言もã§ããªã„)。ã ã£ãŸã‚‰less.js使ã£ã¦ã‚³ãƒ³ãƒ‘イルã—ãŸã‚‰ç¢ºå®Ÿã«çµæžœä¸€ç·’ã«ãªã‚‹ã®ã‹ãªãƒ¼ã¨æ€ã„ã€å‰ã«æŒ‘戦ã—ã¦å¤±æ•—ã—ãŸã‚³ãƒžãƒ³ãƒ‰ãƒ©ã‚¤ãƒ³ã‹ã‚‰ã®ã‚³ãƒ³ãƒ‘イルをå†åº¦èª¿ã¹ã‚‹ã“ã¨ã«ã—ãŸã€‚
å‰ã«ã‚³ãƒžãƒ³ãƒ‰ãƒ©ã‚¤ãƒ³ã‹ã‚‰ã‚³ãƒ³ãƒ‘イルã—よã†ã¨ã—ã¦å¤±æ•—ã—ãŸã¨ã“ã‚
- css出力ファイルã®è¨å®šæ–¹æ³•ãŒã‚ã‹ã‚‰ãªã‹ã£ãŸ
- watch(ファイルを監視:ファイルã«æ›´æ–°ãŒã‚ã‚‹ã¨è‡ªå‹•ã§ã‚³ãƒ³ãƒ‘イルã—ã¦ãれる)ãŒã‚ˆãã‚ã‹ã‚‰ãªã‹ã£ãŸ
ドã‚ュメント
LESS « The Dynamic Stylesheet language(最新)
LESS - The Dynamic Stylesheet language(日本語)
コンパイル
node.jsを入れã¦ã€lessã‚’.js入れã¦lesscコマンドを使ã†(コンパイルå‰ã¾ã§ã¯å‰²æ„›)
lesscã¯ã€Less Compilerã®ç•¥ã€‚
以é™ã¯lessc v1.5.0を使用。
サンプルã«ä»¥ä¸‹ã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªã¨ãƒ•ã‚¡ã‚¤ãƒ«ã‚’用æ„
├── css └── less └── default.less
åŒã˜ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªå†…ã«å‡ºåŠ›
コマンド $ lessc 対象lessファイルå.less 出力cssファイルå.css #実行çµæžœ $ cd less $ lessc default.less sample.css ├── css └── less ├── sample.css └── default.less
lessディレクトリã§ã¯ãªãã€cssディレクトリã«å‡ºåŠ›çµæžœã‚’出ã—ãŸã‹ã£ãŸã‚‰ãƒ‘スを指定ã™ã‚Œã°ã„ã„。
$ lessc default.less > ../sample.css ├── css │  └── sample.css └── less └── default.less
cssファイルã®åœ§ç¸®
改行ã¨ã‹ç©ºç™½ã‚’除去ã—ã¦ã‚³ãƒ³ãƒ‘イルã™ã‚‹æ–¹æ³•ã«-xオプションをã¤ã‘る方法ã¨ã€--clean-cssオプションをã¤ã‘る方法ãŒã‚る。
--chean-cssã¯ã€v1.5.0ã‹ã‚‰æ–°ã—ãå…¥ã£ã¦ã„ã¦ã€ãã‚Œã¾ã§ã‚ã£ãŸ--yui-compressãŒå°†æ¥çš„ã«ãªããªã‚‹ã‚ˆã†ã 。
圧縮ã™ã‚‹ãŸã‚ã®ãƒ©ã‚¤ãƒ–ラリをã“ã‚Œã¾ã§ã®ycssminã‹ã‚‰clean-cssã«ç§»è¡Œã—ã¦ã„ãã¿ãŸã„。
$ lessc -x default.less sample.css ã¾ãŸã¯ $ lessc --clean-css default.less sample.css
-xオプションã¨--clean-cssオプションãŒã©ã†é•ã†ã‹ã¾ã§ã¯ã¾ã 追ãˆã¦ã„ãªã„。
(カラーコード書ã„ãŸæ™‚ã«ã€-xオプションã ã¨ã‚¢ãƒ«ãƒ•ã‚¡ãƒ™ãƒƒãƒˆã‚’å…¨ã¦å°æ–‡å—ã§å‡ºåŠ›ã€--clean-cssオプションã ã¨æ›¸ã„ãŸã¾ã¾å‡ºåŠ›ãらã„ã—ã‹ã‚ã‹ã‚‰ãªã‹ã£ãŸ)
自動ã§ã‚³ãƒ³ãƒ‘イルã—ã¦æ¬²ã—ã„ï¼
lessファイルã„ã˜ã‚‹åº¦ã«ã‚³ãƒ³ãƒ‘イルãªã‚“ã‹ã—ã¦ãŸã‚‰æ»ã‚“ã˜ã‚ƒã†ã€‚
ã§ã‚‚lessc自体ã«ã¯watchã™ã‚‹æ©Ÿèƒ½ãŒãªã„ã—ã€ä¸‹è¨˜ãƒšãƒ¼ã‚¸ã¿ã¦ã‚‹ã¨ä»Šå¾Œã‚‚ã¤ã‹ãªã•ãã†ã€‚
Add -w Watch mode to lessc command line tool. Closes cloudhead/less.js#192 by poswald · Pull Request #194 · less/less.js · GitHub
lesscå˜ä½“ã§watchã§ãã‚‹ã‹ã¨æ€ã£ã¦ãŸã€‚
ã®ã§ã€Gruntã¤ã‹ã†ã“ã¨ã«ã—ãŸã€‚
Grunt: The JavaScript Task Runner
ã¤ã¥ã。
つづき書きました