angular-package
PatreonTwitternpmGitHub
Sass
Sass
  • Introduction
  • ❤ Benefits
  • General concepts
  • Getting started
    • Skeleton
    • Installation
      • npm
    • Public API
    • Basic concepts
  • Class
    • Overview
    • ⚒ class.content()
    • ⚒ class.name()
    • ⚒ class.parent-first()
    • ⚒ variables
  • Color
    • Overview
    • Scheme
      • is
        • ⚒ is.dark()
        • ⚒ is.light()
        • ⚒ is.normal()
      • ⚒ scheme.is()
    • ⚒ color.alpha-var()
    • ⚒ color.color()
    • ⚒ color.hsla-color()
    • ⚒ color.hue-var()
    • ⚒ color.lightness-var()
    • ⚒ color.name()
    • ⚒ color.retrieve()
    • ⚒ color.saturation-var()
  • Comparison
    • Overview
    • Greater
      • greater.than()
      • greater.than-any()
      • greater.than-every()
    • Less
      • less.than()
      • less.than-any()
      • less.than-every()
    • comparison.compare()
    • comparison.compare-multiple()
  • Function
    • Overview
    • Call
      • ⚒ function.arglist()
      • ⚒ function.by-list()
    • ⚒ function.call()
    • ⚒ function.get()
    • ⚒ function.has()
    • ⚒ function.insert()
    • ⚒ function.is()
    • ⚒ function.name()
    • ⚒ function.pick()
    • ⚒ function.prefix()
    • ⚒ function.remove()
  • List
    • Overview
    • Get
      • get.bool()
      • get.list()
      • get.map()
      • get.number()
      • get.string()
      • get.type()
    • Has
      • has.bool()
      • has.list()
      • has.map()
      • has.number()
      • has.string()
      • has.type()
      • has.value()
    • Remove
      • remove.duplicate()
      • remove.list()
      • remove.map()
      • remove.nth()
      • remove.number()
      • remove.range()
      • remove.string()
      • remove.type()
      • remove.value()
    • list.append()
    • list.empty()
    • list.extract-map()
    • list.first()
    • list.from()
    • list.has()
    • list.index()
    • list.indexes()
    • list.insert-nth()
    • list.join()
    • list.last()
    • list.limit()
    • list.nth()
    • list.range()
    • ⚒ list.replace-string()
    • ⚒ list.replace()
    • list.select()
    • ⚒ list.swap()
    • ⚒ list.to-map()
    • list.to()
    • list.type()
  • Map
    • Overview
    • Pattern
      • pattern.is()
      • Variables
    • Pick
      • pick.key-substring()
      • pick.key-type()
      • pick.pattern()
      • pick.type()
      • pick.value-type()
    • map.deep-merge-key()
    • map.deep-merge()
    • map.get()
    • map.has-keys()
    • map.key-replace()
    • ⚒ map.merge-allowed()
    • map.pick()
    • map.remove-type()
    • map.remove()
    • map.retrieve()
    • map.set()
    • map.update()
    • map.values()
  • Math
    • Overview
    • Range
      • range.down()
      • range.up()
    • math.calculate()
    • math.range()
    • ⚒ math.sort()
    • math.strip-unit()
  • Meta
    • Overview
    • ⚒ meta.call-arglist()
    • ⚒ meta.of-type()
  • Object
    • Overview
    • ⚒ object.create()
    • ⚒ object.get()
    • ⚒ object.set()
  • Property
    • Overview
    • ⚒ property.property()
    • ⚒ property.name()
    • ⚒ property.set()
    • ⚒ property.value()
    • ⚒ property.variant()
  • Query
    • Overview
    • Operation
      • ⚒ operation.execute()
    • ⚒ query.execute()
  • Selector
    • Overview
    • ⚒ selector.class()
    • ⚒ selector.nest-content()
    • ⚒ selector.nest()
    • ⚒ selector.pseudo-class()
    • ⚒ selector.replace-parent()
  • String
    • Overview
    • string.index()
    • string.join()
    • string.replace-multiple()
    • string.replace()
    • string.split()
    • ⚒ string.to-map()
    • ⚒ string.unquote()
  • Translator v0.1.0
    • Overview
    • Dictionary
      • dictionary.get()
      • dictionary.is-global()
      • dictionary.merge()
      • dictionary.pick()
      • dictionary.set()
      • dictionary.translation()
      • dictionary.variables
    • Translate
      • translate.list()
      • translate.map()
      • translate.nth()
      • translate.string()
    • translator.dictionary()
    • translator.translate()
  • Translator v1.0.0
    • Overview
    • Dictionary
      • dictionary.get()
      • dictionary.merge()
      • dictionary.pick()
      • dictionary.set()
      • dictionary.translation()
      • dictionary.variables
    • ⚒ Translate
    • translator.dictionary()
    • translator.translate()
  • Values
    • Overview
    • values.combine()
  • Var
    • Overview
    • ⚒ var.adjust()
    • ⚒ var.css()
    • ⚒ var.get()
    • ⚒ var.is()
    • ⚒ var.name()
    • ⚒ var.negative()
    • ⚒ var.unit()
    • var.set()
  • Variant
    • Overview
  • Change log
    • Keep a changelog
    • CHANGELOG.md
    • v0.12.0-beta
  • GIT
    • Commit
    • Semantic Versioning
  • License
    • MIT
  • Social
    • Gettr
    • Twitter
    • YouTube
  • Contact
    • Chat
    • Email
    • Phone
  • Donate
    • Cryptocurrency
    • Fiat
Powered by GitBook
On this page
  • Parameters
  • Return
  • Examples

Was this helpful?

  1. Values

values.combine()

PreviousOverviewNextOverview

Last updated 1 year ago

Was this helpful?

The values.combine() function combines multiple into the list. By default, the function use append method to combine . The parameters of the list (bracketed, delimiter, method, null, separator) can be changed by providing map value eg. (method: join).

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

// Functions.
@use '../list/list.join.function' as *;

// Modules.
@use '../map';

// The `values.combine()` function.
@function combine($values...) {
  $parameters: (
    bracketed: map.get(list.nth($values, 1), bracketed, auto),
    delimiter: null,
    method: append,
    null: false,
    separator: map.get(list.nth($values, 1), separator, auto),
  );
  $result: list.join((), (), map.pick($parameters, separator, bracketed)...);
  @each $value in $values {
    $allow: true;
    $method: map.get($parameters, method);
    @if type-of($value) ==
      map and
      map.has-keys($value, any, append, join, map.keys($parameters)...)
    {
      $parameters: map.merge($parameters, map.remove($value, append, join));
      @if map.has-keys($value, any, append, join) {
        @each $use-method, $use-value in $value {
          $method: $use-method;
          $value: $use-value;
        }
      } @else {
        $allow: false;
      }
    }
    @if not map.get($parameters, null) and not $value {
      $allow: false;
    }
    @if $allow {
      $result: meta.call(
        meta.get-function($method),
        $result,
        $value,
        map.pick(
            $parameters,
            if($method == join, (separator, bracketed), separator)...
          )...
      );
    }
  }
  @if map.get($parameters, delimiter) {
    $result: join((), $result, map.pick($parameters, separator, delimiter)...);
  }
  @return $result;
}

Parameters

$values...

Arbitrary values to combine into the returned list.

Return

The return value is the list combined by the specified method, with a separator, and/or delimiter.

Examples

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

// Examples.
// The default append method + separator auto.
@debug values.combine('&', layout sidebar, primary dark, extra small); // "&" (layout sidebar) (primary dark) (extra small)
@debug values.combine(('&', dark), layout sidebar, primary dark, extra small); // ("&", dark) (layout sidebar) (primary dark) (extra small)

// Join method + separator auto.
@debug values.combine((method: join), '&', layout sidebar, primary dark, extra small); // "&" layout sidebar primary dark extra small
@debug values.combine((method: join), ('&', dark), layout sidebar, primary dark, extra small); // "&", dark, layout, sidebar, primary, dark, extra, small
@debug values.combine((method: join), '&' dark, layout sidebar, primary dark, extra small); // "&" dark layout sidebar primary dark extra small

// Append method + separator space and comma.
@debug values.combine((separator: space), '&', layout sidebar, primary dark, extra small); // "&" (layout sidebar) (primary dark) (extra small)
@debug values.combine((separator: comma), '&', layout sidebar, primary dark, extra small); // "&", layout sidebar, primary dark, extra small

// Join method + separator space and comma.
@debug values.combine((separator: space, method: join), '&', layout sidebar, primary dark, extra small); // "&" layout sidebar primary dark extra small
@debug values.combine((separator: comma, method: join), '&', layout sidebar, primary dark, extra small); //  "&", layout, sidebar, primary, dark, extra, small

// Combine with `append` or `join` key.
@debug values.combine((append: first append), '&', layout sidebar, primary dark, extra small); // (first append) "&" (layout sidebar) (primary dark) (extra small)
@debug values.combine((append: (first, append)), '&', layout sidebar, primary dark, extra small); // (first, append) "&" (layout sidebar) (primary dark) (extra small)

@debug values.combine((join: first append), '&', layout sidebar, primary dark, extra small); // first append "&" layout sidebar primary dark extra small
@debug values.combine((join: (first, append)), '&', layout sidebar, primary dark, extra small); // first, append, "&", layout, sidebar, primary, dark, extra, small

@debug values.combine((method: join), '&', layout sidebar, (append: first append), primary dark, extra small); // "&" layout sidebar (first append) primary dark extra small
@debug values.combine('&', layout sidebar, (join: first join), primary dark, extra small); // "&" (layout sidebar) first join (primary dark) (extra small)

@debug values.combine((method: join, separator: comma), '&', layout sidebar, (append: first append), primary dark, extra small); // "&", layout, sidebar, first append, primary, dark, extra, small
@debug values.combine((separator: comma), '&', layout sidebar, (join: first join), primary dark, extra small); // "&", layout sidebar, first, join, primary dark, extra small

// Bracketed.
@debug values.combine((bracketed: true), '&', layout sidebar, primary dark, extra small); // ["&" (layout sidebar) (primary dark) (extra small)]

// Bracketed + separator.
@debug values.combine((bracketed: true, separator: comma), '&', layout sidebar, primary dark, extra small); // ["&", layout sidebar, primary dark, extra small]

// Bracketed + join method.
@debug values.combine((bracketed: true, method: join), '&', layout sidebar, primary dark, extra small); // ["&" layout sidebar primary dark extra small]

// Bracketed + separator + join method
@debug values.combine((method: join, separator: comma, bracketed: true), '&', layout sidebar, primary dark, extra small); // ["&", layout, sidebar, primary, dark, extra, small]

// Change method.
@debug values.combine((one, two), three, (four, five), (six seven), primary dark, extra small); // (one, two) three (four, five) (six seven) (primary dark) (extra small)
@debug values.combine((one, two), three, (method: join), (four, five), (six seven), primary dark, extra small); // (one, two) three four five six seven primary dark extra small
@debug values.combine((one, two), three, (method: join), (four, five), (six seven), (method: append), primary dark, extra small); // (one, two) three four five six seven (primary dark) (extra small)

// method (join: value) (append: value)
@debug values.combine((join: (one, two)), (join: three), (four, five), (six seven), primary dark, extra small); // one two three (four, five) (six seven) (primary dark) (extra small)
@debug values.combine((join: one two), three, (four, five), (six seven), (append: (primary dark extra small))); // one two three (four, five) (six seven) (primary dark extra small)

// Add delimiter + add null values.
@debug values.combine(['a' 1], 'b' 2, ['c' 3], null, (separator: comma, null: true, delimiter: '-'), null, null, (append: 1 2 3), age 32, first name ); // ["a" 1], "-", "b" 2, "-", ["c" 3], "-", null, "-", null, "-", 1 2 3, "-", age 32, "-", first name
@debug values.combine((method: join, delimiter: separator), 'a' 1 , 'b' 2, 'c' 3); // "a" separator 1 separator "b" separator 2 separator "c" separator 3
@debug values.combine((method: join, separator: comma, delimiter: separator basic), 'a' 1 , 'b' 2, 'c' 3); // "a", separator basic, 1, separator basic, "b", separator basic, 2, separator basic, "c", separator basic, 3
$values
$values
https://github.com/angular-package/sass/blob/main/values/_values.combine.function.scss
// Sass.
@use 'sass:list';
@use 'sass:meta';

// Functions.
@use '../list/list.append.function' as *;
@use '../list/list.has.function' as *;
@use '../list/list.join.function' as *;

// Modules.
@use '../map';

// Status: TODO: join on if
// The `values.combine()` function combines multiple `$values` into the list. By default, the function use append method
// to combine `$values`. The parameters of the list (bracketed, delimiter, method, null, separator) can be changed by
// providing map value eg. (method: join).
// @arbitrary `$values...` Arbitrary values to combine into the returned list.
// @return The return value is the list combined by the specified method, with a separator, and/or delimiter.
@function combine($values...) {
  $allowed-parameters: (
    bracketed: (auto, bool),
    delimiter: (string, number),
    method: (append, join),
    null: bool,
    separator: (auto, comma, space, slash)
  );
  $parameters: map.merge-allowed((
      bracketed: auto,
      delimiter: null,
      method: append,
      null: false,
      separator: auto
    ),
    list.nth($values, 1),
    $allowed-parameters
  );
  $result: list.join((), (), map.pick($parameters, separator, bracketed)...);
  @each $value in $values {
    $allow: true;
    $method: map.get($parameters, method);
    @if type-of($value) == map and list.length(map.keys(map.remove($value, append, join, map.keys($parameters)...))) == 0 {
      $parameters: map.merge-allowed($parameters, map.remove($value, append, join), $allowed-parameters);
      @if has(map.keys($value), any, '==', append, join) { // Append/Join the value.
        @each $use-method, $use-value in map.pick($value, append, join) {
          @if $use-value {
            $method: $use-method;
            $value: $use-value;
          }
        }
      } @else {
        $allow: false;
      }
    }
    @if not map.get($parameters, null) and not $value {
      $allow: false;
    }
    @if $allow {
      $result: meta.call(
        meta.get-function($method),
        $result,
        $value,
        map.pick($parameters, if($method == join, (separator, bracketed), separator)...)...
      );
    }
  }
  @if map.get($parameters, delimiter) {
    $result: join((), $result, map.pick($parameters, separator, delimiter)...);
  }
  @return $result;
}

// Examples.
// The default append method + separator auto.
// @debug combine('&', layout sidebar, primary dark, extra small); // "&" (layout sidebar) (primary dark) (extra small)
// @debug combine(('&', dark), layout sidebar, primary dark, extra small); // ("&", dark) (layout sidebar) (primary dark) (extra small)

// Join method + separator auto.
// @debug combine((method: join), '&', layout sidebar, primary dark, extra small); // "&" layout sidebar primary dark extra small
// @debug combine((method: join), ('&', dark), layout sidebar, primary dark, extra small); // "&", dark, layout, sidebar, primary, dark, extra, small
// @debug combine((method: join), '&' dark, layout sidebar, primary dark, extra small); // "&" dark layout sidebar primary dark extra small

// Append method + separator space and comma.
// @debug combine((separator: space), '&', layout sidebar, primary dark, extra small); // "&" (layout sidebar) (primary dark) (extra small)
// @debug combine((separator: comma), '&', layout sidebar, primary dark, extra small); // "&", layout sidebar, primary dark, extra small

// Join method + separator space and comma.
// @debug combine((separator: space, method: join), '&', layout sidebar, primary dark, extra small); // "&" layout sidebar primary dark extra small
// @debug combine((separator: comma, method: join), '&', layout sidebar, primary dark, extra small); //  "&", layout, sidebar, primary, dark, extra, small

// Combine with `append` or `join` key.
// @debug combine((append: first append), '&', layout sidebar, primary dark, extra small); // (first append) "&" (layout sidebar) (primary dark) (extra small)
// @debug combine((append: (first, append)), '&', layout sidebar, primary dark, extra small); // (first, append) "&" (layout sidebar) (primary dark) (extra small)

// @debug combine((join: first append), '&', layout sidebar, primary dark, extra small); // first append "&" layout sidebar primary dark extra small
// @debug combine((join: (first, append)), '&', layout sidebar, primary dark, extra small); // first, append, "&", layout, sidebar, primary, dark, extra, small

// @debug combine((method: join), '&', layout sidebar, (append: first append), primary dark, extra small); // "&" layout sidebar (first append) primary dark extra small
// @debug combine('&', layout sidebar, (join: first join), primary dark, extra small); // "&" (layout sidebar) first join (primary dark) (extra small)

// @debug combine((method: join, separator: comma), '&', layout sidebar, (append: first append), primary dark, extra small); // "&", layout, sidebar, first append, primary, dark, extra, small
// @debug combine((separator: comma), '&', layout sidebar, (join: first join), primary dark, extra small); // "&", layout sidebar, first, join, primary dark, extra small

// Bracketed.
// @debug combine((bracketed: true), '&', layout sidebar, primary dark, extra small); // ["&" (layout sidebar) (primary dark) (extra small)]

// Bracketed + separator.
// @debug combine((bracketed: true, separator: comma), '&', layout sidebar, primary dark, extra small); // ["&", layout sidebar, primary dark, extra small]

// Bracketed + join method.
// @debug combine((bracketed: true, method: join), '&', layout sidebar, primary dark, extra small); // ["&" layout sidebar primary dark extra small]

// Bracketed + separator + join method
// @debug combine((method: join, separator: comma, bracketed: true), '&', layout sidebar, primary dark, extra small); // ["&", layout, sidebar, primary, dark, extra, small]

// Change method.
// @debug combine((one, two), three, (four, five), (six seven), primary dark, extra small); // (one, two) three (four, five) (six seven) (primary dark) (extra small)
// @debug combine((one, two), three, (method: join), (four, five), (six seven), primary dark, extra small); // (one, two) three four five six seven primary dark extra small
// @debug combine((one, two), three, (method: join), (four, five), (six seven), (method: append), primary dark, extra small); // (one, two) three four five six seven (primary dark) (extra small)

// method (join: value) (append: value)
// @debug combine((join: (one, two)), (join: three), (four, five), (six seven), primary dark, extra small); // one two three (four, five) (six seven) (primary dark) (extra small)
// @debug combine((join: one two), three, (four, five), (six seven), (append: (primary dark extra small))); // one two three (four, five) (six seven) (primary dark extra small)

// Add delimiter + add null values.
// @debug combine(['a' 1], 'b' 2, ['c' 3], null, (separator: comma, null: true, delimiter: '-'), null, null, (append: 1 2 3), age 32, first name ); // ["a" 1], "-", "b" 2, "-", ["c" 3], "-", null, "-", null, "-", 1 2 3, "-", age 32, "-", first name
// @debug combine((method: join, delimiter: separator), 'a' 1 , 'b' 2, 'c' 3); // "a" separator 1 separator "b" separator 2 separator "c" separator 3
// @debug combine((method: join, separator: comma, delimiter: separator basic), 'a' 1 , 'b' 2, 'c' 3); // "a", separator basic, 1, separator basic, "b", separator basic, 2, separator basic, "c", separator basic, 3

// Provide separator
// @debug combine(1, 2, (delimiter: '-', separator: space), 3, 4);
// @debug combine(1, 2, (separator: comma), (prefix: spectre, separator: '-', suffix: end), 4, 5);