Grid Calculator in Sass

[Aripipevant]

Probabil aveti nevoie uneori s? dezvolta?i pe diferite m?rimi când face?i un layout ?i s? calcula?i întotdeauna ?inta ?i contextul pentru fiecare coloan? în parte, de la 1, la cât ave?i nevoie, 12, 24 etc. Cu pu?inele mele cuno?tin?e în Sass am creat ceva destul de folositor pentru a nu mai face manual calculul, a?a c? am creat un mini-calculator pentru coloane.

Orice sugestie în plus e binevenit? atât timp cât se leag? de Sass ?i de micul calculator

// If it is set to true, the function will display values in percentages
$grid-width-in-percentage: true;

// If it is set to true, the function will display values in pixels.
$grid-width-in-pixels: true;

// Columns or context. The currently value result in 960 (in pixels) and 100% in percentages.
$columns: 12;

// The width of the grid for each columns. Ex: the first columns will have 60px and so on ...
$column-width: 60;

// The width of the gap between each columns. Note! One columns don't have gap.
$gutter-width: 20;

// This is the number from where grid begin to count in loop.
$number-offset: 1;

// The margin before the first grid and after the last grid.
$margin: 20;

// Pixel to precentage formula: target (width (= columns) + margin + gutter width) / context (total width (= context is columns)) = result

  @InClude grid;