【Sass】「ベースは既にできている。いざ初めてのSassで量産コーディング！」の時、まずはこれだけ覚えておきたい事

HTML&CSS

hakoishi

2012.05.25

自宅も会社もWindowsなのにcoda2買いました。hakoishiです。
俺、来月MacBook買うんだ…

さて。今回は設計済のSassに乗っかってコーディングする時、とりあえずこれだけ覚えたら良いよって事をまとめました。

既存のフレームワークを使ったり、設計は他のスゴイ人がやってくれたり、で実際触るのは量産の部分だよって人も少なくないかと思います。
そんな人はとりあえず、これだけでも覚えておくとよいかも。

まずは基本のネスト
変数を使う
@include
@extend
疑似クラスなど
ネストの上階層にセレクタ付与

まずは基本のネスト

【scss】


ul.unit-pic {
	margin-bottom: 30px;
	li {
		width: 150px;
		float: left;
		margin-right: 20px;
		img {
			border: 1px solid #666666;
		}
		span {
			color: #666666;
		}
	}
}

【生成されるcss】


ul.unit-pic {
	margin-bottom: 30px;
}
ul.unit-pic li {
	width: 150px;
	float: left;
	margin-right: 20px;
}
ul.unit-pic li img {
	border: 1px solid #666666;
}
ul.unit-pic li span {
	color: #666666;
}

プロパティの開始位置と同じ階層でセレクタを書き始め、そして閉じます。

変数を使う

【scss】


p {
	background-image: url(#{$img_common}bg.jpg);
	border: 1px solid $base_gray1;
	width: $base_width;
}

【生成されるcss】


p {
	background-image: url(/img/common/bg.jpg);
	border: 1px solid #333333;
	width: 950px;
}

定義済のカラーコードや数値などを呼び出すことができます。
※ここにあげているの変数名は例です。
実際に作業に入る際には、設計を担当した方に変数の定義先ファイルなどを確認して進めてください。

@include

【scss】


p {
	@include clearfix;
	@include border-radius(15px 15px 0 0);
}

【生成されるcss】


p {
	overflow: hidden;
	*zoom: 1;
	-webkit-border-radius: 15px 15px 0 0;
	-moz-border-radius: 15px 15px 0 0;
	-ms-border-radius: 15px 15px 0 0;
	-o-border-radius: 15px 15px 0 0;
	border-radius: 15px 15px 0 0;
}

@mixinで定義されたプロパティセットを呼び出せます。
定義のされ方によっては引数の使用も可能となります。
※定義内容は設計者に確認を。

Compassを使う場合はこちらのリファレンスもご参照ください。

Compass Core Framework | Compass Documentation

@extend

【scss】


ul.list01 {
	margin-bottom: 20px;
	li {
		@extend .list-disc;
		color: #f00;
	}
}

【生成されるcss】


ul.list01 {
	margin-bottom: 20px;
}
ul.list01 li {
	list-style-type: disc;
	margin: 0 0 5px;
	color: #f00;
}

「@extend (セレクタ)」で他セレクタのスタイルをそのまま持ってくることができます。

疑似クラスなど

【scss】


ul {
	margin-bottom: 30px;
	li {
		width: 150px;
		float: left;
		margin-right: 20px;
		&:last-child {
			border: none;
			margin-bottom: 0;
			padding-bottom: 0;
		}
	}
}

【生成されるcss】


ul {
	margin-bottom: 30px;
}
ul li {
	width: 150px;
	float: left;
	margin-right: 20px;
}
ul li:last-child {
	border: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

付与したいセレクタの前に「&」を付けます。
こちらはネストの一つ上の要素に対して付与されます。

ネストの上階層にセレクタ付与

【scss】


#containner {
	width: 900px;
	background-color: #FFFFFF;
	#containner-inner {
		margin: 10px;
        #home & {
        	margin: 20px;
    	}
	}
}

【生成されるcss】


#containner {
	width: 900px;
	background-color: #FFFFFF;
}
#containner #containner-inner {
	margin: 10px;
}
#home #containner #containner-inner {
	margin: 20px;
}

付与したいセレクタの後に「 &」を付けます。
こちらはネストの最上位に付与されます。