减少rem百分比？

问题描述

OK我使用Foundations rem-calc来计算rem值，现在我想以每个媒体查询的百分比减少变量的大小：

OK I'm using Foundations rem-calc to calculate a rem value, now i want to reduce the size of the variable on each media query by a percentage like so:

// This is the default html and body font-size for the base rem value.
$rem-base: 16px !default;

@function rem-calc($values, $base-value: $rem-base) {
  $max: length($values);

  @if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }

  $remValues: ();
  @for $i from 1 through $max {
    $remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
  }
  @return $remValues;
}


$herotitle-size: rem-calc(125.5);


  .hero_home .herotitle{
    font-size: $herotitle-size / 10%;
  }

但它不工作....
为什么？

but it doesn't work....why?

推荐答案

Sass不允许对具有不兼容单位的值执行算术。但是...

Sass won't let you perform arithmetic on values with incompatible units. However...

百分比只是表示小数的不同方式。要减少 10％的东西是将它乘以 0.9 （公式： $ my-percentage）/ 100））。

Percentages are just a different way of expressing decimals. To reduce something by 10% is to multiply it by 0.9 (formula: (100 - $my-percentage) / 100)).

.foo {
  font-size: 1.2rem * .9; // make it 10% smaller
}

输出：

.foo {
  font-size: 1.08rem;
}

请注意，这适用于按百分比以及增加值。

Note that this works for increasing values by a percentage as well.

.foo {
  font-size: 1.2rem * 1.1; // make it 10% bigger
}

输出：

Output:

.foo {
  font-size: 1.32rem;
}

这篇关于减少rem百分比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！