compassでCSS3

compassを利用してCSS3を利用する方法

@include background-size(5px 5px);

といった具合に基本的に@includeの後に利用したいCSS3の記述を行ない、()内に値を記述する。

-webkit-transformなどは各値ごとに関数が設定されているので次のように記述

@include rotate(45deg);

グラデーションは少し複雑だがbackground-image()の中にlinear-gradient()を設定し、グラデーション部分はcolor-stops()で設定を行う。

@include background-image(linear-gradient(left top,color-stops(
	rgba(255,255,255,0),
	rgba(255,255,255,0) 45%,
	rgba(255,255,255,.2) 46%,
	rgba(255,255,255,.2) 54%,
	rgba(255,255,255,0) 55%,
	rgba(255,255,255,0)
)));