Sassを使ってCSSを爆速コーディング！Sassの導入方法と使いかた。

巷でとても話題になっているCSSを爆速に書くために生まれたすごいやつSassの導入方法と使いかたを書いていこうかと。
ちなみに、公式サイトはこちら。
http://sass-lang.com/

Rubyの導入

MacOSであればすでに入っているので、特にきにすることはありませんが、不安な人はこちらの記事を参考に。
http://blog.livedoor.jp/noanoa07/archives/1897747.html

Windowsの場合は入れる必要があります。
Windowsの方は
http://www.rubylife.jp/install/install/index1.html
こちらを参考にして入れてみてください。

今回はMacでのインストールの方法を記載していきます。
Windowsもほぼ同じなので大丈夫だとは思いますが。

Sassのインストール

ターミナルを起動して

$ sudo gem install sass

と入力してEnter。
sudoで実行しているので、パスワードを聞かれると思うので、入力。
しばし待つと、インストールが終わるので、これで完了

実際に使ってみる

まず知っておくべきことは 拡張子 です。
Sassを使う場合.cssではなくなり
style.sassもしくはstyle.scssのどちらかになります。
この２種類の違いは 記法 にあります。

style.sass

#wrapper
    width: 1200px
    margin: 0 auto
    div#box
        width: 500px
        background: red

style.scss

#wrapper{
    width: 1200px;
    margin: 0 auto;
    div#box{
        width: 500px;
        background: red;
    }
}

.sassは{ }や;がない書き方。インデントで管理をする。
.scssはcssの記法でかけるのが特徴。

次にSassはそのままでは使えず コンパイル が必要です。
実際に書いたSassファイルをコンパイルするには
ターミナルから

$ cd hoge/sass/
$ sass style.scss:style.css

このようにコンパイルしてあげると、CSSファイルとしてそのディレクトリに生成されます。
オプションとして生成するCSSのタイプが４種類選べます。

• Nested 入れ子構造をインデントでうまく表現してくれる
• Expanded いわゆる普通のCSSとして生成してくれる
• Compact セレクタの中にあるスタイルの指定を１行で表示してくれる
• Compressed 全てを１行にしてくれる style.min.cssみたいなイメージ

オプションを付ける場合は

$ sass style.scss:style.css --style expanded

このように記述する。

Sassでできること

SassはCSSを爆速にかけるように、かつ管理しやすいように工夫されています。
代表的な使いかたを見ていきましょう！
記述は.scss方式です。

// スラッシュ２つでのコメントアウト

// $を付けると「変数」として使えます。
$w: 1200px;
$color: #3c3c3c;
$hover: #ff0000;

// mixin(プログラムの関数的なやつ)
@mixin boxStyle($width){
  width: $width;
  border: solid 1px #000000;
  border-radius: 5px;
}

// 入れ子構造
#wrapper{
  width: $w;
  margin: 0 auto;
  div#content{
    @include boxStyle(300px);
    color: $color;
    // 親セレクタを参照して、擬似セレクタを適用
    &:hover{
      background: $hover;
    }
  }
}

これをコンパイルすると

#wrapper{
  width: 1200px;
  margin: 0 auto;
}
#wrapper div#content{
  width: 300px;
  border: solid 1px #000000;
  border-radius: 5px;
  color: #3c3c3c;
}
#wrapper div#content:hover{
  background: #ff0000;
}

このように吐き出されます。
入れ子構造や変数、mixinを使うことで、爆速にかけます。
それ以外にも継承や、演算などもできます。
詳しくは以下の参考サイトをみると分かりやすいです！

参考サイト

とりあえず、ここをみるとだいたい全部のことがわかる。
http://www.saison-lab.com/web/sass-compass/