読了: 約 3 分
今更ですが、Sassを導入しました。汗
正直zen-codingでのカスタマイズ、
oo.css、通常のCSSでもある程度、HTML/CSSの高速でコーディング出来、
CSSはjQueryMobileやBoot strapのようにモジュール化してしまえば効率的に記述することができるので
そこまでメリットを感じていませんでしたが、とりあえず入れてみたので少し実験しようと思います。
目的
・CSSの高速化と、復数人のプロジェクト単位での効率な作業
インストール方法
私は、Windows7を使用していましたので、
下記のサイトを見れば簡単にできました。
ただ、デザイナーさんなどコマンドを打つ黒い画面が出てくると少し戸惑ってしまいますよね。
基本は上記のサイトを見ながらインストールしていただけるかと思いますが、
気をつけるのは、
c:~でrubyをダウンロードしたディレクトリを指定して
ruby -v
上のコマンドを叩いて、下記のようなrubyのバージョンが出てくればrubyが入っている事が確認できた状態です。
※ディレクトリが異なる場合はコマンドプロンプトのコマンドを検索して下さい。
基本的にはディレクトリを変更する
cd ..
とかで上位階層に行って自分のダウンロードした場所に行ってからruby -vをして下さい。
rubyのインストールはこちらから
RubyInstaller
一番上のRubyInstallerにあるRuby 1.9.3-p194のバージョンを私はダウンロードしました。(2012/08/21現在)
保存するディレクトリを変えたい時
Cから他のルートディレクトリに変更したい場合のコマンドが下記のサイトにありました。
コマンドプロンプトの効率的活用方法の紹介
C:Documents and Settingstest>cd /d D:hoge D:hoge>
このコマンドでディレクトリを変更して、そこにRubyをダウンロードして、
上記のruby -vを叩いて確認します。
Compass(CSSのプリプロセッサ)について
CompassはCSSのプリプロセッサで、Sassを拡張したようなものだそうですが、こちらにも
少し機能があって、下記のURLはベンダープレフィックスを自動で追加してくれる機能があるそうです。
CSS3を使うスマホやPCでの案件に重宝しそうですね。
CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。
他参考サイト
実際の案件で使用した方のディレクトリ構造や使い方
最近の案件でのSassの運用
情報量が多すぎて見るのが大変ですが、NAVERまとめ素敵です笑
Sass(CSS拡張メタ言語)に関する資料
zen-cordingと絡めて超速コーディングをしていきたいですね。
SassとDreamweaverのコードヒントでCSSをさらに効率的に
はてなさんの開発者ブログに詳しい詳細が記載されていますので、こちらも基礎的なところを一読しておいたほうがよさそうです。
はてなさんのデザイナーの方々はLESSを使っているそうです。基本的には記述方法はあまり変わらないのでこちらも勉強しておいて損はなさそう
ただ、こちらにも書いてありますがSassとCSSのディレクトリを変えた場合に、ディレクトリ構造がわからなくて、修正が大変という事はあるかもしれませんね。
はてなにおけるCSSメタ言語(CSSプリプロセッサ)の導入について
まとめ
入れ子にして、記述したり変数を使えるというのは便利ですね。
また、実際複数人での長期的な運用面を考えると、企業では何人かでプロジェクトにアサインされて、CSSを触ると思いますので、
運用上変数名の命名規則などは、細かく決めておく必要がありそうですね。
今後はWindowsでSassの超簡単導入方法をメモしておきます。デザイナーさんやコーダーさん向けの記事です。効率的なCSSコーディングのために、Zen-codingなどと絡めた記事も書いて行きたいと思います。
インプレスジャパン
売り上げランキング: 264004
オライリージャパン
売り上げランキング: 450