Skip to content

Instantly share code, notes, and snippets.

@d4tocchini

d4tocchini/01 source VFL.css

Last active August 29, 2015 14:06
Show Gist options
  • Save d4tocchini/be81c24203cc16c1de2b to your computer and use it in GitHub Desktop.
Save d4tocchini/be81c24203cc16c1de2b to your computer and use it in GitHub Desktop.
Download ZIP
VFL to CCSS
Raw
01 source VFL.css
@h |- (.box)-10-... - (#box2) (#box3)-| gap([gap]) in(#container) {
width: == &:next[width]; // replacement for chain-width()
top: == ::window[top]; // replacement for chain-top(::window[top])
}
Raw
02 generated CCSS.css
#container[left] + [gap] == .box:first[left];
.box {
&[right] + 10 == &:next[left];
}
.box:last[right] + [gap] == #box2[left];
#box2[right] == #box3[left];
#box3[right] + [gap] == #container[right];
.box, #box2, #box3 {
&[width] == &:next[width];
&[top] == ::window[top];
}
@Inviz
Copy link

Inviz commented Sep 9, 2014

$box2[width]: 70
$box2[x]: 160
$box2[y]: 0
$box3[width]: 70
$box3[x]: 230
$box3[y]: 0
$boxA[width]: 70
$boxA[x]: 0
$boxA[y]: 0
$boxB[width]: 70
$boxB[x]: 80
$boxB[y]: 0
$container[width]: 300
$container[x]: 0
gap: 0

@Inviz
Copy link

Inviz commented Sep 9, 2014 

  <div id="boxA" class="box"></div>
  <div id="boxB" class="box"></div>
  <div id="box2" class="box"></div>
  <div id="box3"></div>
  <div id="container"></div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment