Как SASS узнает о переменной, которая не определена?

Question

У меня есть этот миксин:

@mixin respond($breakpoint) {
    @if $breakpoint == phone {
        @media (max-width: 37.5em) { @content };
    }
}

И этот миксин используется следующим образом:

  @include respond(phone) {
    font-size: 50%;
  }

Я не понимаю, как SASS знает, что это за переменная phone is?

Что передается, когда вы вызываете @include respond(phone), и аналогично, что сравнивается, когда это происходит? @if $breakpoint == phone

Так что же такое телефон? Я не вижу нигде в коде, который определяет телефон как переменную ..

Но, глядя на скомпилированный css, кажется, что он работает ..

Answer 1

Телефон является просто ссылкой для указанной c точки останова, вы также можете ввести что угодно вместо phone, маг c происходит внутри оператора if, где вы определяете, что означает phone:

@media (max-width: 37.5em) { @content };

Чтобы разбить это: вы передаете телефон, чтобы ответить здесь:

@include respond(phone) {…}

Затем в ответе mixin вы проверяете, равно ли $breakpoint phone или все, что вы написали в @include respond(). Если это правда, это будет go внутри оператора if.

Например, вы можете сделать что-то вроде этого:

@include respond(something) {}

@mixin respond($breakpoint) {
    @if $breakpoint == something {
        …do what you want
    }
}