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

4-7 自作関数を定義する @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;
}