使用扩展时出现奇怪的SASS输出

Question

我有以下SASS文件

_android.scss：

$width: 111px;
@import 'child';

.android .child {
    @extend %child;
}

_ios.scss：

$width: 999px;
@import 'child';

.ios .child {
    @extend %child;
}

_child.scss：

%child {
    width: $width;
}

app.scss：

@import 'ios';
@import 'android';

现在当我跑步时，我得到了：

$> sass app.scss
.ios .child, .android .child {
   width: 999px; }

.ios .child, .android .child {
   width: 111px; }

不是我的预期，这是

.ios .child {
    width: 999px;
}

.android .child {
    width: 111px;
}

我在这里做错了什么？

Answer 1

这是因为@extends被处理，因为它们首先在sass中找到，所有使用它们的选择器在那一点组合在一起（@extends有点贪心）而你是包括@extends占位符两次。

让我们逐步完成所发生的事情：

1. 已加载ios.sass，这会设置$width并包含%child
2. sass因为包含而遇到占位符，因此它会查看代码，获取该占位符的所有实例，对选择器进行分组并使用当前宽度值。
3. 下载了android.sass，$width设置为新值，再次包含%child。
4. sass重复步骤2.每次遇到@extends时，都会对其所有实例进行分组，并使用占位符中的值进行输出。

这就是为什么当您查看输出时，您会看到两个选择器已分组，并且该组在定义的每个$width值时重复两次。

如何解决问题

混合素最好。当遇到mixin时，它会在现场进行评估，并将结果属性集注入选择器。

@mixin width($width-in: 1000px) {
    width: $width-in;
}

.ios .child {
    @include width(111px);
}

.android .child {
    @include width(999px);
}

现在，让我们逐步介绍mixin示例

1. mixin已加载，sass知道它，但对它没有任何作用 - 把它想象成一个等待被调用的函数
2. 加载ios.sass并定义选择器
3. sass通过参数看到对mixin的调用，因此它接受参数，使用mixin并将返回的宽度值注入选择器
4. android.sass已加载...
5. sass看到另一个对mixin的调用并重复该过程，向新选择器中注入一个新的width值。

我的mixin定义中的PS我使用默认值1000px，如果调用了@include width();，则会使用该值。