BLOG

sass+compassで快適にコーディング

ちょこちょこsassの話題を出していますが、sassの事を記事にした事はまだありません。それは僕自身がまだsassを何となく使っているだけで、sassとはこうだ!的な説明ができないからです。 でも逆に言うとただ何となくつかっているだけでもsassは凄く便利で、ワークフローに欠かせないものになっています。ただ唯一面倒なのがsassはコンパイルしてCSSに書き出す必要があるという事ぐらいですが、compassで監視して自動で書き出してくれるので思っているよりは面倒ではないのですが、若干書き出すまでにラグがあります。

sassの特徴

  1. セレクタを入れ子で記述できる
  2. 変数が使える
  3. セレクタの継承ができる
  4. mixinがつかえる

セレクタを入れ子で記述できる

セレクタを入れ子で記述できることは思いのほか便利で慣れてしまうと普通に記述するのが凄く面倒になります。以下のように記述したコードが

コンパイルされるとこうなります。

変数が使える

変数と聞くとちょっとプログラムちっくで小難しく感じてしまうかもしれませんが、そんな事はありません。

変数の書き方

僕はメインカラーやサブカラーを変数に定義してよくつかいます。

コンパイル前

コンパイル後

セレクタの継承ができる

ぼくはmixinのほうをよく使うので、あまり使わないですが、他のセレクタの内容をそのまま使う事ができます。もってきたセレクタの内容にプラスして記述する事もできます。

コンパイル後

mixinがつかえる

mixinは予め定義していたスタイルを使う事ができる機能です。

コンパイル後

基本的な特徴はこんな感じです。

sassのインストール

sassを使うにはRubyが必要ですのでRubyをインストールする必要があります。Macは最初からインストールされています。

1.Rubyのインストール(Macは不要)

http://rubyinstaller.org/downloads/ からインストーラーをダウンロード&インストール

2.ターミナル(winはコマンドプロントorルビーコマンドプロント)でRubyGemを最新にアップデート

以下を入力(少し時間かかります。)

Mac

Win

3.ターミナル(winはコマンドプロントorルビーコマンドプロント)でSass+Compassのインストール

以下を入力(反応するまで時間がかかります。)

Compassのインストール

Mac

Win

Sassのインストール

Mac

Win

以上でインストールは完了です。

Sass+Compassの使い方

以下の内容をコピーしてconfig.rbというファイルを作成し各種パスを環境にあわせて変更する。

監視の開始

ターミナル(winはコマンドプロントorルビーコマンドプロント)で
cd 半角スペース サイトのディレクトリをドラッグ エンター
compass w エンターで
ディレクトリーの監視が開始され scssファイルがcssファイルにコンパイルされます。

Dreamweaverでコードヒントを出す。

MMDocumentTypes.xmlを検索し

のカ所を

に変更

第一弾はこんな感じで!

    Sponsored Links

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です