Sass.flex-row{ display: flex; flex-wrap: wrap; justify-content: space-between; } [class*="size-col-"]{ width: 100%; } @mixin greed-size($property) { $padding: 20px; @for $i from 1 through 12 { $size: (100% / 12 * $i); .size-col-#{$property}-#{$i} { @if($i == 12){ width: #{$size}; }@else{ width: calc(#{$size} – #{$padding}); } } } } @media (min-width:500px){ @include greed-size("xs"); } @media (min-width:768px){ @include greed-size("sm"); } @media (min-width:992px) { @include greed-size("md"); } @media (min-width:1200px){ @include greed-size("lg"); } /*****/ или так Sass$breack_points: ( xs: 500, sm: 768, md: 992, lg: 1200, xxlg: 1382 ); $padding: 15px; @mixin greed-size($property,$cols,$prefix) { @for $i from 1 through $cols { $size: (100% / $cols * $i); .#{$prefix}-col-#{$property}-#{$i} { width: #{$size}; } } } @mixin set_greed($prefix,$cols,$args){ [class*="#{$prefix}-col-"]{ width: 100%; padding: 0 $padding; box-sizing: border-box; } .#{$prefix}-container-fluid, .#{$prefix}-container{ max-width: 100%; padding: 0 $padding; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: start; box-sizing: border-box; } .#{$prefix}-container{ .#{$prefix}-container{ margin-left: 0; margin-right: 0; } } .#{$prefix}-container-fluid{ width: 100%; } @each $size, $witdh in $args{ @media (min-width: #{$witdh}px){ .#{$prefix}-d-none-#{$size}{ display: none; } .#{$prefix}-justify-center-#{$size}{ justify-content: center; } .#{$prefix}-justify-right-#{$size}{ justify-content: flex-end; } .#{$prefix}-justify-left-#{$size}{ justify-content: flex-start; } .#{$prefix}-container{ max-width: #{$witdh}px; } .nopadding-#{$size}{ padding: 0; } @include greed-size($size,$cols,$prefix); } } } @include set_greed("rc",24,$breack_points); .justify-content-center{ justify-content: center; } Будет дополнятся …