Re: Cross Referencing Between Elements

Because the reference chain resolves back to the element being defined, the
selector is invalid.

Although the conditions for recursion should be refined to include the
property in our figurings.


In the below example, the element can safely reference itself.  Both .foo's
width and margin-right are 100px.

Safe Recursion Example
===

.foo {
  width: $(.foo margin-right 50px);
  margin-right: 100px;
}


In the next example, the first cross-reference selector resolves back to
the element being defined AND the property being defined.  Therefore, the
selector fails and the fallback argument is used.  Both .foo's width and
margin-right resolve to 50px.

Unsafe Recursion Example With Fallback
===

.foo {
  width: $(.foo margin-right 50px);
  margin-right: $(.foo width 100px);
}


In the following example, the first cross-reference does not possess a
fallback, and so the next cross-reference up the chain is asked for one,
which it provides.  Both .foo's width and margin-right resolve to 100px.

Unsafe Recursion Example Without Fallback
===

.foo {
  width: $(.foo margin-right);
  margin-right: $(.foo width 100px);
}

Finally, in the example below, neither cross-reference supplies a valid
fallback.  They are both considered "tainted" and both values are invalid.

Tainted Recursion Example
===

.foo {
  width: $(.foo margin-right);
  margin-right: $(.foo width);
}




On Wed, Jun 11, 2014 at 3:38 PM, Boris Zbarsky <bzbarsky@mit.edu> wrote:

> On 6/11/14, 3:36 PM, Brian Blakely wrote:
>
>> In an instance where the cross-reference ends up selecting the element
>> being defined
>>
>
> What if it selects some other element that itself cross-referenced the
> original element?
>
>
>  2) Arbitrarily deep cross-reference nesting.
>>
>
> This is not just a problem for the fallback.
>
> -Boris
>

Received on Wednesday, 11 June 2014 20:48:49 UTC