SCSS Nesting Question

Hi SCSS Peeps! I'm trying to get in the habit of writing better cleaner SCSS, and I need some feedback.

Given the following (simplified) mix-in to generate media queries in SCSS:

@mixin breakpoint($point) {
    @if $point==desktop {
        @media (min-width: 70em) {
            @content ;
        }
    }
}

Example A

Do you nest a Parent and Child selector like this:

.parent {

    // Parent Mobile Styles

    .child {
        // Child Mobile Styles
    }

    @include breakpoint(desktop) {

        // Parent Desktop Stlyes

        .child {
            // Child Desktop Styles
        }
    }
}

Example B

or like this:

.parent {
    // Parent Mobile Styles

    @include breakpoint(desktop) {
        // Parent Desktop Styles 
    }

    .child {
        // Child Mobile Styles

        @include breakpoint(desktop) {
            // Parent Desktop Styles
        }
    }
}

Or something totally different? One of my problems is I need to pick one way to handle media queries and stick with it. Any suggestions?

Blog

SCSS Nesting Question

Jack Harner 🚀

Example A

Example B

Join Our Newsletter. No Spam, Only the good stuff.

Related