时间戳

首页 > 解决方案 > 在 sass mixin 中添加断点

css - 在 sass mixin 中添加断点

问题描述

我的最终目标是为移动设备（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;
}

标签： csssassresponsivefont-sizescss-mixins

解决方案

您可以在 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您可以通过将 设置为等于来进一步更新 mixin 参数$desktopSize：

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

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

推荐阅读