Используя переменные Сасс с помощью CSS3 медиа-запросы

Я пытаюсь объединить использование переменной 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 затем определяется в различных точках таблицы стилей на основе процентных измерений ширины для создания жидких макетов.

когда я делаю это, переменная, кажется, распознается правильно, но условия для запроса мультимедиа не являются. Например, приведенный выше код создает макет 1160px независимо от ширины экрана. Если я переворачиваю заявления @media, такие как Итак:

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

он производит макет 960px, снова независимо от ширины экрана. Также обратите внимание, что если я удалю первую строку $base_width: 1160px; он возвращает ошибку неопределенной переменной. Есть идеи, что мне не хватает?

4 71
sass media-queries

4 ответа:

Это просто невозможно. Так как триггер @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
69

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

@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);
}
27

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

в качестве сухого раствора можно использовать @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";
}

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

6

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

The $menu-width переменная должна быть 240px на мобильный view @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