- From: Marat Tanalin | tanalin.com <mtanalin@yandex.ru>
- Date: Wed, 11 Jan 2012 16:23:35 +0400
- To: Brad Kemper <brad.kemper@gmail.com>
- Cc: Tab Atkins Jr. <jackalmage@gmail.com>,www-style@w3.org
10.01.2012, 20:04, "Brad Kemper" <brad.kemper@gmail.com>:
> On Jan 9, 2012, at 2:24 PM, Marat Tanalin | tanalin.com wrote:
>
>>> #example .foo .bar {
>>> color: blue;
>>> @nest .baz & {
>>> text-decoration: underline;
>>> }
>>> }
>>>
>>> ~TJ
>> Sounds interesting, though looks not quite readable and DRY. We are forced to always add redundant '&' (this could be very annoying in practice) even if all rules are without leading combinators and could be expressed without :this using my proposed syntax.
>>
>> BTW, @with/:this could be used with the same result as @nest/& from your example:
>>
>> @with (#example .foo .bar) {
>> :this {color: blue; }
>>
>> @with (.baz :this) {
>> :this {text-decoration: underline; }
>> }
>> }
>>
>> or with implicit :this:
>>
>> @with (#example .foo .bar) {
>> {color: blue; }
>>
>> @with (.baz :this) {
>> {text-decoration: underline; }
>> }
>> }
>
> I'd be nice if people writing these sort of selectors could also write what they expand out to, as the whole :this/& concept is not quite natural enough to immediately grok before getting familiar with it.
>
> As I understand it, your example (which looks much nicer and easier to read in its "implicit" form than either of the other two, though it is an awful lot of curly braces to get lost in), would expand to this:
>
> #example .foo .bar { color: blue; }
> .baz #example .foo .bar { text-decoration: underline; }
>
> Right so far? Then what about this:
>
> @with (#example .foo .bar) {
> {color: blue; }
>
> @with (.baz :this) {
> {text-decoration: underline; }
>
> @with (.qux :this .wibble) {
> {position:absolute;}
> }
> }
> }
>
> Is it this:
>
> #example .foo .bar { color: blue; }
> .baz #example .foo .bar { text-decoration: underline; }
> .qux .baz #example .foo .bar .wibble { position:absolute; }
Yes. ':this' can be considered as placeholder for selector passed to containing @with. So if we have:
@with (.lorem) {
.foo {}
@with (.ipsum :this .dolor) {
.amet {...}
}
}
it would be equivalent to:
.lorem .foo {...}
.ipsum .lorem .dolor .amet {...}
Perhaps meaning of '&' in current 'CSS Hierarchies Module Level 3' draft (http://dev.w3.org/csswg/css3-hierarchies/ ) is similar, but '&' seems to be annoying/littering compared to my proposed @with syntax which is probably more elegant and DRY.
> I think it would be less confusing if there was less of an abundance of curly braces to keep straight (especially if you write the whole thing in one line). How about this:
>
> @with (#example .foo .bar) [
> {color: blue; }
>
> @with (.baz :this) [
> {text-decoration: underline; }
>
> @with (.qux :this .wibble) [
> {position:absolute;}
> ]
> ]
> ]
>
> Then each set of declarations is in its familiar curly braces, but the embedding level is determined by square braces.
I think adding another brace type is unreasonable here.
> Except now I forget whats wrong with just doing this:
>
> @with (#example .foo .bar) {
> color: blue;
>
> @with (.baz :this) {
> text-decoration: underline;
>
> @with (.qux :this .wibble) {
> position:absolute;
> }
> }
> }
My original intention was to conform to current CSS fundamental syntax as much as possible. Other than that, it's fairly acceptable for me to mix property declarations (like 'color: blue;') with at-rules (@with) to simplify usage of @with as in your last code example.
What I'm really strongly opposed to is mixing property declarations (like 'color: blue;') with _selectors_ (selector rules) themselves. That's what I especially don't like in nonstandard solutions like SASS/LESS. See one of my previous messages for reasoning:
http://lists.w3.org/Archives/Public/www-style/2012Jan/0377.html
Received on Wednesday, 11 January 2012 13:56:20 UTC