I have code that creates a grid. To automate this, I use a loop. The problem is that the data in the loop and the data without the loop are different. What could be the matter?

$grid-spacing: 3%; $per: 12, 6, 4, 3, 2.4, 2, 1.714285714285714, 1.5, 1.333333333333333, 1.2, 1.0909090; $i: 11; @while $i > 0 { .col-#{$i}{ float: left; width: ((100% / nth($per,$i)) - ( $grid-spacing * $i / 12 )); } $i: $i - 1; }

and that I get

  width: 8.08333%; (для первого значения)

and if I write for example

 .col-1 { width:(100% / 12) - ($grid-spacing * 11 / 12); }

then get

  width: 5.58333%;

    1 answer 1

    Incorrect calculation of the width in the loop. Corrected, now considers true. Code and example below.

    I also recommend using for and each for cycles instead of while - they are easier to read. And I recommend giving clear names to variables.

    Code:

     $grid-columns: 12; $grid-spacing: 3%; $column-widths: 12, 6, 4, 3, 2.4, 2, 1.714285714285714, 1.5, 1.333333333333333, 1.2, 1.0909090, 1; @for $i from 1 through $grid-columns { .col-#{$i} { float: left; width: (100% - $grid-spacing * (12 / $i - 1)) / nth($column-widths, $i); } }

    And a working example: http://www.sassmeister.com/gist/f395e29554fd41f3259609f540da104a

    • , the answer is a little wrong, col-12 width should get 100%, it’s just that the problem was that if you count the stupidly on the calculator and not do it through the cycle, then it’s 100% and it turns out, but not in a cycle. This is also a mistake, but I can't fix it - G_test_00
    • Corrected the answer, now believes it is true - Vitaly Emelyantsev
    • @ VitaliyEmeliantsev ran into a similar problem, but how to change the answer you gave to make it so .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } .col-12 { width: 100%; } .col-11 { width: 91.66666667%; } .col-10 { width: 83.33333333%; } .col-9 { width: 75%; } - cheburashkarf
    • @cheburashkarf, set $grid-spacing: 0; , then you will not have gaps between the columns, and the values ​​will be as you specified. - Vitaliy Emelyantsev