すてきな気分〜ナイスフィーリングブログ〜

MacでSass

若干重い腰を上げ、Sassに手を付けた。
立ち上げて覚えてしまえば楽なんだろうなぁというのは想像できたけど、まぁなくてもサイト制作に困る訳じゃ今のところない、という感じだったので、いつかやろうと思いつつ時間は流れ・・・^^;

Macの場合、Rubyは元々入っているので楽勝?思っていたらつまずいた。。。
ターミナルから以下コマンドでインストールが王道らしい。

■RubyGemsをアップデート

sudo gem update --system

■Sassをインストール

sudo gem install sass(バージョンチェエック:sass -v)

■Compassをインストール

sudo gem install compass(バージョンチェック:compass -v)

RubyのアップデートとSassのインストールはすんなり行ったけど、Compassのインストールでエラー・・・うぅ。

調べるとCommand Line Developer Toolsがないらしいのでインストール。

xcode-select --install

これで入りました♪
それからSassを生成するディレクトリをターミナルで開いて環境を作る。
ちなみにターミナルで開くとは、該当のフォルダをターミナルアイコンにドラッグするだけ!Macって便利〜

compass create

すると諸々ファイルがルートディレクトリに自動で作られる。
config.rbが設定ファイルなので、お好みで変更するといいかも。

Sassファイルをcssファイルに自動でコンパイルするには、compassに自動変換するよう言っておかないといけません。

compass w

これで例えばsassディレクトリにある「style.sass」を編集すると、cssディレクトリにある「style.css」が自動で書き変わります。(※あらかじめ両ディレクトリに該当ファイルを作っておく!)

例えばSassでこう書くと、

a {
  color: #000;
  &:hover {
    text-decoration: none;
    color: #f00;
  }
}

こうなる。

a {
  color: #000;
}
a:hover {
  text-decoration: none;
  color: #f00;
}

解除は「Ctrl+C」でOK。

と言っても毎度毎度ターミナルを立ち上げて、「compass w」とか「ctrl+c」は面倒なので、Koalaというコンパイルアプリがおすすめ。
アイコンがキモいような可愛いような微妙な感じだけど、機能としては無問題!(笑)

Pocket

トラックバック

このエントリーのトラックバックURL:

コメントを残す

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