!require needed on both variable and property in order to work

[cbchouinard]

In this example: http://codepen.io/cbchouinard/pen/bNRWzB

I need to do the following in order to get the #first element to really be 200px wide. I was wondering why if I'm specifying that the varX is required to be 200px and constraint the width of the #first element to be equal to that variable why do I also need to put !require on the width constraint?

first {

varX: == 200 !require;
width: == varX !require;
height: == varY;

}

Not sure if this is an issue or not but I would like to understand why we need to put !require on both so we can add it to the documentation.

[Inviz]

I think you stumbled upon important thing that should be covered in docs - implicit gaps.

When you use - gap within VFL grid without gap(my-gap-variable) it uses a variable named gap which could be implicitly between 2 vfl definitions within the same scope. Compare it to this codepen, where I use gap() explicitly:

http://codepen.io/anon/pen/qEjjZe

[Inviz]

Also please note, that in your code example, varX isn't hoisted within #first and only works because unhoisted variables are local by default.

first {

 varX: == 200 !require;
 width: == varX !require;
 height: == varY;

}

expands to

first {

 &varX == 200 !require;
 &width == varX !require;
 &height == varY;

}

as you can see, varX: == generates &varX which is explicitly to &, so it's not "capturing" varX

&width == varX on this line, varX points to &varX by chance, because there's no outside varX variable. But if you had varX defined on top level, then varX:== (aka &varX) and varX within #first would point to 2 different variables