Своя сетка на SASS (SCSS)


/* начальные данные */
$items: 12;
$padding-grid:15px;
$breakpoints: (
        xs: 320px,
        sm: 480px,
        md: 720px,
        lg: 960px,
        xl: 1024px,
        xx: 1200px
);

/* mixin*/
@mixin paddingcol ($size) {
  padding-left: $size;
  padding-right: $size;
}
@mixin marginrow ($size) {
  margin-left: $size;
  margin-right:$size;
}



@mixin break($size) {
  @media (min-width: map-get($breakpoints, $size)) {
    @content;
  }
}

/* цикл построения*/

@each $key, $value in $breakpoints {
  .container {
    @include break($key) {
      width:map-get($breakpoints, $key) ;
    }
  }
  @for $i from 1 through $items {
    .col-#{$key}-span-#{$i} {
      /*flex: 0 0 100%;*/
      width: 100%;
      float: left;
      @include paddingcol($padding-grid);
      @include break($key) {
        width:#{$i / $items * 100%} ;
        /*flex: 0 0 #{$i / $items * 100%};*/
      }
    }
  }
}
.container {
  @include break(xs) {
    width:100% ;
  }
}

Отправить комментарий

Другие статьи рубрики "Сетки"