# 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="" %} ### 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) | | !\~= |

$value does not contain the given string

(string.index()) in $operand

| | :== | [`$value`](#usdvalue) type of [`$operand`](#usdoperand) | |

(,)==
(,)!==

(,)>

(,)>=

(,)<
(,)<=

| [`$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 `:!==` ```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 ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.angular-package.dev/sass/comparison/comparison.compare.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.