Statamic-SASS icon indicating copy to clipboard operation
Statamic-SASS copied to clipboard

Parent selectors getting duplicated in media queries

Open emarthinsen opened this issue 11 years ago • 1 comments

This is a tricky one. My SCSS file looks like this:

@media all and (min-width: 1000px) {
  article {
    header {
      ol {
        li {
          .post-author {
            &:before { content: ''; }
            &:after { content: '*'; }
          }
        }
      }
    }
  }
} 

When it gets compiled, here is the source:

@media all and (min-width: 1000px) {
  article header ol li article header ol li .post-author: before {
    content: '';
  }

  article header ol li article header ol li .post-author:after {
    content: '*';
  }
}

The chain of selectors "article header ol li" are being repeated twice, when I was only expecting it once.

Any ideas on how to fix this?

emarthinsen avatar Apr 04 '14 03:04 emarthinsen

This plugin is really a very small wrapper (~100 lines) around phpsass.

You can try downloading the latest version of phpsass and replace this plugins phpsass folder.

I've personally stopped using this plugin, and use the popular ruby or node.js command line scss build tools to pre-compile my css before I deploy my sites.

Feel free to fork my repo and update the version of phpsass. I'd be glad to merge it back if it works and fixes bugs.

jlmessenger avatar Apr 04 '14 13:04 jlmessenger