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);
}

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 !==

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

// Examples.
// ==
@debug comparison.compare(27, '==', 27); // true
@debug comparison.compare(27px, '==', 27em); // false

// !==
@debug comparison.compare(27, '!==', 27); // false
@debug comparison.compare('there is a word', '!==', 'there is a word'); // false
@debug comparison.compare(null, '!==', null); // false
@debug comparison.compare((a: 2222), '!==', ('a': 2222)); // false
@debug comparison.compare(true, '!==', null); // true

Compatible ===

// ===
@debug comparison.compare(27px, '===', 27px); // true
@debug comparison.compare(27px, '===', 27em); // false

// !===
@debug comparison.compare(27px, '!===', 27px); // false

String index ~= or not !~=

// ~=
@debug comparison.compare('bold king', '~=', 'bold'); // true

// !~=
@debug comparison.compare('bold king', '!~=', 'word'); // true
@debug comparison.compare('bold king', '!~=', 'bold'); // false

Greater > or equal >= than

// >
@debug comparison.compare(3, '>', 1); // true
@debug comparison.compare(3, '>', 5); // false

// >=
@debug comparison.compare(3, '>=', 1); // true
@debug comparison.compare(3, '>=', 3); // true

Less < or equal <= than

// <
@debug comparison.compare(3, '<', 1); // false
@debug comparison.compare(3, '>', 5); // false

// <=
@debug comparison.compare(3, '<=', 1); // false
@debug comparison.compare(3, '<=', 3); // true

Type of :== or not :!==

// :==
@debug comparison.compare('a', ':==', string); // true
@debug comparison.compare(null, ':==', null); // true
@debug comparison.compare(false, ':==', bool); // true

// :!==
@debug comparison.compare(3, ':!=', string); // true
@debug comparison.compare(27, ':!==', string); // true
@debug comparison.compare('a', ':!==', string); // false
@debug comparison.compare(null, ':!==', null); // false
@debug comparison.compare(false, ':!==', bool); // false

List length, map pairs (,)

// (,)==
@debug comparison.compare(('a', 'b', 'c'), '(,)==', 3); // true
@debug comparison.compare(('a', 'b', 'c'), '(,)==', 13); // false

// (,)!=
@debug comparison.compare(('a', 'b', 'c'), '(,)!=', 3); // false
@debug comparison.compare(('a', 'b', 'c'), '(,)!=', 13); // true

// (,)>
@debug comparison.compare(('a', 'b', 'c'), '(,)>', 2); // true
@debug comparison.compare(('a', 'b', 'c'), '(,)>', 3); // false

// (,)>=
@debug comparison.compare(('a', 'b', 'c'), '(,)>=', 3); // true
@debug comparison.compare(('a', 'b', 'c'), '(,)>=', 4); // false

// (,)<
@debug comparison.compare(('a', 'b', 'c'), '(,)<', 4); // true
@debug comparison.compare(('a', 'b', 'c'), '(,)<', 3); // false

// (,)<=
@debug comparison.compare(('a', 'b', 'c'), '(,)<=', 3); // true
@debug comparison.compare(('a', 'b', 'c'), '(,)<=', 2); // false

// (,)==
@debug comparison.compare(('a': 1, 'b': 2, 'c': 3), '(,)==', 3); // true
@debug comparison.compare(('a': 1, 'b': 2, 'c': 3), '(,)==', 4); // false

// (,)!=
@debug comparison.compare(('a': 1, 'b': 2, 'c': 3), '(,)!=', 3); // false
@debug comparison.compare(('a': 1, 'b': 2, 'c': 3), '(,)!=', 2); // true

// (,)> (,)<
@debug comparison.compare(('a': 1, 'b': 2, 'c': 3), '(,)>', 3); // false
@debug comparison.compare(('a': 1, 'b': 2, 'c': 3), '(,)<', 2); // false

Last updated