Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// ---
// Sass (v3.2.9)
// ---
// Styling elements based on sibling count
// http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
@mixin adjust-form-siblings-count($max: 10, $property: width) {
$i: 0;
@while ($i < $max) {
$i: $i+1;
$j: 1;
$selector: "";
@while ($j < $i) {
$selector: $selector + "&:nth-child(#{$j}):nth-last-child(#{$i - $j + 1}),";
$j: $j+1;
@debug "$j #{$j}";
}
$selector: $selector + "&:nth-child(#{$j}):nth-last-child(#{$i - $j + 1})";
@debug "$i #{$i}";
@debug "#$selector #{$selector}";
#{$selector} { #{$property}: percentage(1/$i); }
}
}
.class {
@include adjust-form-siblings-count;
}
.class:nth-child(1):nth-last-child(1) {
width: 100%;
}
.class:nth-child(1):nth-last-child(2), .class:nth-child(2):nth-last-child(1) {
width: 50%;
}
.class:nth-child(1):nth-last-child(3), .class:nth-child(2):nth-last-child(2), .class:nth-child(3):nth-last-child(1) {
width: 33.33333%;
}
.class:nth-child(1):nth-last-child(4), .class:nth-child(2):nth-last-child(3), .class:nth-child(3):nth-last-child(2), .class:nth-child(4):nth-last-child(1) {
width: 25%;
}
.class:nth-child(1):nth-last-child(5), .class:nth-child(2):nth-last-child(4), .class:nth-child(3):nth-last-child(3), .class:nth-child(4):nth-last-child(2), .class:nth-child(5):nth-last-child(1) {
width: 20%;
}
.class:nth-child(1):nth-last-child(6), .class:nth-child(2):nth-last-child(5), .class:nth-child(3):nth-last-child(4), .class:nth-child(4):nth-last-child(3), .class:nth-child(5):nth-last-child(2), .class:nth-child(6):nth-last-child(1) {
width: 16.66667%;
}
.class:nth-child(1):nth-last-child(7), .class:nth-child(2):nth-last-child(6), .class:nth-child(3):nth-last-child(5), .class:nth-child(4):nth-last-child(4), .class:nth-child(5):nth-last-child(3), .class:nth-child(6):nth-last-child(2), .class:nth-child(7):nth-last-child(1) {
width: 14.28571%;
}
.class:nth-child(1):nth-last-child(8), .class:nth-child(2):nth-last-child(7), .class:nth-child(3):nth-last-child(6), .class:nth-child(4):nth-last-child(5), .class:nth-child(5):nth-last-child(4), .class:nth-child(6):nth-last-child(3), .class:nth-child(7):nth-last-child(2), .class:nth-child(8):nth-last-child(1) {
width: 12.5%;
}
.class:nth-child(1):nth-last-child(9), .class:nth-child(2):nth-last-child(8), .class:nth-child(3):nth-last-child(7), .class:nth-child(4):nth-last-child(6), .class:nth-child(5):nth-last-child(5), .class:nth-child(6):nth-last-child(4), .class:nth-child(7):nth-last-child(3), .class:nth-child(8):nth-last-child(2), .class:nth-child(9):nth-last-child(1) {
width: 11.11111%;
}
.class:nth-child(1):nth-last-child(10), .class:nth-child(2):nth-last-child(9), .class:nth-child(3):nth-last-child(8), .class:nth-child(4):nth-last-child(7), .class:nth-child(5):nth-last-child(6), .class:nth-child(6):nth-last-child(5), .class:nth-child(7):nth-last-child(4), .class:nth-child(8):nth-last-child(3), .class:nth-child(9):nth-last-child(2), .class:nth-child(10):nth-last-child(1) {
width: 10%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment