purescript-contrib / purescript-css

A clean, type-safe library for describing, manipulating and rendering CSS
Apache License 2.0
106 stars 40 forks source link

Nested rules #153

Open nsaunders opened 2 years ago

nsaunders commented 2 years ago

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;
}