Sassの関数(数値操作)

前回のカラーコードの操作と比べるとエクセル関数と使い方が似ているのでこちらの方が
とっつきやすいです。

abs()

数値の絶対値(0からどれくらい離れているか)を出力します。


sass

$margin :  -15px;

section{
	.main{
	 margin: $margin;
	}
	
	.sub{
	 margin: abs($margin);
	}
}

css(コンパイル後)

section .main {
  margin: -15px;
}
section .sub {
  margin: 15px;
}

round()

数値の小数点を四捨五入


sass

$width :  100%;

.section{
 .firstColumn{
	 width: $width / 6;
	}
 .secondColumn{
	 width: round($width / 6);
	}
}

css(コンパイル後)

.section .firstColumn {
  width: 16.66667%;
}
.section .secondColumn {
  width: 17%;
}

ceil()とfloor()

ceil()は小数点切り上げ
floor()は切り下げ


sass

$width :  100%;

.kiriage{
 .firstColumn{
	 width: $width / 6;
	}
 .secondColumn{
	 width: ceil($width / 6);
	}
}

.kirisage{
 .firstColumn{
	 width: $width / 6;
	}
 .secondColumn{
	 width: floor($width / 6);
	}
}

css(コンパイル後)

.kiriage .firstColumn {
  width: 16.66667%;
}
.kiriage .secondColumn {
  width: 17%;
}

.kirisage .firstColumn {
  width: 16.66667%;
}
.kirisage .secondColumn {
  width: 16%;
}