吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

Sassの既存関数について

2014年3月3日 / category : reference-sass, sass

Sassで既に用意されている関数を紹介します。

数値の絶対値を取得する – abs($number)

Sass
$value: -10;

div{
	margin: $value + px;
	padding: abs($value) + px;
}
CSS – コンパイル後
div {
	margin: -10px;
	padding: 10px;
}

数値の小数点以下を四捨五入する – round($number)

Sass
$value: 3.33333;

div{
	margin: $value + px;
	padding: round($value) + px;
}
CSS – コンパイル後
div {
	margin: 3.33333px;
	padding: 3px;
}

数値の小数点以下を切り上げる – ceil($number)

Sass
$value: 3.33333;

div{
	margin: $value + px;
	padding: ceil($value) + px;
}
CSS – コンパイル後
div {
	margin: 3.33333px;
	padding: 4px;
}

数値の小数点以下を切り下げる – floor($number)

Sass
$value: 3.33333;

div{
	margin: $value + px;
	padding: floor($value) + px;
}
CSS – コンパイル後
div {
	margin: 3.33333px;
	padding: 3px;
}

16進数のrgb値と透明度を指定してrgba形式に変数する – rgba($color, 透明度)

Sass
div{
	background: rgba(#123456, 0.5);
}
CSS – コンパイル後
div {
	background: rgba(18, 52, 86, 0.5);
}

明るい色を取得する – lighten($color, 透明度)

Sass
div{
	background: lighten(#000, 0.5);
}
CSS – コンパイル後
div {
	background: #010101;
}

暗い色を取得する – darken($color, 透明度)

Sass
div{
	background: darken(#fff, 0.5);
}
CSS – コンパイル後
div {
	background: #fefefe;
}

2つの色の中間色を取得する – mix($colorA, $colorB, 透明度)

Sass
div{
	background: mix(#000, #fff, 0.5);
}
CSS – コンパイル後
div {
	background: #fdfdfd;
}

リスト(配列)のN番目の値を取得する – nth($array, n)

Sass
$list: 10, 20, 30, 40;

div{
	margin: #{nth($list, 2)} + px;
}
CSS – コンパイル後
div {
	margin: 20 + px;
}