# comparison.compare()

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

```scss
// 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);
}
```

{% embed url="<https://github.com/angular-package/sass/blob/main/comparison/_comparison.compare.function.scss>" %}

### Parameters

#### `$value`

The value to compare with the given [`$operand`](#usdoperand).

#### `$operator`

The operator used to compare [`$value`](#usdvalue) and [$operand](#usdoperand).

|                                                                   |                                                                                                                                                                 |
| ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Indicator                                                         |                                                                                                                                                                 |
| !                                                                 | not                                                                                                                                                             |
| :                                                                 | type of                                                                                                                                                         |
| (,)                                                               | list length or number of keys/pairs in a map                                                                                                                    |
| Operator                                                          |                                                                                                                                                                 |
| ===                                                               | [`$value`](#usdvalue) compatbile or comparable with [`$operand`](#usdoperand)                                                                                   |
| ==                                                                | [`$value`](#usdvalue) equal to [`$operand`](#usdoperand)                                                                                                        |
| \~=                                                               | [`$value`](#usdvalue) contains the given string (string.index()) in [`$operand`](#usdoperand)                                                                   |
| >                                                                 | [`$value`](#usdvalue) greater than [`$operand`](#usdoperand)                                                                                                    |
| >=                                                                | [`$value`](#usdvalue) greater or equal than [`$operand`](#usdoperand)                                                                                           |
| <                                                                 | [`$value`](#usdvalue) less than [`$operand`](#usdoperand)                                                                                                       |
| <=                                                                | [`$value`](#usdvalue) less or equal than [`$operand`](#usdoperand)                                                                                              |
| Indicator + Operator                                              |                                                                                                                                                                 |
| !==                                                               | [`$value`](#usdvalue) not equal to [`$operand`](#usdoperand)                                                                                                    |
| !\~=                                                              | <p><a href="#usdvalue"><code>$value</code></a> does not contain the given string </p><p>(string.index()) in <a href="#usdoperand"><code>$operand</code></a></p> |
| :==                                                               | [`$value`](#usdvalue) type of [`$operand`](#usdoperand)                                                                                                         |
| <p>(,)==<br>(,)!==</p><p>(,)></p><p>(,)>=</p><p>(,)<<br>(,)<=</p> | [`$value`](#usdvalue) list/map length is ... [`$operand`](#usdoperand)                                                                                          |

#### `$operand`

The value to compare with the given [`$value`](#usdvalue).

### Return

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

## Examples

### Equal to `==` or not `!==`

```scss
// 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 `===`

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

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

```

### String index `~=` or not `!~=`

```scss
// ~=
@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

```scss
// >
@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

```scss
// <
@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 `:!==`&#x20;

```scss
// :==
@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 `(,)`

```scss
// (,)==
@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

```