из моих запасов SCSS
$grid-columns: 12;
$grid-gutter-width: 30px ;
// Break-points
$screenSM:544px; //S
$screenMD:768px; //M
$screenLG:992px; //L
$screenXL:1200px; //XL
$containerSM:480px; //S
$containerMD:720px; //M
$containerLG:960px; //L
$containerXL:1140px; //XL
// for example: @media #{$md}
$sm: "(max-width: #{$screenSM})";
$md: "(max-width: #{$screenMD})";
$lg: "(max-width: #{$screenLG})";
$xl: "(max-width: #{$screenXL})";
@mixin clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
}
@mixin container($max-widths: 100%, $gutter: $grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
max-width: $max-widths;
@include clearfix();
}
@mixin row($gutter: $grid-gutter-width) {
margin-left: ($gutter / -2);
margin-right: ($gutter / -2);
@include clearfix();
}
@mixin col($size, $gutter: $grid-gutter-width, $columns: $grid-columns) {
position: relative;
float: left;
min-height: 1px;
padding-left: ($gutter / 2);
padding-right: ($gutter / 2);
width: percentage($size / $columns);
}
@mixin col-size($size, $columns: $grid-columns) {
width: percentage($size / $columns);
}
Далее пример генерации классов
.container {
@include container($containerXL);
}
.row {
@include row();
}
.block {
@include col(4);
@media #{$md} {
@include col-size(3);
}
}
и разметка
.container
.row
.block
.block
.block
Простой
