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

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

83 голосов
/ 03 февраля 2012

Я пытаюсь совместить использование переменной 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;, она возвращает ошибку для неопределенной переменной. Есть идеи, что мне не хватает?

Ответы [ 6 ]

79 голосов
/ 03 февраля 2012

Это просто невозможно.Поскольку триггер @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
37 голосов
/ 11 марта 2015

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

@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);
}
6 голосов
/ 03 марта 2015

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

В качестве СУХОГО решения вы можете использовать оператор @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";
}

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

2 голосов
/ 03 марта 2017

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

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

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

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

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

.menu {
    width: $menu-width;
    @media only screen and (max-width : 768px) {
      width: $menu-mobile-width;
    }
}
1 голос
/ 22 марта 2019

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

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

$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;
  }
}
0 голосов
/ 05 июля 2019

С @ 1001 * замечательным ответом @ 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 / документация / функции / карта

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

...