Как лучше подойти к построению сеток на bourbon neat?

Question

[weredy]

Изначально понравилась идея sass миксинов для сеток, когда ты нужным классам присваиваешь нужные свойста а не используешь готовые .container, .col-lg-12 и.т.д. Но с другой стороны это сильно раздувает css: например у меня есть блоки header, main, footer и их свойства отчасти дублируются потому что они являются по-сути бутстраповскими (ну или какими нибудь еще) контейнерами. Может я что-то не так делаю и мне надо в sass создать эти .container, .col-lg и прочие и по сути работать как с готовой библиотекой css? Как правильно подходить к созданию сеток на sass библиотеках?

Большое спасибо за советы.

Answer 1

[gto6120]

Имею ту же проблему...

&__logo {
    width: 100%;
    background: $color-tacha url('../img/header-triangle.png') no-repeat;
    background-position: right;
    line-height: $lg-top-height;
    @include grid-media($xs-grid) {
      @include grid-column(12, $xs-grid);
    }
    @include grid-media($sm-grid) {
      @include grid-column(4, $sm-grid);
    }
    @include grid-media($md-grid) {
      @include grid-column(5, $md-grid);
    }
    @include grid-media($lg-grid) {
      @include grid-column(6, $lg-grid);
    }

    img {
      max-width: 329px;
      @include grid-media($sm-grid) {
        width: 70%;
      }
      vertical-align: middle;
    }
  }

  &__nav {
    height: $lg-top-height;
    background-color: $color-white;

    @include grid-media($xs-grid) {
      @include grid-column(12, $xs-grid);
    }
    @include grid-media($sm-grid) {
      @include grid-column(8, $sm-grid);
    }
    @include grid-media($md-grid) {
      @include grid-column(7, $md-grid);
    }
    @include grid-media($lg-grid) {
      @include grid-column(6, $lg-grid);
    }
  }

Хуже всего то, что вместо парочки классов в html, вылазят вот такие портянки инклудов. Так должно быть? Если это и есть семантическая верстка, то я манал...