时间戳

首页 > 解决方案 > 使用 sass mixin 生成字体大小类

sass - 使用 sass mixin 生成字体大小类

问题描述

我正在尝试使用 SASS mixin 生成字体大小类。他们看起来像有财产的.font-size-20班级。font-size: 1.25rem我正在使用新的 Bootstrap 5 函数从pxto转换，但我的 mixin 中的这个函数没有转换为.remrfs-value()pxrem

这是我的混音：

$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-sizeinrem但不在px.

rfs-value()rem如果px传递了一个值，则将一个值转换为一个值，在其他情况下它返回相同的结果。

标签： sass

解决方案

你可以像这样创建一个函数：

@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;
}

推荐阅读