@mixin内部で@functionの定義はできない

@mixin

sassの基本的な説明は、ここでは行いません。私が、調べても中々出て来なかったので、このことが誰かのためになれば良いと思います。

タイトルの通り、@mixinの内部では@functionの定義はできないという事
基本的な話はしないと言いつつも、

@mixinとは

スタイルの集まり(ルールセット)を定義しておき、他の場所で使える様にしたもの
引数を指定できることが@extendとの違い

@mixinの定義

@mixin ミクシン名($仮引数) {  // $widthを仮引数で定義
  プロパティ: 引数を利用した値; // $width * 3 みたいなことができる
}

@function

@functionとは

関数はmixinと似ているが、mixinがひとまとまりのルールセットを呼び出し側にインクルードするのに対し、関数は何らかの値を受け取って、その演算結果を値として返すために使用する(関数の方が粒度が小さい)。
関数は値、Mixinはルールのかたまり(値などもルールの一部)
@mixin内では定義できない(これは今回のことでわかった)

@functionで関数の定義

@function 関数名($引数1, $引数2: デフォルト引数) {
  //なんらかの処理をする
  @return 戻り値;
}

今回やってみたこと

要は冗長な書き方を自作関数をつかってmixin内で定義することでシンプルにしたかったという事

自作のエラーが起きたmixin

@mixin circleOrbit($width, $height, $time, $delay) {
  // 親要素に対する周回軌道をつくる
  $top: 0;
  $left: 0;
  // === 関数を使わない書き方 ====
  // @if $width>=50 {
  //   $left: 25 - ($width - 50) / 2;
  // }

  // @else {
  //   $left: 25 + (50 - $width) / 2;
  // }

  // @if $height>=50 {
  //   $top: 25 - ($height - 50) / 2;
  // }

  // @else {
  //   $top: 25 + (50 - $height) / 2;
  // }
  // ==== ここまで ====

  @function setPosition($whvalue) {
    @if $whvalue>=50 {
      $top: 25 - ($whvalue - 50) / 2;
    }
    @else {
      $top: 25 + (50 - $whvalue) / 2;
    }
    @return $top
  }

  position: absolute;
  left: $left;
  //top: setPosition($top);
  top: $top; 
  width: $width;
  height: $height;

  @keyframes anime {
    0% {
      //回転時の初期値
      transform: rotate(0deg) translate(-100%) rotate(0deg);
    }

    100% {
      transform: rotate(360deg) translate(-100%) rotate(-360deg);
    }
  }

  animation: {
    name: anime; //keyframesで定義した名前, none
    duration: $time; // アニメーションの総時間,s(秒数), ms(1/1000秒)
    timing-function: linear; // イージングの指定
    delay: $delay; // 開始の遅延時間, s(秒数), ms(1/1000秒)
    iteration-count: infinite; // 整数値, infinite(無限に繰り返す)
  }
}

このような感じで改めてコードの確認をしたものの動いたとしてもロジックが違うよね！というのはご了承ください。
関数の呼び出しをmixin内で呼ぶことができると思っていたのですが、@functionを外に出すとコンパイルエラーにならず、中に入れるとコンパイルエラーになります。

本題

結論からいうと正直よくわからないができないということ。VS codeの拡張機能の"Live Sass Compiler"を使ってscssファイルのコンパイルを見守っていただいているのですが、コンパイル時のエラーで以下の様なメッセージが表示されていました。

エラー文

Compilation Error
Error: Functions may not be defined within control directives or other mixins.

翻訳すると
関数は、制御ディレクティブや他のミキシンの中で定義することはできません。
とのことでした。つまり、@if、@for、@while、@eachなどの制御文、およびミクシン内では@functionは定義できない様です。決まりなのでしょうがない。

まとめ

最近はJavaScriptを勉強していたので、同じ様な発想でSassに挑んでいたのですが、ちょいちょいSassには曖昧な部分が多く、こちらがわで決め事を作らないといけないなぁというもっと縛られたい願望が募っていたのですが、これはこれでわりの合わない決まりだと思いました。またエラー文よりも先にネットの記事を検索していたのですが、エラー文にそのまま答えがのっていたのは反省するものです。