How to overwrite Referencing Parent Selector using Mixin in SCSS

Question

I had a common used component and its scss is like this:

.component {
    margin-right: 12px;

    &.specified-use-case {
        margin-right: 30px;

        &:nth-child(odd) {
            margin-right: 70px
        }
    }
}

Now I want everything has same style in mobile view

.component {
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) {
        margin-right: 0px;
        margin-bottom: 14px;
    }

    &.specified-use-case {
        margin-right: 30px;

        &:nth-child(odd) {
            margin-right: 70px
        }
    }
}

But this can't change style for "specified-use-case" in mobile view. In order to do it I have to

.component {
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) {
        margin-right: 0px;
        margin-bottom: 14px;
    }

    &.specified-use-case {
        margin-right: 30px;

        @include viewport(mobile) {
            margin-right: 0px;
            margin-bottom: 14px;
        }

        &:nth-child(odd) {
            margin-right: 70px

            @include viewport(mobile) {
                margin-right: 0px;
                margin-bottom: 14px;
            }
        }
    }
}

Which just doesn't seem right to me. Is there a better way to define mobile view css just for once?

score 2 · Accepted Answer · answered Aug 01 '18 at 05:40

According to CSS' specificity rules (try this calculator) you unfortunately need to repeat yourself. What your SCSS interpreter does is just compiling what you've written to standard CSS, which will look something akin to:

.component {
 margin-right:12px
}
@media (max-width:768px) {
 .component {
  margin-right:0px;
  margin-bottom:14px
 }
}
.component.specified-use-case {
 margin-right:30px
}
@media (max-width:768px) {
 .component.specified-use-case {
  margin-right:0px;
  margin-bottom:14px
 }
}
.component.specified-use-case:nth-child(odd) {
 margin-right:70px
}
@media (max-width:768px) {
 .component.specified-use-case:nth-child(odd) {
  margin-right:0px;
  margin-bottom:14px
 }
}

As you can see, you're overriding each class with a @media ruleset just after it has been declared. And since I'm a big proponent to never use !important (because you'll open a pandoras box), the only way you can shorten your SCSS is doing:

.component {
    margin-right: 12px;

    // some predefined mixin
    @include viewport(mobile) {
        margin-right: 0px;
        margin-bottom: 14px;  // only need to define margin-bottom once, here.
    }

    &.specified-use-case {
        margin-right: 30px;

        @include viewport(mobile) {
            margin-right: 0px;
            //margin-bottom: 14px;, remove this
        }

        &:nth-child(odd) {
            margin-right: 70px

            @include viewport(mobile) {
                margin-right: 0px;
                //margin-bottom: 14px;, remove this
            }
        }
    }
}

Hope this helps!

score 1 · Answer 2 · answered Jul 31 '18 at 22:16

1

You can put the rules inside of the media query:

@include viewport(mobile) {
    margin-right: 0px;
    margin-bottom: 14px;

    &.specified-use-case {
        margin-right: 0px;
        margin-bottom: 14px;
    }
}

answered Jul 31 '18 at 22:16

musicnothing

3,977
24
43

Thanks, but this still can't prevent from repeating same code, and I need another selector for pseudo class nth-child – Keming Jul 31 '18 at 23:03

Who Me Dunno Mate · Answer 3 · 2018-07-31T22:32:59.133

1

seems like sass is wrong because you specify margins above a breakpoint, try this:

.component {
    margin-right: 12px;

&.specified-use-case {
    margin-right: 30px;

    &:nth-child(odd) {
        margin-right: 70px
    }
  }
 // some predefined mixin
@include viewport(mobile) {
    margin-right: 0px;
    margin-bottom: 14px;
}
}

edited Jul 31 '18 at 22:32

answered Jul 31 '18 at 22:22

Who Me Dunno Mate

474
5
15

How to overwrite Referencing Parent Selector using Mixin in SCSS

3 Answers3