comparison.compare()

The comparison.compare() function returns a bool indicating the result of the comparison.

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

// Modules.
@use '../string';
@use 'greater';
@use 'less';

// Functions.
@use '../meta/meta.of-type.function' as *;
@use 'comparison.equal.function' as *;

// The `comparison.compare()` function.
@function compare($value, $operator, $operand) {
  $not: if(string.index($operator, '!'), true, false);
  $check-type: null;

  // List length.
  @if string.index($operator, '(,)') {
    $operator: string.replace($operator, first, '(,)', '');
    $check-type: meta.type-of($value) == list or meta.type-of($value) == map;
    $value: if($check-type, list.length($value), $value);

    // Map length.
  } @else if string.index($operator, '(:)') {
    // @deprecated
    $operator: string.replace($operator, first, '(:)', '');
    $check-type: meta.type-of($value) == map;
    $value: if($check-type, list.length($value), $value);

    // Type of.
  } @else if string.index($operator, ':') == 1 {
    $operator: string.replace($operator, first, ':', '');
    $value: meta.type-of($value);
    $operand: if(not $operand, meta.type-of($operand), $operand);
  }

  // Remove not.
  $operator: string.replace($operator, first, '!', '');

  // Use the function depending on the given operator.
  $function: map.get(
    (
      '===': meta.get-function(compatible, $module: math),
      '~=': meta.get-function(index, $module: string),
      '==': meta.get-function(equal),
      '=': meta.get-function(equal),
      '>': meta.get-function(than, $module: greater),
      '>=': (
        meta.get-function(than, $module: greater),
        meta.get-function(equal),
      ),
      '<': meta.get-function(than, $module: less),
      '<=': (
        meta.get-function(than, $module: less),
        meta.get-function(equal),
      ),
    ),
    $operator
  );

  // Call the functions to compare.
  $result: ();
  @each $function in $function {
    $comparison-result: meta.call($function, $value, $operand);
    $result: list.append(
      $result,
      if(meta.type-of($comparison-result) == number, true, $comparison-result)
    );
  }

  // Check whether the result contains true.
  $result: if(list.index($result, true), true, false);

  // Check the type for list and map length.
  $result: if(
    meta.type-of($check-type) == bool,
    $check-type and $result,
    $result
  );

  // Returns comparison result.
  @return if($not, not $result, $result);
}
https://github.com/angular-package/sass/blob/main/comparison/_comparison.compare.function.scss

Parameters

$value

The value to compare with the given $operand.

$operator

The operator used to compare $value and $operand.

Indicator

!

not

:

type of

(,)

list length or number of keys/pairs in a map

Operator

===

$value compatbile or comparable with $operand

==

$value equal to $operand

~=

$value contains the given string (string.index()) in $operand

>

$value greater than $operand

>=

$value greater or equal than $operand

<

$value less than $operand

<=

$value less or equal than $operand

Indicator + Operator

!==

$value not equal to $operand

!~=

$value does not contain the given string

(string.index()) in $operand

:==

(,)== (,)!==

(,)>

(,)>=

(,)< (,)<=

$value list/map length is ... $operand

$operand

The value to compare with the given $value.

Return

The return value is a bool indicating the result of the comparison.

Examples

Equal to == or not !==

Compatible ===

String index ~= or not !~=

Greater > or equal >= than

Less < or equal <= than

Type of :== or not :!==

List length, map pairs (,)

Last updated

Was this helpful?