search

gss / engine

GSS engine
http://gss.github.io
MIT License
2.87k stars 103 forks source link

Trivial usage doesn't work for non-obvious reasons--scopes? #164

Closed endash closed 9 years ago

endash commented 9 years ago

So after reading through the guide, I cannot for the life of me figure out why the following doesn't (or at least, shouldn't) work:

<head>
    <style type="text/gss">
      #one {
        height: == 200;
      }

      #two {
        height: == #one[height];
      }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
</body>

It works if I eliminate the grouping and have them (both) as top-level rules, which would seem to indicate that it's an issue with scopes. It seems a bit crazy, though, not to be able to group rules and still make explicit references to an element. Am I missing something here or is this by design?

cbchouinard commented 9 years ago

Hi endash, when using a selector within a ruleset, you're a selecting from descendant elements. 

#two {
        height: == #one[height];
      }

is the equivalent of (#two #one)[height]. You could use the $ global combinator to select from the root element: 

#two {
        height: == ($ #one)[height];
      }

For more information check the section "Selector within rulesets" in our selector guide: http://gridstylesheets.org/guides/selectors

Hope this help, let us know if you need more info.

endash commented 9 years ago

OK Thanks. The docs could be clearer IMHO, but as pointed out it does address my problem upon further inspection. At the very least, it's somewhat counterintuitive and maybe warrants a call-out. I'm going to keep track of the pitfalls I encounter and will hopefully put together some suggested edits from a newb's perspective.

endash commented 9 years ago

The more times I re-read the section the less unintuitive it seems. Then again, it's hard to "unknow" the answer and see things from the same perspective as before. In hindsight it definitely feels dumb to have missed it :P

Inviz commented 9 years ago

Thanks for constructive feedback. We're going to restructure docs and work on some wording. It will be interesting to see your list of pitfalls.

It was a hard road to this decision of local variables and selectors, but it turned out good. In 2.1 we'll have $(#selector) syntax instead of ($ #selector) available, and will overcome current gotcha making the latter be treated as collection, and not a singular element (causes unintuitive plural binding).