generates style-rules for a percentual 940px grid

generated.css

.row { margin-left: -2.12766%; }

/* [1] – px: 60 pct: 6.38298% */
.span1 { width: 6.38298%; margin-left: 2.12766%; }

/* [2] – px: 140 pct: 14.89362% */
.span2 { width: 14.89362%; margin-left: 2.12766%; }
.span2 .span1 { width: 42.85714%; margin-left: 14.28571%; } /* 60px */

/* [3] – px: 220 pct: 23.40426% */
.span3 { width: 23.40426%; margin-left: 2.12766%; }
.span3 .span1 { width: 27.27273%; margin-left: 9.09091%; } /* 60px */
.span3 .span2 { width: 63.63636%; margin-left: 9.09091%; } /* 140px */

/* [4] – px: 300 pct: 31.91489% */
.span4 { width: 31.91489%; margin-left: 2.12766%; }
.span4 .span1 { width: 20.00000%; margin-left: 6.66667%; } /* 60px */
.span4 .span2 { width: 46.66667%; margin-left: 6.66667%; } /* 140px */
.span4 .span3 { width: 73.33333%; margin-left: 6.66667%; } /* 220px */

/* [5] – px: 380 pct: 40.42553% */
.span5 { width: 40.42553%; margin-left: 2.12766%; }
.span5 .span1 { width: 15.78947%; margin-left: 5.26316%; } /* 60px */
.span5 .span2 { width: 36.84211%; margin-left: 5.26316%; } /* 140px */
.span5 .span3 { width: 57.89474%; margin-left: 5.26316%; } /* 220px */
.span5 .span4 { width: 78.94737%; margin-left: 5.26316%; } /* 300px */

/* [6] – px: 460 pct: 48.93617% */
.span6 { width: 48.93617%; margin-left: 2.12766%; }
.span6 .span1 { width: 13.04348%; margin-left: 4.34783%; } /* 60px */
.span6 .span2 { width: 30.43478%; margin-left: 4.34783%; } /* 140px */
.span6 .span3 { width: 47.82609%; margin-left: 4.34783%; } /* 220px */
.span6 .span4 { width: 65.21739%; margin-left: 4.34783%; } /* 300px */
.span6 .span5 { width: 82.60870%; margin-left: 4.34783%; } /* 380px */

/* [7] – px: 540 pct: 57.44681% */
.span7 { width: 57.44681%; margin-left: 2.12766%; }
.span7 .span1 { width: 11.11111%; margin-left: 3.70370%; } /* 60px */
.span7 .span2 { width: 25.92593%; margin-left: 3.70370%; } /* 140px */
.span7 .span3 { width: 40.74074%; margin-left: 3.70370%; } /* 220px */
.span7 .span4 { width: 55.55556%; margin-left: 3.70370%; } /* 300px */
.span7 .span5 { width: 70.37037%; margin-left: 3.70370%; } /* 380px */
.span7 .span6 { width: 85.18519%; margin-left: 3.70370%; } /* 460px */

/* [8] – px: 620 pct: 65.95745% */
.span8 { width: 65.95745%; margin-left: 2.12766%; }
.span8 .span1 { width: 9.67742%; margin-left: 3.22581%; } /* 60px */
.span8 .span2 { width: 22.58065%; margin-left: 3.22581%; } /* 140px */
.span8 .span3 { width: 35.48387%; margin-left: 3.22581%; } /* 220px */
.span8 .span4 { width: 48.38710%; margin-left: 3.22581%; } /* 300px */
.span8 .span5 { width: 61.29032%; margin-left: 3.22581%; } /* 380px */
.span8 .span6 { width: 74.19355%; margin-left: 3.22581%; } /* 460px */
.span8 .span7 { width: 87.09677%; margin-left: 3.22581%; } /* 540px */

/* [9] – px: 700 pct: 74.46809% */
.span9 { width: 74.46809%; margin-left: 2.12766%; }
.span9 .span1 { width: 8.57143%; margin-left: 2.85714%; } /* 60px */
.span9 .span2 { width: 20.00000%; margin-left: 2.85714%; } /* 140px */
.span9 .span3 { width: 31.42857%; margin-left: 2.85714%; } /* 220px */
.span9 .span4 { width: 42.85714%; margin-left: 2.85714%; } /* 300px */
.span9 .span5 { width: 54.28571%; margin-left: 2.85714%; } /* 380px */
.span9 .span6 { width: 65.71429%; margin-left: 2.85714%; } /* 460px */
.span9 .span7 { width: 77.14286%; margin-left: 2.85714%; } /* 540px */
.span9 .span8 { width: 88.57143%; margin-left: 2.85714%; } /* 620px */

/* [10] – px: 780 pct: 82.97872% */
.span10 { width: 82.97872%; margin-left: 2.12766%; }
.span10 .span1 { width: 7.69231%; margin-left: 2.56410%; } /* 60px */
.span10 .span2 { width: 17.94872%; margin-left: 2.56410%; } /* 140px */
.span10 .span3 { width: 28.20513%; margin-left: 2.56410%; } /* 220px */
.span10 .span4 { width: 38.46154%; margin-left: 2.56410%; } /* 300px */
.span10 .span5 { width: 48.71795%; margin-left: 2.56410%; } /* 380px */
.span10 .span6 { width: 58.97436%; margin-left: 2.56410%; } /* 460px */
.span10 .span7 { width: 69.23077%; margin-left: 2.56410%; } /* 540px */
.span10 .span8 { width: 79.48718%; margin-left: 2.56410%; } /* 620px */
.span10 .span9 { width: 89.74359%; margin-left: 2.56410%; } /* 700px */

/* [11] – px: 860 pct: 91.48936% */
.span11 { width: 91.48936%; margin-left: 2.12766%; }
.span11 .span1 { width: 6.97674%; margin-left: 2.32558%; } /* 60px */
.span11 .span2 { width: 16.27907%; margin-left: 2.32558%; } /* 140px */
.span11 .span3 { width: 25.58140%; margin-left: 2.32558%; } /* 220px */
.span11 .span4 { width: 34.88372%; margin-left: 2.32558%; } /* 300px */
.span11 .span5 { width: 44.18605%; margin-left: 2.32558%; } /* 380px */
.span11 .span6 { width: 53.48837%; margin-left: 2.32558%; } /* 460px */
.span11 .span7 { width: 62.79070%; margin-left: 2.32558%; } /* 540px */
.span11 .span8 { width: 72.09302%; margin-left: 2.32558%; } /* 620px */
.span11 .span9 { width: 81.39535%; margin-left: 2.32558%; } /* 700px */
.span11 .span10 { width: 90.69767%; margin-left: 2.32558%; } /* 780px */

/* [12] – px: 940 pct: 100.00000% */
.span12 { width: 100.00000%; margin-left: 2.12766%; }

grid-generator.js

var margin = (100*20/940).toFixed(5);

console.log('.row { margin-left: -'+margin+'%; }');
for(var i=1;i<=12;i++) {
    var px=60*i+20*(i-1),
        pct=(100*px/940).toFixed(5);

    console.log('');
    console.log('/* ['+i+'] – px: ' + px, 'pct: ' + pct+'% */');
    console.log('.span'+i+' { width: '+pct+'%; margin-left: '+margin+'%; }');

    if(i==12) break;
    for(var j=1; j<i; j++) {
        var iPx=60*j+20*(j-1),
            iMarginPct=(100*20/px).toFixed(5),
            iPct=(100*iPx/px).toFixed(5); // related to parent width
        console.log('.span'+i+' .span'+j+' { width: '+iPct+'%; margin-left: '+iMarginPct+'%; } /* '+iPx+'px */');
    }
}