<script>
export default {
}
</script>

<template>
<div>
  <div class="scss-method-general">
    {{'@function getsize($zoom) { //一般调用\n'
    + '  @return 2 * $zoom\n'
    + '}\n'
    + '.scss-method-general {\n'
    + '  font-size: getsize(6.5);\n'
    + '}'}}
  </div>

  <div class="scss-method-named">
    {{'@function getsize($zoom) { //具名参数\n'
    + '  @return 2 * $zoom\n'
    + '}\n'
    + '.scss-method-named {\n'
    + '  font-size: getsize($zoom: 6.5);\n'
    + '}'}}
  </div>

  <div class="scss-method-varargs">
    {{'@function getsize($args...) { //不定参数\n'
    + '  $size: 2;\n'
    + '  @each $zoom in $args {\n'
    + '    $size: $size * $zoom;\n'
    + '  }\n'
    + '  @return $size\n'
    + '}\n'
    + '.scss-method-varargs {\n'
    + '  font-size: getsize(6, 1);\n'
    + '}'}}
  </div>
</div>
</template>

<style scoped lang="scss">
@function getsize($zoom) { //一般调用
  @return 2 * $zoom
}
.scss-method-general {
  font-size: getsize(6.5);

  color: #126085;
  left: 10;
  top: 10;
  width: 240;
  height: 140;
}

@function getsize($zoom) { //具名参数
  @return 2 * $zoom
}
.scss-method-named {
  font-size: getsize($zoom: 6.5);

  color:#126085;
  left: 10;
  top: 140;
  width: 240;
  height: 140;
}

@function getsize($args...) { //不定参数
  $size: 2;
  @each $zoom in $args {
    $size: $size * $zoom;
  }
  @return $size
}
.scss-method-varargs {
  font-size: getsize(6, 1);

  color: #126085;
  left: 10;
  top: 270;
  width: 240;
  height: 180;
}
</style>