在 sass mixin 中添加断点

【问题标题】：Add breakpoint in sass mixin在 sass mixin 中添加断点
【发布时间】：2020-11-23 09:50:05
【问题描述】：

我的最终目标是为移动设备（16px）和桌面（18px）设置一个字体大小，但是我使用这个 mixin 来控制字体大小。我如何调整 mixin 来实现这一点。为了让我有两个版本的 mixin：

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

@function calculateRem($size) {
  $remSize: $size / $font-size-root;
  @return $remSize * 1rem;
}

【问题讨论】：

为什么不在你的 mixin 中加入一个媒体查询？

标签： css sass responsive font-size scss-mixins

【解决方案1】：

您可以在 mixin 中添加媒体查询：

@mixin font-size($desktopSize, $mobileSize) {
  font-size: $desktopSize;
  font-size: calculateRem($desktopSize);

  // This is just and example mobile width
 @media only screen and (max-width:639px){
    font-size: $mobileSize;
    font-size: calculateRem($mobileSize);
  }
}

@function calculateRem($size) {
  $remSize: $size / $font-size-root;
  @return $remSize * 1rem;
}

您可以通过将$mobileSize 设置为等于$desktopSize 来进一步更新mixin 参数：

@mixin font-size($desktopSize, $mobileSize:$desktopSize)

这将防止遍历代码中使用单个参数的 mixin 的所有位置。

【讨论】：