Sass
Sass: Syntactically Awesome Style Sheets¶
Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.
$ gem install sass $ sass input.scss output.css
LibSass¶
A C implementation of a Sass compiler - libSass wrappers - sass/node-sass
Compass¶
- ベンダープレフィックス自動生成
- 画像をフォルダに置くだけでCSSスプライトを生成
- Variables, Mixins, Functions
- CSS3
- Layout, Reset, Typography
- SassとCompassを使って楽しくCSSコーディング！ - develo.org
- 楽しくコーディング！Sass,Compassのデフォルトmixinとカスタム関数 - develo.org
- 今日から使える！ Sass/compass ゆるめ勉強会
- 【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 ｜ Developers.IO
CSS Sprite¶
- Compassで簡単、CSSスプライト作成 - CSSスプライト作成の基礎 | CodeGrid
- 自動出力されたクラス（ファイル名ベース）を割り当てる方式 → 種類の違う静止アイコン
- 既存のクラス内にmixinをincludeしてbackground-positionを自動で割り当てる方式 → ボタンhoverなど
Sass library¶
- Family.scss
- Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of
:nth-child’ified elements, in an easy and classy way.