Home/ Questions/Q 8856111
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T14:17:10+00:00

Say I have a placeholder selector in Sass. Within that selector I write some

  • 0

Say I have a placeholder selector in Sass. Within that selector I write some styles where it becomes apparent that I need to check for the feature using Modernizr.

The problem appears that you go to use the .no-generatedcontent or .generatedcontent classes provided by modernizr but they can’t be used as they will be in the wrong hierarchical location once the placeholder selector has done it’s work.

The only way I can see of solving this is to put them outside the placeholder selector, but this messes up my styles where Sass is meant to help keep my styles more organised.

Any ideas on how this can be work-around?

Here’s an example of what I mean:

The <html> tag at the top of my page once modernizr has completed it’s work:

<html class="js flexbox flexboxlegacy canvas canvastext webgl touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-allumistd-n1-active wf-freightsanspro-n3-active wf-automate-n4-active wf-automate-n7-active wf-active">

Now, Say I have a placeholder selector called %styles

%styles {
li {
this: this;
}
.no-generatedcontent li {
this: that;
}
}

Now, I go and use this placeholder somewhere in my code as below:

.main {
section {
.box-area {
color: red;
@extend %styles;
}
}
}

It seems apparent to me that the modernizr class is in the wrong location for it to have any effect. It’s a sort of hierarchy problem. I could solve it by putting it outside the placeholder but then I have to @extend it separately and my sass code gets in a mess which is the primary reason I started using sass to keep my styles tidier.

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Sass:

    %styles {
    li {
        border: 1px solid red;

        .no-generatedcontent & { // note the location of the & here
            border: 1px solid red;
        }
    }
}

.main {
    section {
        .box-area {
            color: red;
            @extend %styles;
        }
    }
}

    The CSS:

    .main section .box-area li {
  border: 1px solid red; }

.no-generatedcontent .main section .box-area li, .main section .no-generatedcontent .box-area li {
  border: 1px solid red;
  background: #CCC; }

.main section .box-area {
  color: red; }

    There seems to be a bug when using @extend (see how it’s generating 2 selectors on the .no-generatedcontent line? Sass 3.2.3). This doesn’t happen if I use a mixin instead:

    .main section .box-area {
  color: red; }

  .main section .box-area li {
    border: 1px solid red; }

  .no-generatedcontent .main section .box-area li {
    border: 1px solid red;
    background: #CCC; }
    • 0