使用 sass mixin 生成字体大小类

Question

我正在尝试使用 SASS mixin 生成字体大小类别。它们看起来像具有

.font-size-20

属性的

font-size: 1.25rem

类。我正在使用新的 Bootstrap 5 函数

px

从

rem

到

rfs-value()

的转换，但是我的 mixin 中的这个函数没有将

px

转换为

rem

。

这是我的混音：

$font-size-list: 14 16 20 24;

@each $value in $font-size-list {
  .font-size-#{$value} {
     font-size: rfs-value($value + px)!important;
  }
}

输出：

.font-size-20 {
   font-size: 20px!important;
}

请修复它以在

font-size

中输出

rem

，但不在

px

中输出。

如果传递了

rfs-value()

 值，则 

rem

将值转换为

px

值，在其他情况下，它返回相同的结果。

Answer 1

您可以创建这样的函数：

@function pxToRem($pxSize) {
  @return $pxSize / 16 + rem;
}

并在你的 mixin 中使用它：

@mixin font-size() {

  $font-size-list: 14 16 20 24;

  @each $value in $font-size-list {
    .font-size-#{$value} {
      font-size: pxToRem($value);
    }
  }
}

@include font-size()

结果将是这样的：

.font-size-14 {
  font-size: 0.875rem;
}

.font-size-16 {
  font-size: 1rem;
}

.font-size-20 {
  font-size: 1.25rem;
}

.font-size-24 {
  font-size: 1.5rem;
}

Answer 2

我修改了之前的答案并添加了一个 sass for 循环来生成类，如 font-12、font-13、font-14 等。

@function pxToRem($pxSize) {
  @return $pxSize / 16 + rem;
}
@mixin font-size() {
  @for $size from 12 through 64 {
    .font-#{$size} {
      font-size: pxToRem($size);
    }
  }
}

@include font-size();