navi-horizontal.scss

layout.html.haml

    %section.navi-horizontal2
      .navi-horizontal2__scroll
        %ul.navi-horizontal2__scroll__list
          %li
            .navi-item
              .inavi-item__title Apple
              %img{src: 'https://farm6.staticflickr.com/5553/30703927856_188964ae21_q_d.jpg'}
          %li りんご
          %li ふじ
          %li 紅玉
          %li 王林
          %li Apple
          %li りんご
          %li ふじ
          %li 紅玉
          %li 王林

navi-horizontal.scss

@mixin navi-horizontal ($item-width: 200px, $scroll-height: auto, $item-margin: 10px){
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;

  &__scroll {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    height: $scroll-height;

    &__list {
      display: inline-table;
      overflow-x: auto;
      margin: 0 - $item-margin;
      padding: 0;
      border-collapse: separate;
      border-spacing: $item-margin 0;

      &div, article, li {
        display: table-cell;
        min-width: $item-width;
        @content;
      }
    }
  }
}

%navi-item {
  background-color: #336699;
  margin-right: 10px;
  img {
    border: 1px solid red;
  }
}

.navi-item {
  background: #e7e7e7;
  &__title {
    font-weight: bold;
  }
  img{
    border: 1px solid blue;
  }
}

.navi-horizontal2 {
  @include navi-horizontal($item-width: 200px, $scroll-height: 200px, $item-margin: 10px){
    @extend %navi-item;
  };
}

.navi-horizontal {
  @include navi-horizontal(150px, 100px){
    margin-right: 10px;
    border: 1px solid red;
  };
}