What is the best approach to meshing on bourbon neat?

Question

css

Initially, I liked the idea of ​​​​sass mixins for grids, when you assign the necessary properties to the necessary classes and do not use ready-made .container, .col-lg-12, etc. But on the other hand, this greatly inflates css: for example, I have header, main, footer blocks and their properties are somewhat duplicated because they are essentially bootstrap (well, or some other) containers. Maybe I'm doing something wrong and I need to create these .container, .col-lg and others in sass and, in fact, work like with a ready-made css library? What is the right approach to creating grids on sass libraries?
Thank you very much for your advice.

Answer 1

I have the same problem...

&__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);
    }
  }

Worst of all, instead of a couple of classes in html, such footcloths of inclusions come out. It should be? If this is semantic layout, then I manal ...