【Sass】@functionと@returnメモ

足し算引き算を@functionと@returnでする

変数名	足し引き
add	足し算
pull	引き算

Sass

//関数@function, @return
/*足し算*/
@function add($x, $y) {
  @return $x + $y;
}
p {
  width: add(100px, 200px);
}
/*引き算*/
@function pull($x, $y) {
  @return $x - $y;
}
p {
  width: pull(200px, 100px);
}

コンパイル後

CSS

/*足し算*/
p {
  width: 300px;
}

/*引き算*/
p {
  width: 100px;
}