導入から、簡単な使用方法までを明記します。関係について簡単に説明します。オブジェクト指向スクリプト言語です。要はプログラム言語ですね。生成するための言語を指す)です。ライブラリ管理ツール)がインストールされている必要があります。フレームワーク(各アプリケーションに使用する共通ライブラリなどを一元管理し、決められた枠に沿って開発することで、効率的な開発が行える仕組み)です。インストールされている必要があります。スプライトを自動生成してくれたりします。機能も勿論合わせて使用でき、予め定義しておいたスタイルを別のスタイルに読み込ませたり(Mixin)、親スタイルの中に子スタイルを入れ子に書いたりすることもできます。導入方法を明記していきます。インストーラをダウンロードします。ダウンロードしました。インストールを実行します。途中のチェックボックスはすべてチェックしておくと便利です。各チェックボックスの説明はマウスを乗せると表示されるので、確認してください。インストールされているか確認します。[x64-mingw32]のような表示が出てくれば正常にインストールされています。インストールされました。sass」を実行する。compass」を実行する。サイトの構成ですが、今回は以下のようにしたいと思います。各ディレクトリは勝手に生成されるので、あらかじめ作る必要はありません。用の設定ファイル等を作成します。保存するディレクトリ名を指定しています。すると、以下のフォルダ構成ができあがります。設定ファイル└index.htmlちなみに、オプションを指定しない場合、デフォルトでは以下のディレクトリができあがります。“javascripts”また、今回は設定ファイル作成時にディレクトリ名を指定しましたが、作成後も「config.rb」を修正することで簡単にディレクトリ名を変更できます。以下の2行を記載したテキストファイルを「style.scss」という名前で保存します。sass/style.scss」を実行します。以下の内容で出来上がっています。スプライトを自動生成してくれます。用いて画像の表示位置を指定することで、1枚の画像で様々なアイコン表示を可能にする技法のことです。ディレクトリ直下に置く。ディレクトリに以下3つの画像を入れる。ファイルに以下の2行を追加する。ファイルを確認すると、「.任意のクラス名-edit」等という名前で、クラス名が出来上がっています。スプライト用画像が自動生成されています。便利ですねっ!!オフィシャルによれば、おおむね32px程度の四角アイコンが適正なようです。機能となりますが、以下のように親と子の関係を入れ子にして記述することができます。100px;}この用に、入れ子で記述した部分が、きちんと分割されてCSSとして出力されます。個人的に入れ子の記載はすごく解りやすく、重宝しそうです。sass/style.scss」を実行するのって、とても面倒ですよね。ファイルを監視します。sass/style.scss」のようにファイル名を指定して監視を行なってください。機能「mixin」について簡単に説明します。