SASS nesting class selectors in an element selector doesn't work

Question

I'm trying to nest the various classes for the div elements in SASS. However, the resulting CSS does not work correctly. I've read through the documentation and nothing specifically mentions doing this so I'm not sure if I'm doing something wrong.

This SASS code:

div {
    //various page elements
    .page_header {
        clear: both;
        float: left;
        color: $text-color-light;
        background-color: #2C3E50;
    }

    .page_header_title {
        clear: left;
        float: left;
    }
}

Results in the following CSS:

div .page_header {
  clear: both;
  float: left;
  color: #ECF0F1;
  background-color: #2C3E50; }
div .page_header_title {
  clear: left;
  float: left; }

When I first saw the resulting CSS I didn't see any reason why it wouldn't work. But I must be missing some knowledge about how CSS selectors work when they are separated like that because it has no effect on the page at all in Chrome. When I change it so the selectors are defined as div.page_header and div.page_header_title the CSS works properly, but I lose out on the nifty nesting functionality in SCSS.

Specifically I am developing an ASP.NET MVC5 website in Visual Studio 2013 Update 3 with Web Essentials 2013 for Update 3.

Am I doing something wrong or is this just not going to work?

score 4 · Accepted Answer · edited May 23 '17 at 12:16

I found the answer in one of the related questions off to the side after I posted: Sass .scss: Nesting and multiple classes?

I need to use the & related parent selector in the SCSS to make sure the selectors are concatenated together instead of separated.

This SASS code works:

div {
    //various page elements
    &.page_header {
        clear: both;
        float: left;
        color: $text-color-light;
        background-color: #2C3E50;
    }

    &.page_header_title {
        clear: left;
        float: left;
    }
}

And results in the proper CSS output:

div.page_header {
  clear: both;
  float: left;
  color: #ECF0F1;
  background-color: #2C3E50; }
div.page_header_title {
  clear: left;
  float: left; }

More info can be found here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector

SASS nesting class selectors in an element selector doesn't work

1 Answers1