math.calculate()

The math.calculate() function performs value and operand calculation by using a given operator + addition, - subtraction, * multiplication, / division of string type.

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

// The `math.calculate()` function.
@function calculate($operations...) {
  @each $value, $operator,
    $operand in if(list.length($operations) == 3, ($operations), $operations)
  {
    @if $value and $operand {
      @if $operator == '+' {
        @return calc($value + $operand);
      } @else if $operator == '-' {
        @return calc($value - $operand);
      } @else if $operator == '*' {
        @return calc($value * $operand);
      } @else if $operator == '/' {
        @return calc($value / $operand);
      }
    }
  }
  @return null;
}

https://github.com/angular-package/sass/blob/main/math/_math.calculate.function.scss

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

// Status: TODO: add multiple calculations.
// The `math.calculate()` function performs value and operand calculation by using a given operator `+` addition, `-` subtraction,
// `*` multiplication, `/` division of `string` type.
// @arbitrary `$operations...` Arbitrary values in order (value, operator, operand) to perform calculation.
// @return The return value is calculated `number` or CSS function `calc()` with a specified calculation.
@function calculate($operations...) {
  @each $value, $operator, $operand in if(list.length($operations) == 3, ($operations,), $operations){
    @if $value and $operand {
      @if $operator == '+' {
        @return calc($value + $operand);
      } @else if $operator == '-' {
        @return calc($value - $operand);
      } @else if $operator == '*' {
        @return calc($value * $operand);
      } @else if $operator == '/' {
        @return calc($value / $operand);
      }
    }
  }
  @return null;
}

// Examples.
// number
// @debug calculate(15 '+' 13); // 28
// @debug calculate(15 '-' 12); // 3
// @debug calculate(55 '*' 17); // 935
// @debug calculate(42 '/' 14); // 3
// @debug calculate(15, '+', 13); // 28

// var()
// @debug calculate(15, '+', var(--age)); // calc(15 + var(--age))
// @debug calculate(var(--age), '+', var(--age)); // calc(var(--age) + var(--age))

Parameters

$operations...

Arbitrary values in order (value, operator, operand) to perform calculation.

Return

The return value is calculated number or CSS function calc() with a specified calculation.

Examples

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

// Examples.
// number
@debug math.calculate(15 '+' 13); // 28
@debug math.calculate(15 '-' 12); // 3
@debug math.calculate(55 '*' 17); // 935
@debug math.calculate(42 '/' 14); // 3
@debug math.calculate(15, '+', 13); // 28

// var()
@debug math.calculate(15, '+', var(--age)); // calc(15 + var(--age))
@debug math.calculate(var(--age), '+', var(--age)); // calc(var(--age) + var(--age))