Использование переменных Sass с медиа-запросами CSS3

Это просто невозможно. Поскольку триггер @media screen and (max-width: 1170px) происходит на стороне клиента.

Достичь ожидаемого результата можно было бы только в том случае, если бы SASS захватил все правила и свойства в вашей таблице стилей, содержащей вашу $base_width переменную, и скопировал / изменил их соответственно.

Поскольку это не будет работать автоматически, вы можете сделать это вручную следующим образом:

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

Это не совсем СУХОЕ, но лучшее, что вы можете сделать.

Если изменения одинаковы каждый раз, вы также можете подготовить миксин, содержащий все изменяющиеся значения, чтобы вам не нужно было его повторять. Дополнительно вы можете попробовать комбинировать миксин с конкретными изменениями. Нравиться:

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren't in the mixin
        display: block

И миксин будет выглядеть так

=base_width_changes($base_width)
    #wrapper
        width: $base_width

Подобно ответу Филиппа Зедлера, вы можете сделать это с помощью миксина. Это позволяет вам хранить все в одном файле, если хотите.

    @mixin styling($base-width) {
        // your SCSS here, e.g.
        #Contents {
            width: $base-width;
        }
    }

    @media screen and (max-width: 1170px) {
        @include styling($base-width: 960px);
    }
    @media screen and (min-width: 1171px) {
        @include styling($base-width: 1160px);
    }

Это невозможно с SASS, но возможно с переменными CSS (или Пользовательские свойства CSS). Единственный недостаток - поддержка браузера, но на самом деле есть плагин PostCSS - postcss-css-variables - это «сглаживает» использование переменных CSS (что также обеспечивает поддержку старых браузеров).

Следующий пример отлично работает с SASS (а с переменными postcss-css вы также получаете поддержку старых браузеров).

$mq-laptop: 1440px;
$mq-desktop: 1680px;

:root {
    --font-size-regular: 14px;
    --gutter: 1rem;
}

// The fact that we have to use a `max-width` media query here, so as to not
// overlap with the next media query, is a quirk of postcss-css-variables
@media (min-width: $mq-laptop) and (max-width: $mq-desktop - 1px) {
    :root {
        --font-size-regular: 16px;
        --gutter: 1.5rem;
    }
}

@media (min-width: $mq-desktop) {
    :root {
        --font-size-regular: 18px;
        --gutter: 1.75rem;
    }
}

.my-element {
    font-size: var(--font-size-regular);
    padding: 0 calc(var(--gutter) / 2);
}

Это приведет к следующему CSS. Повторяющиеся медиа-запросы увеличивают размер файла, но я обнаружил, что это увеличение обычно незначительно, если веб-сервер применяет gzip (что обычно происходит автоматически).

.my-element {
  font-size: 14px;
  padding: 0 calc(1rem / 2);
}
@media (min-width: 1680px) {
  .my-element {
  padding: 0 calc(1.75rem / 2);
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  padding: 0 calc(1.5rem / 2);
  }
}
@media (min-width: 1680px) {
  .my-element {
  font-size: 18px;
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  font-size: 16px;
  }
}

Изменить: пожалуйста, не используйте это решение. Ответ Ронена намного лучше.

В качестве решения DRY вы можете использовать оператор @import внутри медиа-запроса, например нравится.

@media screen and (max-width: 1170px) {
    $base_width: 960px;
    @import "responsive_elements";
}
@media screen and (min-width: 1171px) {
    $base_width: 1160px;
    @import "responsive_elements";
}

Вы определяете все отзывчивые элементы в файле, включенном с помощью переменных, определенных в медиа-запросе. Итак, все, что вам нужно повторить, - это оператор импорта.

С помощью отличного ответа @ ronen и карты есть реальная возможность:

    @mixin styling($map) {
        .myDiv {
            background: map-get($map, 'foo');
            font-size: map-get($map, 'bar');
        }
    }

    @media (min-height: 500px) {
        @include styling((
            foo: green,
            bar: 50px
        ));
    }

    @media (min-height: 1000px) {
        @include styling((
            foo: red,
            bar: 100px
        ));
    }

Теперь возможно иметь намного больше DRY медиа-запросов, нацеленных на .myDiv с множеством разных значений.

Документы карты: https://sass-lang.com/documentation/functions/map

Пример использования карты: https://www.sitepoint.com/using-sass-maps/ < / а>

У меня такая же проблема.

Переменная $menu-width должна иметь размер 240 пикселей для мобильной версии @media only screen and (max-width : 768px) и 340 пикселей для настольной версии.

Итак, я просто создал две переменные:

$menu-width: 340px;
$menu-mobile-width: 240px;

И вот как я это использовал:

.menu {
    width: $menu-width;
    @media only screen and (max-width : 768px) {
      width: $menu-mobile-width;
    }
}

Две рекомендации

1 Создайте операторы CSS по умолчанию для маленьких экранов и используйте медиа-запросы только для больших экранов. Обычно max-width медиа-запрос не нужен.

Пример (предполагается, что элемент имеет класс "контейнер")

@mixin min-width($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

.container {
  width: 960px;

  @include min-width(1170px) {
    width: 1160px;
  }
}

2 Используйте переменные CSS для решения проблемы, если можно .

@mixin min-width($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

:root {
  --container-width: 960px;
  @include min-width(1170px) {
    --container-width: 1160px;
  }
}

.container {
  width: var(--container-width);
}

Примечание.

Поскольку его ширина будет 1160 пикселей, когда ширина окна 1170 пикселей, может быть лучше использовать ширину 100% и максимальную ширину 1160 пикселей, а у родительского элемента может быть горизонтальный отступ 5 пикселей, пока для свойства box-sizing установлено значение border-box. Есть много способов решить проблему. Если родительский элемент не является гибким или сеточным контейнером, вы можете использовать .container { margin: auto }.