@gitlab/ui/src/scss/functions.scss

GitLab UI Components

/*
* SASS preserves units in arithmetic operations. For example:
* 12em * 0 = 0em. This function return the unit of a numeric value.
*
* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ
*/
@function extract-unit($number) {
  @return $number * 0 + 1;
}

@function strip-unit($number) {
  @if type-of($number) == 'number' and not unitless($number) {
    @return $number / extract-unit($number);
  }

  @return $number;
}

@function single-unit-rem($value, $font-size-base) {
  @if (extract-unit($value) != 1px) {
    @return $value;
  }

  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
  $converted: $value / $font-size-base;

  @return strip-unit($converted) * 1rem;
}

@function multiple-units-rem($values, $font-size-base) {
  $rem-values: ();

  @each $value in $values {
    $rem-values: append($rem-values, single-unit-rem($value, $font-size-base));
  }

  @return $rem-values;
}

@function px-to-rem($px, $font-size-base: 16px) {
  @if type-of($px) == 'number' {
    @return single-unit-rem($px, $font-size-base);
  } @else if type-of($px) == 'list' {
    @return multiple-units-rem($px, $font-size-base);
  } @else {
    @return $px;
  }
}

@function if-important($important) {
  @return #{if($important, '!important', '')};
}

@function clamp-between($min, $max, $min-width: $breakpoint-md, $max-width: $breakpoint-xl) {
  $min-width: px-to-rem($min-width);
  $max-width: px-to-rem($max-width);

  // Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0
  // We can't update this yet since GitLab uses SassC, which doesn't support math.div
  // See https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1954#note_1078281533
  $slope: ($max - $min) / ($max-width - $min-width);
  $intersection: (-$min-width * $slope) + $min;

  // Use calc() inside of clamp() function to work around SassC
  // compilation failure.
  // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2972
  @return clamp(#{$min}, calc(#{$intersection} + #{$slope * 100vw}), #{$max});
}