scss - hiroy/docs GitHub Wiki

SCSS

まだ書きかけだよー。

SassはHamlの一部、そのまた一部がSCSS。SCSSはCSS3を拡張したもの

LESSとの比較

既存のCSSを容易に組み込めるのは「LESS」のメリットですが、通常のクラスセレクタによるルールセットとMixin用のルールセットが衝突する可能性があることがデメリットです。これを回避するために名前空間を利用することができますが、名前空間もIDセレクタと同様の記法のため、通常のIDセレクタによるルールセットと衝突する可能性があります。

http://dxd8.com/archives/217/ より。 http://d.hatena.ne.jp/nenjiru/20111101/css_scss_less でも同様の意見が書かれている。

Macでとりあえず使えるようにする

sudo gem update --system
sudo gem install sass

これだけ。gemのupdateは飛ばしてもよい気がするけど一応。gemspecの日付フォーマットエラーが出るかも。

SCSS→CSS

1つだけ変換

sass scss/foo.scss public_html/css/foo.css

まあ監視してscssファイルに変更があったら変換するよねということで

sass --watch scss/foo.scss:public_html/css/foo.css

ディレクトリごと

sass --watch scss:public_html/css

minifyする場合（改行もブロックコメントもなくなる）

sass --style compressed --watch scss:public_html/css

1行単位にする（改行あり、ブロックコメントは残る）

sass --style compact --watch scss:public_html/css

よくあるCSSのインデントにする（プロパティごとに改行、ブロックコメントは残る）

sass --style expanded --watch scss:public_html/css

ネスト

section {
  p {
    padding: 12px 0;
  }
}

が

section p { padding: 12px 0; }

と同じになる

親の参照

section {
  p {
    padding: 12px 0;
    &:first-child {
      padding-top: 0;
    }
  }
}

Media Query

section {
  p {
    padding: 12px 0;
    &:first-child {
      padding-top: 0;
    }
    @media all and (max-width:355px) {
      font-size: 14px;
    }
  }
}

つまりこうなる

@media all and (max-width:355px) {
  section p { font-size: 14px; }
}

@extend

変数

式と関数

インターポレーション

@mixin

引数

@import

コメント

/* ブロックコメント */
// とりあえず行コメント

SCSSでは//で始まる行コメントが利用できる。CSSに変換される際に消える。 通常のCSSと同じ形式のブロックコメントはCSSに変換されても残る。ただし--style compressedオプション付きで変換された場合はこれも残らない。

参考