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
  • 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 (,)

Was this helpful?

  1. Comparison

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

$operator

Indicator

!

not

:

type of

(,)

list length or number of keys/pairs in a map

Operator

===

==

~=

>

>=

<

<=

Indicator + Operator

!==

!~=

:==

(,)== (,)!==

(,)>

(,)>=

(,)< (,)<=

$operand

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
Previousless.than-every()Nextcomparison.compare-multiple()

Last updated 1 year ago

Was this helpful?

The value to compare with the given .

The operator used to compare and .

compatbile or comparable with

equal to

contains the given string (string.index()) in

greater than

greater or equal than

less than

less or equal than

not equal to

does not contain the given string

(string.index()) in

type of

list/map length is ...

The value to compare with the given .

$operand
$value
$operand
$value
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
$value
$operand
https://github.com/angular-package/sass/blob/main/comparison/_comparison.compare.function.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 *;

// Status: TODO: number of pairs in a map.
// The `comparison.compare()` function returns a bool indicating the result of the comparison.
// @param `$value` The value to compare with the given `$operand`.
// @param `$operator` The operator used to compare `$value` and `$operand`.
// @param `$operand` The value to compare with the given `$value`.
// @return The return value is a bool indicating the result of the comparison.
@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);
}

// Additional function name.
@function single($value, $operator, $operand) {
  @return compare($value, $operator, $operand);
}

// Operator.
// '===' comparable
// '==', // equal to
// '!=', // not equal to
// '~=', // text contains the given string (string.index())
// '!~=', // text does not contain the given string (string.index())
// ':==', // type of the given value is equal to the given type
// ':!=',  // type of the given value is not equal to the given type
// '>',
// '>=',
// '<',
// '<='
// ':' type
// '(:)' map keys length
// '(,)' list length

// Examples.
// ==
// Arbitrary.
// @debug compare(27, '==', 27); // true
// @debug compare(27px, '==', 27em); // false
// @debug compare('bold ', '!~=', 'bold'); // false

// List.
// @debug compare(27 '==' 27...); // true
// @debug compare((27, '==', 27)...); // true

// Map.
// @debug compare((value: 27, operator: '==', operand: 27)); // true

// @debug compare('there is a word', '==', 'there is a word'); // true
// @debug compare(null, '==', null); // true
// @debug compare((a: 2222), '==', ('a': 2222)); // true

// Multiple comparisons as map.
// @debug compare((value: 27, operator: '==', operand: 27), (value: 17, operator: '==', operand: 27)); // true, false

// Multiple comparisons as list.
// @debug compare(27 '==' 27, 17 '==' 27, 5 '>' 3); // true, false, true
// @debug compare((27, '==', 27), (27, '!=', 27)); // true, false

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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