SCSS Duplicate Rule Elimination-CodePudding

I am currently starting up a front-end build somebody else made. The project is not letting me do a commit until the linter check succeeds. It tells me that there is a duplicate rule here

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

Not knowing much about SCSS, I am not sure whether these are truly duplicate (they appear to be). I am also not sure as to how one should eliminate the redundancy to allow the linter to proceed. My hunch is to delete the first line right: 5%;

CodePudding user response：

SCSS is not more than an easier way to write CSS (it compiles to CSS in the end) and the linting error you get, is because you define the right property twice, while it should only be defined once as a property for clarity. That's why linter rules are in place to keep your CSS/SCSS consistent.

The only problem here is, what was the value to use: was it 5% or calc(5% - 2px)? Either way, the last one defined will be picked up.

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

Example for last properties used:

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

<div ></div>