translate.list()

The translate.list() function translates $list with a global dictionary and/or given $dictionary.

Global dictionary is in use on $dictionary-global set to true, or by setting $global argument to true.

// Sass.
@use 'sass:list';

// Functions.
@use '../../list/has/has.list.function' as *;
@use '../translator.dictionary.function';
@use 'translate.nth.function';

// Modules.
@use '../dictionary';

// The `translator.translate-list()` or `translate.list()` function.
@function list($list, $key: null, $dictionary: (), $global: null) {
  @if type-of($list) == list {
    $translation: dictionary.translation(
      $list,
      translator.dictionary($key, $dictionary, $global)
    );
    @if $translation {
      @return $translation;
    }
    @for $i from 1 through list.length($list) {
      $list: translate.nth($list, $i, $key, $dictionary, $global);
      $sub-list-1: list.nth($list, $i);
      @if type-of($sub-list-1) == list {
        @for $j from 1 through list.length($sub-list-1) {
          $sub-list-2: list.nth($sub-list-1, $j);
          @if type-of($sub-list-2) == list {
            @for $n from 1 through list.length($sub-list-2) {
              $sub-list-2: translate.nth(
                $sub-list-2,
                $n,
                $key,
                $dictionary,
                $global
              );
            }

            $sub-list-1: list.set-nth($sub-list-1, $j, $sub-list-2);
          }

          $sub-list-1: translate.nth(
            $sub-list-1,
            $j,
            $key,
            $dictionary,
            $global
          );
        }

        $list: list.set-nth($list, $i, $sub-list-1);
      }
    }
  }
  @return $list;
}

https://github.com/angular-package/sass/blob/main/translator/translate/_translate.list.function.scss

Parameters

$list

A list with a few nested lists to translate.

$key: null

A key of dictionary retrieved from a global(if in use) and/or $dictionary for translation.

$dictionary: ()

The dictionary that is used to translate elements of $list.

$global: null

A bool value indicates whether to use a global dictionary. Default, null, then $dictionary-global is checked.

Return

The return value is translated $list.

Examples

// Use.
@use '@angular-package/sass/translator';

// Examples.
$-dictionary-example: dictionary.merge(null, (
  (extra large, 'extra large', extra-large): xl,
  (extra small, 'extra small', extra-small): xs,
  border: b,
  class: (prefix: class-prefix, separator: class-separator, suffix: class-suffix, calendars: (calendar: cal), labels: (label: lab)),
  color: c,
  general: (word: słowo, (wrapper, wrap): owijka, (technology, technologia): tech, color: c),
  large: lg,
  medium: md,
  outline: o,
  prefix: spectre,
  small: sm,
  suffix: end,
));

// @debug list(extra large);
@debug translator.translate-list(extra-large (extra small)); // xl xs

// @debug list((extra-large,));
@debug translator.translate-list(border (extra large)); // b xl

// List.
// Get dictionary with a `$key` parameter`.
@debug translator.translate-list((prefix, border, suffix), class); // class-prefix, b, class-suffix

// Get dictionary with a `$dictionary` parameter of list type.
@debug translator.translate-list((wrapper, technology), $dictionary: $-dictionary-example general); // owijka, tech
@debug translator.translate-list((wrapper, technology) color, general, $-dictionary-example); // (owijka, tech) c
@debug translator.translate-list((wrapper, (word,), ([word])), $dictionary: $-dictionary-example general); //  owijka, (słowo,), [słowo]

// Translate by using global dictionary and `class` key.
@debug translator.translate-list(prefix (separator, prefix) suffix, $key: class); // class-prefix (class-separator, class-prefix) class-suffix

// Custom dictionary.
@debug translator.translate-list((wrapper,), general, $-dictionary-example); // (owijka,)
@debug translator.translate-list((calendar, label), $dictionary: $-dictionary-example (class, calendars)); // cal, label
@debug translator.translate-list((border, outline) color, $dictionary: (border: b, outline: o, 'gray': g, 'red': r)); // (b, o) c
@debug translator.translate-list((border 'red', outline 'gray') color, $dictionary: (border: b, outline: o, 'gray': g, 'red': r)); // (b r, o g) c

// Nested lists
@debug translator.translate-list((border 1 outline (border 2, outline, (border 3, outline, (border 4, outline))) color), $dictionary: (border: b, outline: o, 'gray': g, 'red': r)); // b 1 o (b 2, o, (b 3, o, (border 4, o))) c