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 定义为变量的任何地方..

但是查看编译后的css，似乎可以工作..

Answer 1

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

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

分解： 你通过电话在这里回复：

@include respond(phone) {…}

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

例如，您可以这样做：

@include respond(something) {}

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