jdsteinbach
3/4/2015 - 7:06 PM
Generated by SassMeister.com.
Generated by SassMeister.com.
<div class='box-1'></div>
<div class='box-2'></div>
<div class='box-3'></div>
<div class='box-4'></div>
.specials-group:nth-last-child(1):first-child .specials-group-title, .specials-group:nth-last-child(1):first-child ~ * .specials-group-title {
position: absolute;
right: 0;
left: 0;
z-index: 2;
}
.specials-group:nth-last-child(1):first-child .specials-group-title + *, .specials-group:nth-last-child(1):first-child ~ * .specials-group-title + * {
padding-top: 1em;
}
.specials-group:nth-last-child(1):first-child:nth-child(1) .specials-group-title, .specials-group:nth-last-child(1):first-child ~ *:nth-child(1) .specials-group-title {
top: 0em;
}
.specials-group:nth-last-child(1):first-child:nth-child(2) .specials-group-title, .specials-group:nth-last-child(1):first-child ~ *:nth-child(2) .specials-group-title {
top: 4em;
}
.specials-group:nth-last-child(1):first-child:nth-child(3) .specials-group-title, .specials-group:nth-last-child(1):first-child ~ *:nth-child(3) .specials-group-title {
top: 8em;
}
.specials-group:nth-last-child(1):first-child:nth-child(4) .specials-group-title, .specials-group:nth-last-child(1):first-child ~ *:nth-child(4) .specials-group-title {
top: 12em;
}
.specials-group:nth-last-child(1):first-child:nth-child(5) .specials-group-title, .specials-group:nth-last-child(1):first-child ~ *:nth-child(5) .specials-group-title {
top: 16em;
}
.specials-group:nth-last-child(2):first-child .specials-group-title, .specials-group:nth-last-child(2):first-child ~ * .specials-group-title {
position: absolute;
right: 0;
left: 0;
z-index: 2;
}
.specials-group:nth-last-child(2):first-child .specials-group-title + *, .specials-group:nth-last-child(2):first-child ~ * .specials-group-title + * {
padding-top: 2em;
}
.specials-group:nth-last-child(2):first-child:nth-child(1) .specials-group-title, .specials-group:nth-last-child(2):first-child ~ *:nth-child(1) .specials-group-title {
top: 0em;
}
.specials-group:nth-last-child(2):first-child:nth-child(2) .specials-group-title, .specials-group:nth-last-child(2):first-child ~ *:nth-child(2) .specials-group-title {
top: 4em;
}
.specials-group:nth-last-child(2):first-child:nth-child(3) .specials-group-title, .specials-group:nth-last-child(2):first-child ~ *:nth-child(3) .specials-group-title {
top: 8em;
}
.specials-group:nth-last-child(2):first-child:nth-child(4) .specials-group-title, .specials-group:nth-last-child(2):first-child ~ *:nth-child(4) .specials-group-title {
top: 12em;
}
.specials-group:nth-last-child(2):first-child:nth-child(5) .specials-group-title, .specials-group:nth-last-child(2):first-child ~ *:nth-child(5) .specials-group-title {
top: 16em;
}
.specials-group:nth-last-child(3):first-child .specials-group-title, .specials-group:nth-last-child(3):first-child ~ * .specials-group-title {
position: absolute;
right: 0;
left: 0;
z-index: 2;
}
.specials-group:nth-last-child(3):first-child .specials-group-title + *, .specials-group:nth-last-child(3):first-child ~ * .specials-group-title + * {
padding-top: 3em;
}
.specials-group:nth-last-child(3):first-child:nth-child(1) .specials-group-title, .specials-group:nth-last-child(3):first-child ~ *:nth-child(1) .specials-group-title {
top: 0em;
}
.specials-group:nth-last-child(3):first-child:nth-child(2) .specials-group-title, .specials-group:nth-last-child(3):first-child ~ *:nth-child(2) .specials-group-title {
top: 4em;
}
.specials-group:nth-last-child(3):first-child:nth-child(3) .specials-group-title, .specials-group:nth-last-child(3):first-child ~ *:nth-child(3) .specials-group-title {
top: 8em;
}
.specials-group:nth-last-child(3):first-child:nth-child(4) .specials-group-title, .specials-group:nth-last-child(3):first-child ~ *:nth-child(4) .specials-group-title {
top: 12em;
}
.specials-group:nth-last-child(3):first-child:nth-child(5) .specials-group-title, .specials-group:nth-last-child(3):first-child ~ *:nth-child(5) .specials-group-title {
top: 16em;
}
.specials-group:nth-last-child(4):first-child .specials-group-title, .specials-group:nth-last-child(4):first-child ~ * .specials-group-title {
position: absolute;
right: 0;
left: 0;
z-index: 2;
}
.specials-group:nth-last-child(4):first-child .specials-group-title + *, .specials-group:nth-last-child(4):first-child ~ * .specials-group-title + * {
padding-top: 4em;
}
.specials-group:nth-last-child(4):first-child:nth-child(1) .specials-group-title, .specials-group:nth-last-child(4):first-child ~ *:nth-child(1) .specials-group-title {
top: 0em;
}
.specials-group:nth-last-child(4):first-child:nth-child(2) .specials-group-title, .specials-group:nth-last-child(4):first-child ~ *:nth-child(2) .specials-group-title {
top: 4em;
}
.specials-group:nth-last-child(4):first-child:nth-child(3) .specials-group-title, .specials-group:nth-last-child(4):first-child ~ *:nth-child(3) .specials-group-title {
top: 8em;
}
.specials-group:nth-last-child(4):first-child:nth-child(4) .specials-group-title, .specials-group:nth-last-child(4):first-child ~ *:nth-child(4) .specials-group-title {
top: 12em;
}
.specials-group:nth-last-child(4):first-child:nth-child(5) .specials-group-title, .specials-group:nth-last-child(4):first-child ~ *:nth-child(5) .specials-group-title {
top: 16em;
}
.specials-group:nth-last-child(5):first-child .specials-group-title, .specials-group:nth-last-child(5):first-child ~ * .specials-group-title {
position: absolute;
right: 0;
left: 0;
z-index: 2;
}
.specials-group:nth-last-child(5):first-child .specials-group-title + *, .specials-group:nth-last-child(5):first-child ~ * .specials-group-title + * {
padding-top: 5em;
}
.specials-group:nth-last-child(5):first-child:nth-child(1) .specials-group-title, .specials-group:nth-last-child(5):first-child ~ *:nth-child(1) .specials-group-title {
top: 0em;
}
.specials-group:nth-last-child(5):first-child:nth-child(2) .specials-group-title, .specials-group:nth-last-child(5):first-child ~ *:nth-child(2) .specials-group-title {
top: 4em;
}
.specials-group:nth-last-child(5):first-child:nth-child(3) .specials-group-title, .specials-group:nth-last-child(5):first-child ~ *:nth-child(3) .specials-group-title {
top: 8em;
}
.specials-group:nth-last-child(5):first-child:nth-child(4) .specials-group-title, .specials-group:nth-last-child(5):first-child ~ *:nth-child(4) .specials-group-title {
top: 12em;
}
.specials-group:nth-last-child(5):first-child:nth-child(5) .specials-group-title, .specials-group:nth-last-child(5):first-child ~ *:nth-child(5) .specials-group-title {
top: 16em;
}
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
.specials-group {
@for $i from 1 through 5 {
&:nth-last-child(#{$i}):first-child {
&,
& ~ * {
.specials-group-title {
position: absolute;
right: 0;
left: 0;
z-index: 2;
+ * {
padding-top: (1em * $i);
}
}
@for $j from 1 through 5 {
&:nth-child(#{$j}) {
.specials-group-title {
top: ($j - 1) * 4em;
}
}
}
}
}
}
}.box-1
.box-2
.box-3
.box-4