Can it be implemented in sass?

Question

Sass

Hello, there is grid

%clearfix:after {
    display:block;
    clear:both;
    content:'';
}
 
$grid-spacing: 3%;
 
.row {
    @extend %clearfix;
    & + & {
        margin-top:$grid-spacing;
    }
}
 
[class^="col-"] {
    float:left;
    margin-right:$grid-spacing;
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
 
    &:last-child {
        margin-right:0%;
    }
    
    &.last {
        margin-right:0%;
    }
}
 
.col-1   { width:(100% / 12) - ($grid-spacing * 11 / 12); }
.col-2   { width:(100% / 6) - ($grid-spacing * 10 / 12); }
.col-3   { width:(100% / 4) - ($grid-spacing * 9 / 12); }
.col-4   { width:(100% / 3) - ($grid-spacing * 8 / 12); }
.col-5   { width:(100% / 2.4) - ($grid-spacing * 7 / 12); }
.col-6   { width:(100% / 2) - ($grid-spacing * 6 / 12); }
.col-7   { width:(100% / 1.714285714285714) - ($grid-spacing * 5 / 12); }
.col-8   { width:(100% / 1.5) - ($grid-spacing * 4 / 12); }
.col-9   { width:(100% / 1.333333333333333) - ($grid-spacing * 3 / 12); }
.col-10  { width:(100% / 1.2) - ($grid-spacing * 2 / 12); }
.col-11  { width:(100% / 1.090909090909091) - ($grid-spacing * 1 / 12); }
.col-12  { width:100%; }

It is necessary to make it always remove the margin-right on the last element: $grid-spacing;
codepen.io/anon/pen/dYXMyo
for example .col-6 .col-3 .col-3 (remove margin-right) .col-3 .col-3 .col-3 .col-3
Thank you!

Answer 1

To set the calculated percentage values, it is better to use the built-in function percentage()
percentage(1/3); = one third (output 33.33333%)
percentage(3/12);= and this is convenient to write for grids. 3 columns out of 12. one quarter. (output 25%)
On the topic of the question:
often inter-column indents in grids are compensated by negative indents in the container class, which allows you to avoid brain-fuck with the removal of indents from the outermost columns.

.row {
  margin-left: -($grid-spacing / 2);
  margin-right: -($grid-spacing / 2);
}