Аккуратная новая точка останова

Question

Я использую аккуратный бурбон и пытаюсь использовать его миксин с новой точкой останова, но он не работает. Уже могу сказать, что я загрузил первый бурбон, чем grid и breakpoints.scss и чем аккуратнее

Так что я могу видеть изменения, когда я пишу:

@include media(max-width 500px) {
          @include span-columns(12); 
          background: red;
        }

но не когда я пишу:

$mobile: new-breakpoint(max-width 500px);
@include media($mobile) {
            @include span-columns(4);
             background: red;
          }

Есть идеи почему?

Answer 1

Попробуйте определить количество столбцов в вашем new-breakpoint объявление как это:

$mobile: new-breakpoint(max-width 480px 4);

Также вы можете получить проблему, если вы импортируете свой отзывчивый CSS после вашего обычного CSS.

Наконец, вы должны изменить вывод.scss на обычный css (не минимизированный) для лучшего понимания кода. Когда вам нужно загрузить свой код, вы можете изменить настройки и минимизировать CSS.

Answer 2

Вы можете использовать минимальное и максимальное значения для разных разрешений. Скажем, вам нужно до 480, то вы должны пойти на

$mobile: new-breakpoint(max-width 480px 4);

И если вы хотите использовать планшет, вы должны пойти на

    $tablet: new-breakpoint(min-width 481px 8);

Убедитесь, что вы начинаете с Min для верхних пределов.