SCSS重复规则消除

Question

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

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

由于不太了解SCSS，我不确定这些是否真的是复制的(它们看起来是)。我也不确定应该如何消除冗余，以允许过滤器进行。我的直觉是删除第一行right: 5%;

Answer 1

SCSS只不过是一种更容易编写CSS的方法(它最终会编译成CSS)，而你得到的检查错误是因为你定义了两次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)默认情况下,