SCSS Duplicate Rule Elimination

user_5969463 0
Viewed 33

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%;

sass css html
2 Answers

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 class="box"></div>

user_60222430

CSS(SCSS) accepts last value of same property. So you should leave only one of your right property.

Moreover you should delete (min-width: 0) in media, because it is (min-width: 0) BY DEFAULT.

user_183791920
Related