Iterate through a function in css stylus

Sometimes you need to be able to implement a quick function that will iterate through an array and assign values to it. This quick snnipet can Help you to do this.

apply-field-sizes($element) {
  $field_sizes = ( 10% 20% 20% 20% 20% 5% 5% );
  for value, key in $field_sizes {

    {$element}:nth-child({key}) {
      width: value;
    }
  }
}

.my-table-head {
  th {
    color: white;
  }

  apply-field-sizes(th);
}

You can test it in Try Stylus! and play with it.