Как изменить переменную scss на основе медиа-запросов

Question

Я работаю над scss веб-страницей и столкнулся с проблемой. У меня есть следующая scss функция для преобразования моего шрифта px единиц в rem.

@function rem($size) {
 $remSize: $size / $base-size;
 @return #{$remSize}rem;
}

В приведенной выше функции $base-size является статическим и остается 16, но я хочу изменить base-size на 12, когда я нацеливаюсь на мобильные устройства, чтобы уменьшить избыточность изменения font-size на протяжении всего проекта. Есть ли какой-нибудь подход, который я могу сделать динамическим $base-size, чтобы значение менялось в зависимости от разрешения экрана. Любая помощь будет оценена.

Answer 1

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

Не зная деталей вашего проекта, это может быть одним из решений - если я правильно понимаю, как вы используете свою функцию:

$base-size: 16px;

@function rem($size, $screen: desktop) {
    $remSize: null;

    @if ($screen == desktop) {
        $remSize: ($size / $base-size) * 16/16;
    }
    @if ($screen == mobile) {
        $remSize: ($size / $base-size) * 12/16;
    }
    @else {
        $remSize: $size / $base-size;
    }

    @return #{$remSize}rem;
}

.some-text {
    font-size: rem(24px); /* = 1.5rem */
}

@media (max-width: 480px) {
    .some-text {
        font-size: rem(24px, mobile); /* = 1.125rem */
    }
}

Добавив аргумент $screen в функцию rem(), вы можете переключать базовый размер между рабочим столом и мобильным компьютером без изменения статической переменной.

В этом примере по умолчанию используется desktop и используется max-with в медиа-запросе, но с таким же успехом можно установить значение по умолчанию mobile, и вы можете различать с помощью min-width.

Answer 2

Насколько я знаю, это невозможно. Переменная $ base-size заполняется один раз, и медиа-запрос выполняется на стороне клиента.

Вы можете попытаться написать новую функцию для каждого медиа-запроса с новой переменной и значением базового размера.

переменные:

$base-size: 16px;
$base-size-small: 12x;

функции:

@function rem($size) {
 $remSize: $size / $base-size;
 @return #{$remSize}rem;
}

@media only screen and (max-width : 768px) {
  @function rem($size) {
   $remSize: $size / $base-size-small;
   @return #{$remSize}rem;
  }
}