purescript-contrib/purescript-css

Nested rules

nsaunders opened this issue · 0 comments

I was experimenting a bit with Clay today and found that it allows a nested selector to reference its parent, similar to & in languages like Sass and LESS.

Examples

Nested "self" with refinement

main = do
  putCss $ do
    star # byClass "foo" ? do
      byClass "bar" & do
        width nil

yields

.bar.foo
{
  width : 0;
}

Nested child

main = do
  putCss $ do
    star # byClass "foo" ? do
      star # byClass "bar" <? do
        width nil

yields

.foo > .bar
{
  width : 0;
}