Question

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

在组件的媒体查询中使用的变量。在官方文档中，我仅看到使用responsive utilities的参考，但没有响应变量的约定。例如，让我们使用以下代码：

.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;
        }
    }
}

Answer 1

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

正如您针对特定情况所说的那样，文档并不十分清楚。因此，您可以选择命名方式。重要的是您要保持一致的命名，并且其他开发人员必须清楚约定是什么。

响应变量

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

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

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

可以看到类似的示例here。

嵌套变量

来自docs：

组件不应公开内部结构。组件中使用的变量在其名称空间后应具有平坦的结构。

您在这里的命名过于明确了组件的内部结构。我建议类似

$Nav-listItem-lastItem-marginRight

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