MacにSassとBracketsを導入

会社のWindowsには導入しましたが、自分のMacにはしていませんでした。
使い始めたばかりですが、もっと早くに導入すれば良かった。。

メリット

開発スピードの向上

これは体感してます。

入れ子

.box {
    width: 200px;
    border: solid 1px #ccc;
    p {
        line-height: 140%;
        color: #333;
        span {
            font-size: 1.2em;
        }
    }
}

mixin

@mixin center {
    /* 上下左右中央に配置 */
    text-align: center;
    position: relative;
    top: 50%;
}
p {
    /* 呼び出し */
    @include center;
    font-size: 1.1em;
}

こんなことができます。

Braketsを導入してみる

ずっとDreamweaverを使っていたが、sassファイルはデフォルトでは対応していないので、
この際エディタを変えることにした。
Brackets - A modern, open source code editor that understands web design.
一番感動したのはライブプレビュー。これどうなってんすか。
あとプロジェクトの管理も簡単。
プラグイン（エクステンション？アドオン？拡張機能？）もポチポチインストール。
Brackets おすすめエクステンション集・解説

SASSのインストール

ruby -v
//バージョン確認

sudo gem install sass
//sassのインストール  
//macは先頭にsudo付ける。

sudo gem update --system
//gemを最新バージョンに。

gem update sass
//sassを最新バージョンに。

sass -v
//sassがちゃんとインストールされているか確認。

バージョンが表示されればSassのインストールは完了です。
たったこれだけ！

Scssファイルを作成する

これがしたかったんだよ！Sassとか知るか！
適当にコードを書きます。
今回は仮にファイル名をstyle.scssとします。

/* style.scss */
.wrapper {
  width: 100%;
  p {
    text-align: center;
    span {
      color:red;
    }
  }
}

適当な場所に保存。ターミナルでその場所のパスを記述。

sass sass-test/style.scss:sass-test/style.css

とすれば勝手にcssファイルを出力してくれます。

出力ファイル

.wrapper {
  width: 100%;
}
.wrapper p {
  text-align: center;
}
.wrapper p span {
  color: red;
}

やったね!

Snooze

autumnをスペルミスしたままエンターx2してしまいました。