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

4-5 自作関数を定義する @function

オリジナル関数の例

@function halfSize($value) {
	@return $value / 2;
}

.boxA { 
	width: halfSize(100px); 
}

.boxA {
  width: 50px;
}

ネイティブ関数と組み合わせる

@function halfSize($value) {
	@return round($value / 2);
}

.boxA { 
	width: halfSize(105px); 
}

.boxA {
  width: 53px;
}

値を変数に入れる

$width:105px;

@function halfSize() {
	@return round($width / 2);
}

.boxA { 
	width: halfSize(); 
}

初期値の設定

$width:105px;

@function halfSize($value:$width) {
	@return round($value / 2);
}

.boxA { 
	width: halfSize(); 
}
.boxB { 
	width: halfSize(200px); 
}

.boxA {
  width: 53px;
}
.boxB {
  width: 100px;
}

グリッドレイアウトの幅を自動計算する関数

//全体の幅
$width: 960;

@function s-column($column) {
	@return round($width / $column)+px;
}

.boxA {
	width: s-column(4);
}

.boxA {
  width: 240px;
}

//全体の幅
$width: 960;

//デフォルトのカラム数
$column: 4;

@function s-column($value:$column) {
	@return round($width / $value)+px;
}

.boxA {
	width: s-column();
}
.boxB {
	width: s-column(6);
}

.boxA {
  width: 240px;
}

.boxB {
  width: 160px;
}