Presets

Output Style

Nested (with &)Native CSS nesting syntaxNested (direct)Implicit nesting without &Flat (legacy)Traditional non-nested CSS

Selector Tree

class.card

elementheader

class.title

class.subtitle

elementbody

class.content

class.image

elementfooter

class.actions

modifier&--featured

state&:hover

Add Child to Selected

Selected: .card

Options

Include comments

Save/Load

Generated CSS

.card {
  /* styles */

  & header {
    /* styles */

    .title {
      /* styles */
    }

    .subtitle {
      /* styles */
    }

  }

  & body {
    /* styles */

    .content {
      /* styles */
    }

    .image {
      /* styles */
    }

  }

  & footer {
    /* styles */

    .actions {
      /* styles */
    }

  }

  &--featured {
    /* styles */
  }

  &:hover {
    /* styles */
  }

}

Selector Tree Visualization

.card

header

.title

.subtitle

body

.content

.image

footer

.actions

&--featured

&:hover