SCSS 重复规则消除

Question

我目前正在启动其他人制作的前端构建。在 linter 检查成功之前，该项目不允许我进行提交。它告诉我这里有一个重复的规则

@media (min-width:0) and (max-width: 575.98px){
    background: #fff;
    right: 5%;
    right: calc(5% - 2px);
}

对 SCSS 了解不多，我不确定这些是否真的重复（看起来是）。我也不确定应该如何消除冗余以允许 linter 继续进行。我的直觉是删除第一行 right: 5%;

Answer 1

SCSS 只不过是一种更简单的写法 CSS （它最终编译为 CSS ）而你得到的 linting 错误是因为你定义了right 属性两次，而为了清楚起见，它应该只定义一次属性。这就是为什么要制定 linter 规则以保持 CSS/SCSS 一致。

这里唯一的问题是，要使用的值是什么：是 5% 还是 calc(5% - 2px)？无论哪种方式，最后定义的一个都会被拾取。

@media (min-width:0) and (max-width: 575.98px){
    background: #fff;
    right: 5%;
    right: calc(5% - 2px); // « will be picked up
}

最后使用的属性示例：

.box {
  width: 50px;
  width: 100px;
  height: 50px;
  height: 100px;
  background: red;
  background: blue;
}

<div class="box"></div>

Answer 2

CSS(SCSS) 接受 相同属性 的最后一个值。所以你应该只留下你的对属性.

此外，你应该删除媒体中的(min-width: 0)，因为它是(min-width: 0) 默认。

SCSS Duplicate Rule Elimination