Использование susy и точки останова с grunt-sass

Я работаю над новым проектом и начал использовать grunt-sass вместо grunt-contrib-sass, потому что это намного быстрее. Я также удалил компас. Дело в том, что я больше не могу найти способ добавить сетку «susy» и «точку останова». Раньше я помещал это в файл config.rb, но больше не использую его, потому что не использую компас.

Итак, я добавил все стили susy в свой проект, и это отлично работает, но это не мой предпочтительный метод. Но не могу найти способ добавить точку останова.

Есть ли способ добавить их? Или я должен использовать компас для этого?

Извините за мой плохой английский, не очень хорош в нем.


sass breakpoint-sass susy gruntfile
person Toasty    schedule 02.04.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Компас не нужен, есть новая точка останова Mixin susy-media, предназначенная для работы с LibSass, которую вы, по сути, используете через grunt-sass. Это то, что я использую, и это прекрасно работает. Таким образом, вы должны определить некоторые переменные сетки Susy и точки останова в партиале _vars.scss, например:

// Define susy.
$susy: (
    columns: 12,
    gutters: .8,
);

// Define some breakpoints.
$bp-narrow: 30em;  // 480px
$bp-med: 48em; // 768px

Теперь соберите все вместе, например, в _layout.scss:

// the breakpoint (media query)
@include susy-media($bp-med) {
  // now a grid 
  .l-foobar-wrap {
    .foo {
      @include span(7)
    }
    .bar {
      @include span(5 at 8)
    }
  }
}

Для получения дополнительной информации ознакомьтесь с документацией по susy. работает с grunt-sass (LibSass). Это часть моего повседневного рабочего процесса.

Обратите внимание, что в качестве альтернативы действительно приятному рендерингу медиазапросов и рабочим процессам Retina я теперь использую Include Media чем susy-media, и он также отлично работает с LibSass.

person Danny Englander    schedule 02.04.2015