なぜGentooなのか!?
最近、弊社のデザイン部隊がCSS NiteというWeb系のデザイン関連の勉強会に行ったらしく、スタイルシートが題材の土産話に、こんなことを言っていた。
「これからのWebデザインは、Macで行うのが主流になるんじゃないのぉー、ターミナルとかでコマンドうってさ、コンパイルしちゃったりやったりするんだよぉー」
何て話を、そのチームのリーダーが豪語していました、でもちょっと待って、ターミナルなんてGentooにはディフォルトで備わっているし、コマンドなんていくらでも、どうにでもなるし、そこで一言、私はあえて、その上司に苦言を申し出た
「いや、誤解ですよ××リーダー、Webデザイン、スタイルシート系編集はGentooでやるんです」
スタイルシートコンパイラを導入する
CSSコンパイラがGentooでどこまでイケてるのか知ってもらうためにやってみる
1. LESSのインストール
LESSとは変数、ミックスイン、演算、関数のような動的な処理をCSSに追加拡張できる便利なもの、インストール方法はまずnodejsのマスクを外して、インストールする
karky7 ~ # cat /etc/portage/package.keywords | grep nodejs
net-libs/nodejs ~amd64
karky7 ~ # emerge net-libs/nodejs
karky7 ~ # npm install -g less
npm http GET https://registry.npmjs.org/less
npm http 200 https://registry.npmjs.org/less
npm http GET https://registry.npmjs.org/less/-/less-1.3.3.tgz
npm http 200 https://registry.npmjs.org/less/-/less-1.3.3.tgz
npm http GET https://registry.npmjs.org/ycssmin
npm http 200 https://registry.npmjs.org/ycssmin
npm http GET https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz
npm http 200 https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz
/usr/bin/lessc -> /usr/lib/node_modules/less/bin/lessc
less@1.3.3 /usr/lib/node_modules/less
└── ycssmin@1.0.1
karky7 ~ # which lessc
/usr/bin/lessc
利用方法
Mixinsなどはこの様にできる、まずlessファイルを作成する
cuomo@karky7 ~ $ cat sample.less
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}
保存した後に、lesscコマンドでコンパイルすると、CSSが吐き出される
cuomo@karky7 ~ $ lessc sample.less
#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
cuomo@karky7 ~ $
LESSの詳しい使い方はこちらで
2. sass、scss
CSSを拡張したメタ言語sassとその別文法なscssっていうのがあってこれもCSSを作成する言語らしい
sass、scssが出来ること
- 変数
- セレクタのネスト
- ミックスイン
- セレクタの継承
とかが出来るらしい、まだ突っ込んで使ったことがないので詳細はそれ系の方の優れた資料にお願いするとしして、とりあえずインストールしてみる。
rubyが必要なのと必要なマスクを外す
karky7 ~ # cat /etc/portage/package.keywords
dev-ruby/sass ~amd64
virtual/ruby-ffi ~amd64
dev-ruby/listen ~amd64
dev-ruby/rb-inotify ~amd64
rubyのUSEフラグにthreadsを加える
karky7 ~ # cat /etc/portage/package.use
dev-lang/ruby:1.8 threads
karky7 ~ # emerge -pv sass
These are the packages that would be merged, in order:
Calculating dependencies... done!
[ebuild N ] virtual/ruby-threads-1:ruby19 RUBY_TARGETS="(ruby19)" 0 kB
[ebuild N ] virtual/ruby-threads-0:ruby18 RUBY_TARGETS="(ruby18)" 0 kB
[ebuild N ] dev-ruby/syntax-1.0.0-r3 USE="{-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 15 kB
[ebuild N ] dev-ruby/rake-compiler-0.8.1 USE="{-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 28 kB
[ebuild N ] dev-ruby/maruku-0.6.0-r2 USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 148 kB
[ebuild N ] dev-ruby/ffi-1.1.5 USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 (-ree18)" 874 kB
[ebuild N ] dev-ruby/yard-0.8.3 USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 1,056 kB
[ebuild N ~] virtual/ruby-ffi-1 RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 0 kB
[ebuild N ~] dev-ruby/rb-inotify-0.9.0 USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 13 kB
[ebuild N ~] dev-ruby/listen-0.7.2-r1 USE="{-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 34 kB
[ebuild N ~] dev-ruby/sass-3.2.5 USE="doc {-test}" RUBY_TARGETS="ruby18 ruby19 -jruby (-ree18)" 247 kB
...
karky7 ~ # emerge dev-ruby/sass
これで、sass、scssコマンドが使えるようになる、
使い方はこちらを参照してください
3. compass
これはCSSを書くためのフレームワークららしくgemでインストールする
karky7 ~ # emerge dev-ruby/rubygems
そしたら、こんな感じで
cuomo@karky7 ~ $ gem install compass
Fetching: chunky_png-1.2.7.gem (100%)
Fetching: fssm-0.2.10.gem (100%)
Fetching: compass-0.12.2.gem (100%)
Successfully installed chunky_png-1.2.7
Successfully installed fssm-0.2.10
Successfully installed compass-0.12.2
3 gems installed
Installing ri documentation for chunky_png-1.2.7...
Building YARD (yri) index for chunky_png-1.2.7...
Installing ri documentation for fssm-0.2.10...
Building YARD (yri) index for fssm-0.2.10...
Installing ri documentation for compass-0.12.2...
Building YARD (yri) index for compass-0.12.2...
Installing RDoc documentation for chunky_png-1.2.7...
Installing RDoc documentation for fssm-0.2.10...
Installing RDoc documentation for compass-0.12.2...
cuomo@karky7 ~ $
~/.gem/ruby/1.8/binにcompassコマンドが入るので適当にPATHを通してください。
それからプロジェクトらしき物を作ります
cuomo@karky7 ~ $ mkdir compass_scss
cuomo@karky7 ~ $ cd compass_scss/
cuomo@karky7 ~/compass_sample $ compass create
directory sass/
directory stylesheets/
create config.rb
create sass/screen.scss
create sass/print.scss
create sass/ie.scss
create stylesheets/screen.css
create stylesheets/ie.css
create stylesheets/print.css
...
...
sassのシンタックスを使う場合は
cuomo@karky7 ~/compass_sass $ compass create --syntax sass
directory sass/
directory stylesheets/
create config.rb
create sass/screen.sass
create sass/print.sass
create sass/ie.sass
create stylesheets/screen.css
create stylesheets/ie.css
create stylesheets/print.css
...
...
compassのコマンド
compassはこんな感じで使うらしい
cuomo@karky7 ~/compass_scss $ compass compile sass/screen.scss
create stylesheets/screen.css
ファイルを監視できて、保存した後に自動でcompileが実行される
cuomo@karky7 ~/compass_scss $ compass watch sass/screen.scss
>>> Compass is watching for changes. Press Ctrl-C to Stop.
>>> Change detected at 23:52:09 to: screen.scss
overwrite stylesheets/screen.css
ディレクトリ下で、watchするとファイル全部を監視してくれる
cuomo@karky7 ~/compass_scss $ compass watch
>>> Compass is watching for changes. Press Ctrl-C to Stop.
>>> Change detected at 23:53:49 to: screen.scss
identical stylesheets/screen.css
>>> Change detected at 23:53:58 to: print.scss
identical stylesheets/print.css
詳しくは
こちらで確認してください、申し訳ない
4. 最後に、CodeKit
そして最後にCodeKit、これは、....すみません使ったことありませんし
Gentooにはインストールできないでしょう、こういう綺麗なエディタらしいです、色々出来そうですが、このあたりはMacの先生に聞いてください。
これは、やはりemacsで代用する、
karky7 ~ # emerge app-emacs/css-mode
これだけでイケる、問題ない、こんなに綺麗
やっぱGUIがいいって人には、geditとかbluefishなんかどうでしょう?
karky7 ~ # USE="cjk" emerge bluefish
いろいろなファイルを編集できたような気がします、こんな感じです
いろいろなファイルタイプを編集できます、左のペインにはファイラー的なものもあったりしていいんじゃどうでしょう?
詳しくはこちらで確認してください
やはりWebデザインはGentooという結果が...
知ったかぶって色々書いてみましたが、CSSはよく分かってません、笑...
「インストールはいいから使い方を書けって!」って言われそうですが使い方は分かりません、笑...
確かに最近のMac人気は凄いなって感じます、三島あたりでは、PC開けてる人はほぼMacですからね、なのであえて断言しましょう、WebのデザインはGentooで.....キリッ
ちなみに、Gentooを使ってる人を三島近辺でで見たことありません......Orz....