今さらそのネタwww何言ってんのwwwwオッソwwwww とか言われないために、そろそろSASSとかCompassとかその辺りを使う環境を整えてみませんか?

便利なのはわかってる。けど・・・

SASSに関する専門書も販売されて講習会なども行われ、これからどんどん目をする機会が増えてくると思います。 すでにネットや周りで噂を聞いて「便利そう」と思ってる人も多いはず。 でもなんで手を出せないのか・・・
  • 今のCSSで十分
  • やろうと思ったけどRubyとかgemとかなんとか書いてて、よくわからない
  • あの黒い画面が苦手
よくわからない?CUI(あの黒い画面)が苦手?もうそんなことは言わせない!!そんなあなたにコレ!! これマジいいんですよ。英語版ですけど。でもほんとタガログ語の人でも使えちゃうレベル。 とりあえずこれでcompassを使ってみるのはどうでしょうか? WinでもMacでもこれでいけますし、環境つくるまでがほんと超ラクちん。簡単スリーステップ。
プロアクティブもびっくり
はい、できたー。これであなたのPCでもCompassが動いちゃうよ―。

まじめに動かしてみる

それじゃあマジメにいきますね。

必要なソフトをインストールする

まずPrepros公式サイトからソフトをダウンロードしてください。
MacかWindowsか。
MacかWindowsか
ボクはWindowsなのでそっちの画面で進めますが、Macも似たようなものです。 ダウンロードしたソフトをインストールしてください。

指示通りに進む

英語は読んだふりで [Next]
うぇ。。うぇ。うぇるこめ。。。と
どこにインストールするか選べます。大体そのままの設定でok。
英語は読んだふりで [Install]
適当なフォルダを選んで
インストールが始まるので、終わるのを待ちましょう。

あとは全自動。

待つ。
進むプログレスバー
待つ。
中の人が頑張ってるんだろうなぁ
待つ。
あとすこし。がんばれ。
待つ。
もうゴールが見えてきたぞ
待つ。
くるぞ。。くるぞ。。。。
キタ━━━━(゚∀゚)━━━━ッ!!
フィニッシュ!!
以上であなたのパソコンでcompassを使えるようになりました。 Rubyとかgem install hogeだとか、そんなよくわからない言葉は一切いりません。簡単でしょ。

ファイルをつくってみる

環境が揃ったので、実際にファイルを作ってみましょう。 Preprosはデフォルトではディレクトリ構成が決まっていて、親ディレクトリ(プロジェクト)に子ディレクトリ(sass格納)という構成にしないといけません。 それに合わせて作りましょう。
こんな感じ。
ディレクトリ構成
親ディレクトリはどんな名前でも構いません。子ディレクトリの名前は必ず sass にしてください。 [/sass/]の中に style.scss というファイルを置きます。

CSSを書いてみる

とりあえず、style.scss を編集して、普通のCSSを書いてみましょう。
カタカタカタターン
CSS書いてみる

とりあえずソースコードも。

@charset "UTF-8";
body {
    color: #000000
    background: #FFFFFF;
}
compassでもなんでもなく普通のCSSですね。

Preprosにファイル(プロジェクト)を登録する

つくったファイルをPreProsに読み込ませます。 style.scssではなく、プロジェクトのディレクトリごとPreProsにドロップしてください。
Drag & Drop
ドロップ
自動的にstyle.scssが読み込まれました。
読み込まれた
これで先ほどのディレクトリがPreprosのプロジェクトとして登録されました。

基本的な設定をする

読み込まれた style.scss を左クリックで選択すると、右から設定メニューがでてきます。
選択するとメニューが表示
ちょちょっと設定。[Use compass] にチェック 読んだ通り、「このファイルはcompassを使うよ!」って設定です。
Use compass
追記された [ Full compass Support ] にもチェック compassの機能がさらに便利になる機能が有効になります。
Full compass Supportにもチェック
以上で設定は終わり。

コンパイルしてみる

コンパイルというのは、さっきの style.scss を元に style.css をつくるために行います。 でもやり方は簡単。 Preprosを起動している状態なら、style.scssを編集して保存した時に自動的にコンパイルされます。 手動でやる時は、Preprosの右下、compileボタンを押せばコンパイルされます。
コンパイルする
手動でコンパイル
コンパイルが終わったら、右下にポップアップがでます。
成功したら緑
コンパイル成功
もしディレクトリ構成が違ったりCSSの記述が間違っていればエラー。
失敗したら赤
コンパイル失敗

ファイルを確認する

コンパイルが成功すればsassディレクトリと同じ階層に2つのディレクトリが生まれているはずです。
[/.sass-cache/]と[/stylesheets/]
2つのディレクトリが生成された
[/.sass-cache/]はソフトが使うファイルなので無視して構いません。 sassを元に生成されたstyle.cssのファイルは[/stylesheets/]に入っています。
出力されたstyle.css
@charset "UTF-8";
body {
    color: #000000
    background: #FFFFFF;
}
とはいってもさっきのファイルはそのまんまCSSだったので変化はありません。

もっとcompassしてみる

もっとソレっぽい書き方をしてみましょうか。

変数

変数を使えば、一時的にプロパティの値を保存してあとで使いまわすことができます。
.scss
@charset "UTF-8";
/*
// 変数に色を代入する
*/
$color_background : #000000;
$color_text : #FFFFFF; // $color_text は #FFFFFF に置き換わる

body {
    background: $color_background; // $color_background は #000000 に置き換わる
    color: $color_text; // $color_text は #FFFFFF に置き換わる
    margin: 0;
    padding: 0;
}
#wrap {
    background: $color_background; // $color_background は #000000 に置き換わる
    margin: 0 auto;
    padding: 0;
    text-align: left;
    width: 1280px;
}

//ちなみにCSSとは違い、行頭スラッシュ2回でもコメントができこれはコンパイル時に取り除かれます。

/*
こう書くと、CSSとして扱われコンパイル後でも残る
*/

/*
//こう書くとコンパイル時に取り除かれる。
複数行の場合最初の1行さえ // となっていれば取り除かれます。
*/
コンパイルするとこうなります。
.css
body {
  background: black;
  color: white;
  margin: 0;
  padding: 0;
}

#wrap {
  background: black;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  width: 1280px;
}

/*
こう書くと、CSSとして扱われコンパイル後でも残る
*/

ネスト

compassでは入れ子の記述が可能です。
.scss
#header {
    background: $color_basecolor;
    margin: 0;
    padding: 0;
    width: 100%;
    h1 {
        margin: 0;
        padding: 1em;
        a:link {
        	color: $color_text;
        	text-decoration: none;
        }
        a:visited {
        	color: $color_text;
        }
        a:hover {
        	color: $color_text;
        	text-decoration: underline;
        }
        a:active {
        	color: $color_text;
        }
    }
}
.css
#header {
  background: #ff7321;
  margin: 0;
  padding: 0;
  width: 100%;
}
#header h1 {
  margin: 0;
  padding: 1em;
}
#header h1 a:link {
  color: white;
  text-decoration: none;
}
#header h1 a:visited {
  color: white;
}
#header h1 a:hover {
  color: white;
  text-decoration: underline;
}
#header h1 a:active {
  color: white;
}
とまぁcompassの書き方とかは色んなブログの記事で書かれているので、あんまり深くは書きません。 まずは手元にあるCSSを、変数やネストあたりだけで簡単に練習してみてはいかがでしょうか?下の記事とか参考にして、ぜひ挑戦アレ。