Почему последовательность SASS @mixin не имеет значения?

Question

Если @mixin определен после правила, возникнет ошибка:

Ошибка: неопределенный mixin 'parent'.

.child {
  @include parent();
}

@mixin parent() {
  box-sizing: border-box;
}

Но если mixin2 определяется после mixin1, ошибки нет, почему это так?

@mixin parent() {
  @include parent2();
  box-sizing: border-box;
}

@mixin parent2() {
  margin: 1px;
}

.child {
  @include parent();
}

---

И то же самое для переменных:

.child {
  margin: $variable1;
}

$variable1 : 1px;

Это приводит к ошибке:

Ошибка: неопределенная переменная: "$ variable1".

Но это не

@mixin parent() {
  margin: $variable1;
}

$variable1 : 1px;

.child {
  @include parent();
}

Answer 1

Определение против использования

Когда вы компилируете ниже scss до css, код не будет сгенерирован, потому что mixin не скомпилируется пока вы не используете его.

@mixin parent() {
  @include parent2();
  box-sizing: border-box;
}

@mixin parent2() {
  margin: 1px;
}

и когда вы сделаете это

.child {
  @include parent();
}

При поиске mixin будет генерироваться css при компиляции.

В вашем первом случае выдается ошибка, потому что .child необходимо скомпилировать, а во втором - нет, потому что mixin никогда не скомпилируется, пока вы его не используете

Это причина, по которой мы объявите mixin / variables или импортируйте mixin / variables файл перед его использованием.

Надеюсь, я ответил на ваш вопрос!