li 개수에 따른 너비 조절

css

li {
  float: left;
}

/* one item */
li:first-child:nth-last-child(1) {
  width: 100%;
}

/* two items */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
  width: 50%;
}

/* three items */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
  width: 33.3333%;
}

/* four items */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
  width: 25%;
}

 

sass

@mixin space-out($min, $max) {
  @for $i from $min through $max {
    &:first-child:nth-last-child(#{$i}),
    &:first-child:nth-last-child(#{$i}) ~ & {
      width: 1 / $i * 100%;
    }
  }
}

li {
  @include space-out(1, 4);
}

 

 

less

.space-out(@min, @max) {
  .space-out-loop(@i) when (@i > 0) {
    .space-out-loop(@i - 1);
    &:first-child:nth-last-child(@{i}),
    &:first-child:nth-last-child(@{i}) ~ & {
      width: 1 / @i * 100%;
    }
  }
  .space-out-loop(@max);
}

li {
  .space-out(1, 4);
}

 

 

참고) https://www.growingwiththeweb.com/2014/06/detecting-number-of-siblings-with-css.html

Detecting number of siblings with CSS