せらんメモスマートフォン用の表示で見るぱせらんメモこの広告は、90日以上更新していないブログに表示しています。開発ツール完全に遅れてる感があるけど、今更ながらにSassとCompassの環境を整えてみた。前置きとかどうでもいい人は「インストール」とかその辺の見出しだけ読んでください。installとcompileとかwatchをちょろっとやってるだけなので、既に使いこなしてる人はそっとタブを閉じると時間が節約できます。Stylesheetshttp://sass-lang.com/SassはCSSをもっと便利で効率的にコーディングするための技術。競合するものとしてLESSやStylusもあるけど、最近はCompassとのセットでSassが流行ってる様子。Sassを使うとCSSがこんな風に書けるようになる。9%)これをコンパイルすると下のようなCSSが生成される。#2ca2af;}SassはHamlやSlimのようなインデントでネストを表現する。その他にも変数や関数や継承といったプログラミング的なことができる。CSS)という普通のCSSを拡張したような記法も用意されている。いうかSCSSはCSS3のスーパーセット的な文法になっていて、普通のCSSはSCSSとしても扱える。普通にCSSで書いて、少しずつ慣れていきたい場合はSCSSで書くと良いかもしれない。ちなみに上記の例をSCSSで書くとこんな感じになる。}}細かい機能については公式マニュアルや色々な解説サイトを見てもらうとして、早速使ってみる。インストールSassはRubyでできてるのでRubyが入っていることが前提となる。Macなら標準で入っているもの、Windowsなら別途RubyInstallerなどで入れたものを使う。rbenvで入れたものでもよい。Sassはgemになってるので普通にgemコマンドでインストールができる。sassこれでsassコマンドが使えるようになる。:コンパイルsass/scssファイルのコンパイルはこんな感じ。example.css出力ファイルを省略すると画面に表示される。出力されるCSSの形式を制御できる。デフォルトはnestedで、インデントされた感じで出力され、compressedにすると一行で出力される。ちなみに上の例はexpandedで出力した。ファイルを編集したら自動的にコンパイルする--watchというオプションを使用すると、ファイルの変更があったら自動的にコンパイルしてくれるモードで起動ができる。入力と出力はコロンで区切って指定するので注意。sass:cssこちらはファイルだけでなくディレクトリも指定できるので、sass:cssとか指定して起動しておくと便利。これを起動した状態でsass/example.sassを編集すると、自動的にコンパイルされたものがcss/example.cssに生成される。簡単な使い方はこんなところ。あとは-hを眺めるとかマニュアルを眺めるとかググるとかして新しい発見をしよう。Documentationhttp://compass-style.org/CompassはSassを利用したCSSフレームワーク集(?)で、色々なmixin集とかスプライトの自動生成とか便利な機能が揃ったもの。border-radius(2px);}こんな感じのCSSにしてくれる。2px;}他にもCSSリセットとかbox-shadowとか色々あって、それらをベンダープレフィクスだけでなくクロスブラウザも考慮して自動的に変換してくれる。スプライトさらにCompassを使うとスプライト用画像とそれを使うためのCSSも自動的に生成してくれる。all-my-icons-sprites;こんな画像ファイルとcssが生成される。0;}もう頑張って切り貼りしたりスプライト生成サイトを使わなくてもいい!ほかにもいっぱいいっぱい機能があるけど、それらについては公式マニュアルや色々な解説サイトを見てもらうとして、早速使ってみる。インストールCompassもRubyでできてるのでRubyが入っていることが前提となる。いうかSassを使ってるので必然的にRubyになる。Macなら標準で入っているもの、Windowsなら別途RubyInstaller(ryCompassもgemになってるので普通にgemコマンドでインストールができる。compassこれでcompassコマンドが使えるようになる。:プロジェクトの作成CompassはCSSや画像などの他にベースURLやコンパイルの仕方などを設定するファイルがセットになったプロジェクトディレクトリで作業することになる。example1するとexample1ディレクトリに初期ファイルが作成されて、簡単な使い方などが表示される。:ちなみに--css-dirなどのオプションで出来上がるディレクトリの名前などを指定したりもできる。createしてみると色々なオプションの説明が出てくる。config.rbの中にcss_dirなどの項目が書かれているので、ここを変更してもよい。コンパイルsassディレクトリの中のファイルを編集して、プロジェクトディレクトリでcompileを実行すると全てのファイルをコンパイルしてcssファイルを作成してくれる。sassコマンドの時みたいにファイルやディレクトリを指定する必要はない。compileファイルを編集したら自動的にコンパイルするCompassもwatchというコマンドを使用すると、ファイルの変更があったら自動的にコンパイルしてくれるモードで起動ができる。watchこちらもファイルやディレクトリを指定する必要はない。簡単な使い方はこんなところ。あとはhelpを眺めるとかマニュアルを眺めるとかググるとかして新しい発見をしよう。ちなみにコマンドのヘルプはhelpで表示できる。statsでCSSの項目を有効にする(2013-09-30追記)statsコマンドを使うとこんな情報が確認できるが、css_parserが入ってない場合はCSSの項目がDISABLEDになってしまう。gemを入れてあげると対応される。css_parsercss_parserを入れる。株式会社LIGCSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。前にVMware-serverのバージョンが1.0.8になったのでアップ...2008-05-05脱秀丸。Pi(Raspbian)にmDNSを設定するSassとCompassを使ってみるbinaryへのキャストって......?月別アーカイブはてなブログをはじめよう!paselaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。