2012年11月23日
HTML制作環境を刷新(2) Compassも使ってみる @ ウェブ
先の日記「HTML制作環境を刷新」で、制作環境をJADE+SCSS(+Coffeescript)を使っている事を書きましたが、それにプラスしてCompassも導入してみました。
実はLESSとかSASS(SCSS)、Stylusがよく分かってなかった時にCompassって名前も頻繁に目にして、その時は全然Compassも分ってなくて、試す気すらなかったのですが、どうもSCSSを使う場合は、Compassも使った方が良さそうな事に気付き使ってみる事にしました。
LESS、SASS(SCSS)、Stylusは、機能的な若干の違いは有る物の、基本的にはどれもスタイルシートを書く為のプリプロセッサで、CompassはSASSと組み合わせて使う、機能拡張みたいな物です。
SASS自体、LESSに比べれば、色々な事が出来て高機能なのですが、そこに更なる便利機能を追加してしまうのが、Compass。機能的にはmixinを使っている物も多く、自分でライブラリーを作ろうと思っていた物もほとんどが含まれているため、リセット用なんて物はCompassで用意されている物を使えば良さそうです。足りない場合は、自分用のライブラリーに、@mixin oreno-reset とか作って@include global-resetして、追加部分を記述すれば良さそう。CSS3のベンダープレフィックスが必要な物に関しても、色々用意されています。
それから、これは便利かどうか微妙な機能だけど、スタイルシート用のスプライト画像の自動生成機能なんてモノもあります。フォルダー構成など事前の準備をしてあれば、スタイルの記述を書くだけで、スプライトに必要な座標の記述から画像の生成まで行ってくれます。最適化を考える場合、幾つか問題は有りそうですが、素材集のアイコンを使うなどして、短時間にウェブサイトを構築する場合には、非常に便利な機能な気がします。自分としては使う場面が有るかどうか微妙ですが・・・。
また、Blueprint CSSに関わる機能も有り、素のまま使うと、HTMLの中に、span-7とかspan-8とか、スタイルシートの管理的にも不味い記述を大量に書く事になりますが、その辺の問題を解決出来て良さそうです。(自前のグリッドレイアウトCSSもSCSS使用かと思っていたのですが、Compassを使えば、Blueprint CSSが思った様な形になるので、自作CSSを書き換えるかどうか悩み中。)
その他にも、まだまだ色々な便利機能があるCompassは、SCSSを使っている人は使った方が良さそうです。
Compass Home | Compass Documentation
>>関連リンク
関連日記
- 2009年10月12日 CSS : -webkit-border-imageを試してみた (8784)@ ウェブ
- 2007年10月22日 ファイルが大量に消えた(T_T) (7037)@ Mac
- 2008年10月17日 CSS Nite in HIROSHIMA powered by Webさわり会議 (6425)@ 広島
- 2008年02月21日 テキストエリアの自動拡張 (5731)@ ウェブ
- 2008年01月16日 auのパケット通信料 (5364)@ 携帯電話
- 2006年08月19日 Google Wireless Transcoder (4992)@ 携帯電話
- 2010年02月10日 ウェブページ制作ツール「Flux」 (4890)@ Mac
- 2008年02月21日 テキストエリアのリサイズ (4792)@ ウェブ
- 2009年05月16日 CSSレイアウト作成ツール「YAML Builder」 (4621)@ ウェブ
- 2007年09月19日 YSlowでウェブページのパフォーマンスチェック (4339)@ Mac
- 2008年12月13日 Javascirpt製マークアップ・エディター「SmartMarkUP」 (4336)@ ウェブ
- 2008年10月04日 Adobe ACE、不合格(T_T) (4221)@ Mac
- 2012年04月26日 Dreamweaver CS6 の可変グリッドレイアウト (4208)@ ウェブ
- 2007年01月08日 FireBug (4137)@ Mac
- 2005年06月24日 Adobe Creative Suite 2 (4071)@ Mac
- 2009年12月07日 IntelliJ IDEA 9 Beta (4044)@ Flash
- 2005年08月08日 Macromedia - Studio 8 (3928)@ ウェブ
- 2007年05月06日 タグH1の中の画像 (3865)@ ウェブ
- 2007年09月18日 jQueryでテーブルをシマシマに (3827)@ ウェブ
- 2009年10月11日 CSS : -webkit-border-image (3757)@ ウェブ
- 2009年06月28日 Fireworksのガイドラインをスクリプトで作る (3721)@ Mac
- 2009年06月04日 Boks - A Visual Grid Editor (3699)@ ウェブ
- 2007年10月19日 明日はDreamweaver CS3勉強会 (3633)@ Mac
- 2009年11月20日 HTML5のセクションアウトラインを見るブックマークレット (3602)@ ウェブ
- 2012年04月24日 Adobe CS6(ウェブ関連) (3563)@ ウェブ
- 2006年04月07日 音声ブラウザ用にメニューを追加 (3530)@ ウェブ
- 2009年04月16日 iPhone版Max/MSP?「Jasuto」 (3514)@ 音楽
- 2011年08月22日 TwitterのGridデザインCSS「Bootstrap」 (3514)@ ウェブ
- 2011年02月16日 Wordpressに外部CSSやJSファイルを読み込む (3473)@ ウェブ
- 2006年04月22日 Dreamweaver 8のページプロパティ (3445)@ Mac
アマゾン広告
この日記ページは閲覧数などの条件に応じて、閲覧制限を行っています。他からリンクしていただいても、そのリンクから辿った閲覧者が当ページの内容をご覧頂けない場合があります。ご了承下さい。