Добавить точку останова в миксине sass

Question

Моя конечная цель - иметь один размер шрифта для мобильных устройств (16 пикселей) и еще один для настольных компьютеров (18 пикселей), однако я использовал этот миксин для управления размером шрифта. Как я могу адаптировать миксин, чтобы добиться этого. чтобы избавить меня от двух версий миксина:

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

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

Answer 1

Вы можете добавить медиа-запрос в миксин:

@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 font-size($desktopSize, $mobileSize:$desktopSize)

Это предотвратит прохождение всех мест в вашем коде, где вы использовали этот миксин с одним параметром.