SASS 如何知道未定义的变量？

Question

我有这个混入：

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

而这个 mixin 是这样使用的：

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

我不明白的是SASS怎么知道变量phone是什么？

调用 @include respond(phone) 时传递的是什么？类似地，发生这种情况时比较的是什么？ @if $breakpoint == phone

那么什么是phone？我在将 phone 定义为变量的代码中看不到任何地方..

但是看看编译好的css，好像可以..

Answer 1

phone 只是特定断点的参考，您也可以键入任何内容而不是 phone，魔术发生在 if 语句内部，您可以在其中定义什么是 phone 参考：

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

分解：您传递一个 phone 以在此处回复：

@include respond(phone) {…}

然后在 mixin 响应中检查 $breakpoint 是否等于 phone 或您在 @include respond() 中写入的任何内容。如果为真，它将进入 if 语句。

例如，您可以这样做：

@include respond(something) {}

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

How does SASS know about a variable that is not defined?