Работа с массивом списков в SCSS: методы и примеры кода

В SCSS (Sass) массив списков можно создать, используя комбинацию списков Sass и карт Sass. Вот несколько методов создания массива списков и работы с ним в SCSS, а также примеры кода:

Метод 1: использование списков Sass для создания массива списков

$myArray: (
  (1, 2, 3),
  (4, 5, 6),
  (7, 8, 9)
);
@each $list in $myArray {
  // Accessing individual elements
  $firstElement: nth($list, 1);
  $secondElement: nth($list, 2);
  $thirdElement: nth($list, 3);
  // Using the elements
  .element-#{$firstElement} {
    // Some styles
  }
}

Метод 2. Использование карт Sass для создания массива списков

$myArray: (
  list1: (1, 2, 3),
  list2: (4, 5, 6),
  list3: (7, 8, 9)
);
@each $key, $list in $myArray {
  // Accessing individual elements
  $firstElement: nth($list, 1);
  $secondElement: nth($list, 2);
  $thirdElement: nth($list, 3);
  // Using the elements
  .element-#{$firstElement} {
    // Some styles
  }
}

Метод 3. Динамическое добавление списков в массив

$myArray: ();
@function addToList($list, $array) {
  @return append($array, $list);
}
$myArray: addToList((1, 2, 3), $myArray);
$myArray: addToList((4, 5, 6), $myArray);
$myArray: addToList((7, 8, 9), $myArray);

Метод 4. Перебор массива списков

@each $list in $myArray {
  @each $element in $list {
    .element-#{$element} {
      // Some styles
    }
  }
}

Метод 5: доступ к длине массива списков

$listLength: length($myArray); // Returns the number of lists in the array