#hottake CSS is too hard to read

As a #UX designer, I want code to have a clear, clean syntax that is easy to understand. I was excited that Nesting would improve how to write/read CSS but I'm horribly confused, e.g. when to use &. Here is the 'help text': 

"Nesting classes without `&` will always result in descendant selectors. Use the `&` symbol to change that result"

This means nothing to me. I understand it's a complex problem but does the syntax need to be so baroque? 

 @957492b3 The Sass documentation makes this clearer because it shows examples (and Sass invented this syntax).

div {
  .foo {
  }
}

Becomes `div .foo` (note the space between).

div {
  &.foo {
  }
}

Becomes `div.foo` (no space between).

https://sass-lang.com/documentation/style-rules/parent-selector/ 

 @957492b3 & stands for the parent selector. For example:

a {
  & b {}
  c & {}
}

is the same as

a {}
a b {}
c a {} 

 hmmm this is interesting. Have you found any good tools that you like using better?