SCSSの関数(@function)の使い方・使いどころ

// 関数を定義
@function fn($argument) {
  @return // 値を返す
}

// 関数を呼び出す
.example{
  color: fn(#f00);
}

@function pcvw($px, $standardWidth: 1366) {
  @return ($px / $standardWidth) * 100vw;
}

@function spvw($px, $standardWidth: 750) {
  @return ($px / $standardWidth) * 100vw;
}

.sample {
  font-size: pcvw(30);
}

@media screen and(max-width:768px) {
  .sample {
    font-size: spvw(20);
  }
}

.sample {
  font-size: 2.19619vw;
}

@media screen and (max-width: 768px) {
  .sample {
    font-size: 2.66667vw;
  }
}