Mожно реализовать в sass?

Question

[Рустамка Воронцов]

Здравствуйте, есть 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%; }

Нужно сделать чтоб он всегда на последнем элементе убирал margin-right: $grid-spacing;

codepen.io/anon/pen/dYXMyo

например .col-6 .col-3 .col-3 (убираем margin-right) .col-3 .col-3 .col-3 .col-3

Спасибо!

Answer 1

[Сергей delphinpro]

Для задания вычисляемых процентных значений лучше использовать встроенную функцию percentage()
percentage(1/3); = одна треть (на выходе 33.33333%)
percentage(3/12); = а так удобно писать для сеток. 3 колонки из 12. одна четверть. (на выходе 25%)

По теме вопроса:
часто межколоночные отступы в сетках компенсируют отрицательными отступами у класса-контейнера, что позволяет избежать мозготраха с удалением отступов у крайних колонок.

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

Comments

[Рустамка Воронцов]

Спасибо сейчас попробую.