Parent selector not working

[RedHatter]

When I use the code below #thing get a width of 0.

#content {
  width: == 800;
  #thing {
    width: == ^[width];
  }
}

But when I reference #content directly #thing gets a width of 800 as expected.

#content {
  width: == 800;
  #thing {
    width: == ($ #content)[width];
  }
}

What am I missing? Why doesn't the first code work?

[gabeblackbeard]

Hey there. I figure you probably found a way around this issue by now, but I'll leave here the solution I've found nonetheless, as maybe it will help others.

For some reason, if you are writing your code inside a separate file that is linked by the html page, your whole nesting must be done inside a "body" selector. Like this:

body {
    #parent-div {
        width: == 800;
        #child-div{
           width: == ^width;
        }
    }
}

If you do it like that, child-div's width will successfully refer to parent-div's width. Otherwise it seems it will refer to (I believe) the document's width.

If your code is in a style tag in the head of the html page, however, no "body" selector is necessary; your code would have worked as is.

I have no idea what causes this behavior, but there it is. Maybe someone will shed a better light on why it works like that.

[Inviz]

Try more up to date version from master.

[H-s-O]

Thanks @gabeblackbeard for the body selector tip !

If anyone of the GSS team is listening, this needs to be adressed in the documentation.