2

我最近开始在我的 Sass 中使用 suitCSS 命名约定（不使用默认的 PostCSS 设置），目前还不清楚命名变量的正确方法是什么：

在组件的媒体查询中使用的变量。在官方文档中，我只看到了使用响应式实用程序的参考，但没有看到响应式变量的约定。例如，让我们看一下这段代码：

.MyComponent {
    margin-left: $MyComponent-marginLeft;

    @include media('sm') {
        margin-left: $sm-MyComponent-marginLeft;
    }
}

我应该使用什么变量名？$u-sm-MyComponent-marginLeft或者$sm-MyComponent-marginLeft为什么？

另一个问题是关于嵌套变量和/或伪类内部。

.Nav-listItem {
    &:last-child {
        .Nav-link {
            margin-right: $Nav-listItem-onLastChild-NavLink-marginRight;
        }
    }
}
4

1 回答 1

1

免责声明：基于意见的答案

正如您针对您的特定情况所说的那样，文档并不完全清楚。因此，您可以选择如何命名它们。重要的是您的命名是一致的，并且其他开发人员清楚约定是什么。

响应变量

对于响应变量的命名，我会选择以下约定

$BaconComponent-marginLeft-sm
$BaconComponent-marginLeft-md
$BaconComponent-marginLeft-lg

为什么？

对我来说，这在逻辑上是sm,md的lg子集，marginLeft因此应该继续marginLeft。当组合在一起时，如上所述，很容易扫描，因为变量的最后一个字符不同。

一个类似的例子可以在这里看到。

嵌套变量

从文档：

组件不应暴露内部结构。组件中使用的变量应该在其命名空间之后具有平面结构。

您在这里的命名对组件的内部结构过于明确。我会建议像

$Nav-listItem-lastItem-marginRight

我认为这更好地描述了变量的使用。

于 2019-12-17T09:05:26.597 回答