BEM + Grid + Stylus

BEMcssGrid

[class*="--col"] {
  height: 100%;
}
[class*="--row"] {
  width: 100%;
}
[class*="col-"] {
  float: left;
}
[class*="--col-1"] {
  width: 5em;
}
[class*="--col-2"] {
  width: 10em;
}
[class*="--col-3"] {
  width: 15em;
}
[class*="--col-4"] {
  width: 20em;
}
[class*="--col-5"] {
  width: 25em;
}
[class*="--col-6"] {
  width: 30em;
}
[class*="--col-7"] {
  width: 35em;
}
[class*="--col-8"] {
  width: 40em;
}
[class*="--col-9"] {
  width: 45em;
}
[class*="--col-10"] {
  width: 50em;
}
[class*="--col-11"] {
  width: 55em;
}
[class*="--col-12"] {
  width: 60em;
}
[class*="--col-full"] {
  width: 60em;
}
[class*="--col-half"] {
  width: 30em;
}
[class*="--col-1fourth"] {
  width: 15em;
}
[class*="--col-2fourth"] {
  width: 30em;
}
[class*="--col-3fourth"] {
  width: 45em;
}
[class*="--col-4fourth"] {
  width: 60em;
}
[class*="--col-1eighth"] {
  width: 7.5em;
}
[class*="--col-2eighth"] {
  width: 15em;
}
[class*="--col-3eighth"] {
  width: 22.5em;
}
[class*="--col-4eighth"] {
  width: 30em;
}
[class*="--col-5eighth"] {
  width: 37.5em;
}
[class*="--col-6eighth"] {
  width: 45em;
}
[class*="--col-7eighth"] {
  width: 52.5em;
}
[class*="--1col"] {
  width: 20em;
}
[class*="--2col"] {
  width: 40em;
}
[class*="--3col"] {
  width: 60em;
}
.relCol--1 {
  width: 100%;
}
.relCol--2 {
  width: 50%;
}
.relCol--3 {
  width: 33.333333333333336%;
}
.relCol--4 {
  width: 25%;
}
.relCol--5 {
  width: 20%;
}
.relCol--6 {
  width: 16.666666666666668%;
}
.relCol--7 {
  width: 14.285714285714286%;
}
.relCol--8 {
  width: 12.5%;
}
.relCol--9 {
  width: 11.11111111111111%;
}
.relCol--10 {
  width: 10%;
}
.relCol--11 {
  width: 9.090909090909092%;
}
.relCol--12 {
  width: 8.333333333333334%;
}

BEMStylusGrid

colWidth = 5em
numCols = 12

thirdCol = ((numCols / 3) * colWidth)
fourthCol = ((numCols / 4) * colWidth)
eightCol = fourthCol /2
halfCol = ((numCols / 2) * colWidth)

[class*="--col"]
	height: 100%;
[class*="--row"]
	width: 100%

[class*="col-"]
	float:left
	
for num in (1..numCols)
	&[class*=\"--col-{num}\"]
		width: (num * colWidth)

[class*="--col-full"]
	width: colWidth * 12

[class*="--col-half"]
	width: halfCol
	
for num in 1 2 3 4
	[class*=\"--col-{num}fourth\"]
		width: fourthCol * num
	
for num in 1 2 3 4 5 6 7
	[class*=\"--col-{num}eighth\"]		
		width: eightCol * num
		
for num in 1 2 3
	[class*=\"--{num}col\"]
		width: thirdCol * num

.relCol
	for num in 1 2 3 4 5 6 7 8 9 10 11 12
		&--{num}
			width: (100/num)%