第4章 高度な機能を覚えてSassを使いこなそう

4-5 関数 を使って様々な処理を実行する

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

$margin: -15px;

section {
	margin-left: $margin;
	.item {
		float: left;
		width: 200px;
		margin-left: abs($margin);
	}
}

section {
  margin-left: -15px;
}
section .item {
  float: left;
  width: 200px;
  margin-left: 15px;
}

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

$width: 100%;

.boxA {
	width: $width / 6;
}
.boxB {
	width: round($width / 6);
}

.boxA {
  width: 16.66667%;
}
.boxB {
  width: 17%;
}

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

$width: 100%;

.boxA {
	width: $width / 3;
}
.boxB {
	width: ceil($width / 3);
}

.boxA {
  width: 33.33333%;
}
.boxB {
  width: 34%;
}

数値の小数点以下を切り捨てる floor()

$width: 100%;

.boxA {
	width: $width / 6;
}
.boxB {
	width: floor($width / 6);
}

.boxA {
  width: 16.66667%;
}
.boxB {
  width: 16%;
}

16進数のRGB値に透明度を指定して、RGBA形式に変換できる rgba()

body {
	background: rgba(#6a5468, 0.3);
}

body {
  background: rgba(106, 84, 104, 0.3);
}

.box {
	background: rgba(red, .15);
}

.box {
  background: rgba(255, 0, 0, 0.15);
}

明るい色をカンタンに作れる lighten()

body {
	background: lighten(#000, 30%);
}

body {
  background: #4d4d4d;
}

暗い色をカンタンに作れる darken()

body {
	background: darken(#fff, 20%);
}

body {
  background: #cccccc;
}

$c: #888;

.boxA {
	background: lighten($c, 20%);
}
.boxB {
	background: darken($c, 20%);
}

.boxA {
  background: #cccccc;
}
.boxB {
  background: #666666;
}

2つのカラーコードの中間色を作れる mix()

body {
	background: mix(#000, #fff, 50%);
}

body {
  background: #7f7f7f;
}

body {
	background: mix(rgba(000, 000, 000, .3), #fff, 50%);
}

body {
  background: rgba(216, 216, 216, 0.65);
}

$a: #000;
$b: #fff;

.boxA {
	background: mix($a, $b, 70%);
}
.boxB {
	background: mix($a, $b, 30%);
}

.boxA {
  background: #4c4c4c;
}
.boxB {
  background: #b2b2b2;
}