こんにちは。

遠藤です。

いよいよ実践編です。

ひたすらサンプルを書いていきます！

Sass

入れ子

Sassは入れ子形式で記述できます。

#contents {
	width: 600px;
	p {
		margin: 0 0 1em;
		em {
			color: #f00;
		}
	}
}

コンパイルすると

#contents {
	width: 600px;
}
#contents p {
	margin: 0 0 1em;
}
#contents p em {
	color: #f00;
}

変数

sassは変数が使えます

$red: #FF0000;

.title {
	color: $red;
}
#contents {
	.infomation {
		border: 1px solid $red;
	}
}

コンパイルすると

.title {
	color: #ff1122;
}

#contents .infomation {
	border: 1px solid #ff1122;
}

アンパサンド（&）

疑似クラスや親要素を参照することができます。

.contents{
	background: #FFF;
	&:hover{
		background: #000;
	}
	&.brother{
		background: #333;
	}
	.main &{
		background: #999;
	}
}

コンパイルすると

.contents {
  background: #FFF;
}
.contents:hover {
  background: #000;
}
.contents.brother {
  background: #333;
}
.main .contents {
  background: #999;
}

演算

sassは演算子だってかけちゃいます。

.contents{
	margin: 10px * 10;
	width: 100px - 10 * 2;
	height: (100px / 2);
}

コンパイルすると

.contents {
	margin: 10px;
	width: 80px;
	height: 50px;
}

※除算のばあい、括弧が必要です。

round

sassでは四捨五入の関数も準備されてます。
round()は小数点以下を四捨五入してくれます。

.contents{
	width: (51px / 2);
	height: round(51px / 2);
}

コンパイルすると

.contents {
	width: 25.5px;
	height: 26px;
}

rgba

sassでは16進数で入力したカラーコードをRGBA形式に変換できます。

.contents{
	background: rgba(#ff0000,0.8);
}

コンパイルすると

.contents {
	background: rgba(255, 0, 0, 0.8);
}

Mixins

sassでは変数より便利なMixinsという複数定義ができます。

@mixin mix-border($value: 5px) {
	-webkit-border-radius: $value;
	-moz-border-radius: $value;
	border-radius: $value;
}

.contents-a {
	@include mix-border;
}
.contents-b {
	@include mix-border(10px);
}

コンパイルすると

.contents-a {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.contents-b {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

コメント

Sassではコメントが2パターンあります。
「//」と「/* */」です！

// css入らないコメント
.sample-a{
	color: #000;
}
/* cssに入るコメント */
.sampe-b{
	color: #000;
}

コンパイルすると

.sample-a{
	color: #000;
}
/* cssに入るコメント */
.sampe-b{
	color: #000;
}

セレクタの継承

Sassではセレクタの継承ができます。

h1 {
	border: 4px solid #ff9aa9
}
.speaker {
	@extend h1;
	border-width: 2px;
}

コンパイルすると

h1, .speaker {
	border: 4px solid #ff9aa9;
}
 
.speaker {
	border-width: 2px;
}

compass

さらにコンパスを使うとこんなに便利に！

Clearfix

クリアフィックスをする場合、下記の様に書きます。

@import "compass/utilities/general/clearfix";
.sample {
	@include clearfix;
}

コンパイルすると

.sample {
	overflow: hidden;
	*zoom: 1;
}

radius

角丸のベンダープレフィックスもcompassなら一行で！！

@import "compass/css3/border-radius";
.sample {
	@include border-radius(5pc);
}

コンパイルすると

.sample {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px;
}

box-shadow

ボックスシャドウのベンダープレフィックスもcompassなら一行で！！

@import "compass/css3/box-shadow"
.sample {
	@include box-shadow(1px 2px 3px #444);
}

コンパイルすると

.sample {
	-webkit-box-shadow: 1px 2px 3px #444444;
	-moz-box-shadow: 1px 2px 3px #444444;
	box-shadow: 1px 2px 3px #444444;
}

compassには上記以外にヘルパーや、ページレイアウトの支援などここでは紹介しきれないほど高機能です。
ここの記事なんかより、公式http://compass-style.org/を見たほうが・・・