Необходимо предоставить ширину каждому n-му ребенку, используя sass

Question

В моей кодовой базе есть много мест, где данные представлены в сетках следующим образом:

.tbl-row-3 {
    .item:nth-child(1) {
        width: 40%;
    }
    .item:nth-child(2) {
        width: 30%;
    }
    .item:nth-child(3) {
        width: 30%;
    }
}

Количество дочерних элементов и их ширина везде разные. Вот почему мне нужно написать это несколько раз. И, следовательно, пытался сделать формулу в моем файле mixins:

@mixin datagrid(3, 40, 30, 30) {
  @for $i from 1 through 3 {
    &:nth-child(#{$i}) {
      width: ...
    }
  }

Возможно ли это таким образом, упоминая число childs (3) и затем их соответствующие ширины (40,30,30) ?

Если да, то как? Или возможен другой подход?

Спасибо за помощь.

Answer 1

Вы можете написать @mixin следующим образом:

@mixin datagrid($childNum, $sizes...) {
  @for $i from 1 through $childNum {
    &:nth-child(#{$i}) {
      width: nth($sizes, $i) + 0%;
    }
  }
}

.tbl-row-3 {
  .item {
    @include datagrid(3, 40, 30, 30);
  }
}

Запись с тремя точками - это список аргументов , что означает, что вы можете передать любое количество аргументов в @mixin. Затем вы можете использовать nth и $i для получения значений.

---

В качестве альтернативы, вместо определения ширины каждого дочернего элемента каждый раз, когда вы хотите сетку, вы можно также подумать о создании предопределенных классов, таких как .width-40, .width-30 ..., которые бы содержали нужные стили и затем применяли их к вашим элементам.