sass/scss математические функции

Отредактировано: 11 Января 2018

Собрание простых функций, не требующих подключения дополнительных надстроек

Округление до меньшего

$variable: floor(13.666656px);

Округление до большего

$variable: ceil(13.666656px);

Процентное соотношение

$variable: percentage(1/3);

Возведение в степень

Возведение положительных чисел

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  }

  @return $value;
}

Использование

.foo {
  width: pow(20, 2) * 1px; // 400px
}

Возведение положительных и отрицательных чисел

@function pow($number, $exponent) {
  $value: 1;

  @if $exponent > 0 {
    @for $i from 1 through $exponent {
      $value: $value * $number;
    }
  } @else if $exponent < 0 {
    @for $i from 1 through -$exponent {
      $value: $value / $number;
    }
  }

  @return $value;
}

использование

.foo {
  width: pow(10, -2) * 1px; // 0.0001px
}