Размещение медиазапросов в файле app.scss в Foundation 6 не работает

Question

Я новичок в Foundation 6. Я хочу, чтобы текст заголовка на моей веб-странице был меньше, когда область просмотра средняя или меньше.

Я понимаю, что для создания медиа-запроса, css для него идет в файле app.scss, чуть ниже раздела @import. Мой код соответствует новому подходу для медиазапросов в Foundation 6 и выглядит следующим образом:

.head {
  @include breakpoint(medium down) {
     font-size: 2rem; 
     }
}

Однако после того, как я сохраню свою страницу и файл app.scss, а затем обновлю свой браузер, я не изменюсь, когда уменьшу свою страницу. Может кто-нибудь, пожалуйста, помогите?

Спасибо Стив

Answer 1

Я сделал свои собственные миксины, чтобы вы могли без проблем вносить эти небольшие исправления. тебе стоит попробовать это.

//Breakpoints *include
@mixin bp-xl {
  @media only screen and (min-width: 1400px){
    @content;
  }
}
@mixin bp-l {
  @media only screen and (min-width: 1024px){
    @content;
  }
}
@mixin bp-m {
  @media only screen and (min-width: 800px) {
    @content;
  }
}
@mixin bp-s {
  @media only screen and (min-width: 450px) {
    @content;
  }
}
@mixin bp-xs {
  @media only screen and (min-width: 320px) {
    @content;
  }
}

Тогда все, что вы делаете, например:

p {
font-size: 18px;
@include bp-s{font-size:22px;};

@include bp-m{font-size:24px;};

@include bp-xl{font-size:32px;};
}

¡Вы также можете создать столько правил, сколько вам нужно!
Надеюсь, вам понравится:D