最終更新:2012-11-24 (土) 20:52:51 (1767d)  

Sass はてなブックマークを見る
Top / Sass

インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語

http://sass-lang.com/

Sass makes CSS fun again.

  • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  • It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

使い方

インストール

gem install sass 
  • 変更の監視
    sass --watch style.scss:style.css #To translate this Sass file into a CSS file
  • style.scssの変更を監視して、自動的にstyle.cssを更新してくれる
  • ディレクトリ単位の指定も可能。

文法

SCSS (Sassy CSS - CSS3のスーパーセット)

  • $blue: #3bbfce;
    .content-navigation {
      border-color: $blue;
      color:
        darken($blue, 9%);
    }

Sass (インデント構文 - 古い構文。)

  • $blue: #3bbfce
    .content-navigation
      border-color: $blue
      color: darken($blue, 9%)

機能

  • 変数
    • string
    • color
    • number
    • boolean
  • Nested Rules

mixins

  • mixins allow you to re-use whole chunks of CSS, properties or selectors.
  • @mixin?
  • @include?

selector inheritance

関数

制御構文

  • @for?
  • @while?

ツール

  • Compass - mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使えるようにするもの
  • Scout - Compass and Sass without all the hassle

関連

参考