Я пытаюсь совместить использование переменной Sass с запросами @media следующим образом:
$base_width:1160px;
@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}
$base_width
затем определяется в различных точках измерения ширины таблицы стилей на основе процентов для создания гибких макетов.
Когда я это делаю, кажется, что переменная распознается правильно, а условия для медиа-запроса - нет. Например, приведенный выше код создает макет размером 1160 пикселей независимо от ширины экрана. Если я переверну утверждения @media следующим образом:
@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}
Он создает макет 960 пикселей, опять же, независимо от ширины экрана. Также обратите внимание, что если я удалю первую строку, $base_width: 1160px;
она вернет ошибку для неопределенной переменной. Есть идеи, что мне не хватает?
sass
media-queries
Джереми С.
источник
источник
Ответы:
Это просто невозможно. Поскольку триггер
@media screen and (max-width: 1170px)
происходит на стороне клиента.Достижение ожидаемого результата возможно только в том случае, если SASS захватит все правила и свойства из вашей таблицы стилей, содержащей ваш
$base_width
переменную, и скопирует / изменит их соответственно.Поскольку это не будет работать автоматически, вы можете сделать это вручную следующим образом:
Это не совсем СУХОЕ, но лучшее, что вы можете сделать.
Если изменения одинаковы каждый раз, вы также можете подготовить миксин, содержащий все изменяющиеся значения, чтобы вам не нужно было его повторять. Дополнительно вы можете попробовать комбинировать миксин с конкретными изменениями. Подобно:
И миксин будет выглядеть так
источник
$foo: 1rem; @media (min-width: 10rem) {$foo: 2rem} .class {font-size: $foo} .class2 {padding: $foo}
приведет к.class {font-size: 1rem} .class2 {padding: 1rem} @media (min-width: 10rem) (.class {font-size: 2rem} .class2 {padding: 2rem}}
Подобно ответу Филиппа Зедлера, вы можете сделать это с помощью миксина. Это позволяет вам хранить все в одном файле, если хотите.
источник
Изменить: пожалуйста, не используйте это решение. Ответ Ронена намного лучше.
В качестве СУХОГО решения вы можете использовать
@import
оператор внутри медиа-запроса, например, вот так.Вы определяете все отзывчивые элементы в файле, включенном с помощью переменных, определенных в медиа-запросе. Итак, все, что вам нужно повторить, - это оператор импорта.
источник
Это невозможно с SASS, но возможно с переменными CSS (или настраиваемыми свойствами CSS ). Единственный недостаток - это поддержка браузера, но на самом деле есть плагин PostCSS - postcss-css-variables - который «сглаживает» использование переменных CSS (что дает вам поддержку и для старых браузеров).
Следующий пример отлично работает с SASS (а с переменными postcss-css вы также получаете поддержку старых браузеров).
Это приведет к следующему CSS. Повторяющиеся медиа-запросы увеличивают размер файла, но я обнаружил, что это увеличение обычно незначительно после применения веб-сервера
gzip
(что обычно происходит автоматически).источник
С отличным ответом @ ronen и картой есть реальная сила:
Теперь возможно иметь гораздо больше DRY медиа-запросов, нацеленных
.myDiv
на множество разных значений.Документы карты: https://sass-lang.com/documentation/functions/map
Пример использования карты: https://www.sitepoint.com/using-sass-maps/
источник
У меня такая же проблема.
$menu-width
Переменная должна быть 240px на мобильный зрения@media only screen and (max-width : 768px)
и 340px на рабочем столе зрения.Итак, я просто создал две переменные:
И вот как я это использовал:
источник
Две рекомендации
1 Напишите операторы CSS по умолчанию для маленьких экранов и используйте медиа-запросы только для больших экранов. Обычно в
max-width
медиа-запросе нет необходимости .Пример (предполагается, что элемент имеет класс "контейнер")
2 С помощью переменных CSS , чтобы решить эту проблему, если вы можете .
Примечание:
Поскольку его ширина будет 1160 пикселей, когда ширина окна 1170 пикселей, может быть лучше использовать ширину 100% и максимальную ширину 1160 пикселей, а родительский элемент может иметь горизонтальное заполнение 5 пикселей, если для свойства box-sizing установлено значение border-box. Есть много способов решить проблему. Если родительский элемент не является гибким или сеточным контейнером, вы можете использовать его
.container { margin: auto }
.источник