Question

好的我正在使用Foundations rem-calc来计算一个rem值，现在我想减少每个媒体查询的变量大小，如下所示：

// 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%;
  }

但它不起作用.... 为什么呢？

Answer 1

Sass不允许您对不兼容单位的值执行算术运算。然而...

百分比只是表示小数的一种不同方式。要按10%减少某些内容，请将其乘以0.9（公式：(100 - $my-percentage) / 100)）。

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

输出：

.foo {
  font-size: 1.08rem;
}

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

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

输出：

.foo {
  font-size: 1.32rem;
}

Answer 2

在数学之后必须通过rem-calc，如下：

    $herotitle-size: 125.5;

   //To reduce by 10% 0.1
  .hero_home .herotitle{
       font-size: rem-calc( $herotitle-size - ( $herotitle-size * 0.1));
  }

减少一个百分比的rem？

2 个答案: