Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

states using the parent selector (eg. [data-state="value"]& ) #146

Closed
ianstormtaylor opened this Issue Aug 1, 2011 · 5 comments

Comments

Projects
None yet
5 participants

I run into a lot of cases where I am deep in a nested selector, and I need to add a case for a state on the parent. Ideally that would be done like this:

[data-state="value"]&

(by placing the state on the other side of the parent selector), but that throws an error, and so I have to break out of the nesting and renest to the same level with the new state on the parent.

I think this would be a really nice addition to the language. (There might need to be some logic involved to put attribute selectors after class selectors after id selectors, as I thought I remember the ordering being important, but I might be wrong.)

What do you guys think?

Dykam commented Aug 2, 2011

I encountered the same. It is already possible to prepend like .parentClass &, but a way to be more flexible with the provided selector would be nice. It would make sass mixins a lot more powerful than they are now.

NoNoNo commented Dec 6, 2011

I propose some kind of CONCAT operator:

A {
  .flag1 & {
    color: red;

    .flag2 CONCAT & {
      color: blue;
    }
  }
}

would be compiled to:

.flag1 A {
  color: red;
}
.flag2.flag1 A {
  color: blue;
}

I needed this so badly that I wrote a SASS post-processor routine in PHP:

<?php

  $sCSS = preg_replace_callback('/([^\\s}]+)\\s+CONCAT\\s+([^\\s{]+)/', function ($asMatches) {
    if (in_array($asMatches[2][0], array('.', '#', ':'))) {
      return $asMatches[1].$asMatches[2];
    }
    if (in_array($asMatches[1][0], array('.', '#', ':'))) {
      return $asMatches[2].$asMatches[1];
    }
    throw new Exception('Fatal SASS-Error! Illegal CONCAT: '.$asMatches[0]);
  }, $sCSS);

Thanks & greetings!

This is something that I too could use. For instance: when using the html5 boilerplate's html conditional tag for lt-ie8, lt-ie7, etc and modernizr's classes on the html tag.

Owner

chriseppstein commented Aug 8, 2012

#286 will address this use case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment