GCD and Grid width setup routine with query namespacing

SassMeister-input.scss

// demo of using greatest-common-denominator function to chain extensions of classes
// meant for grid width classes; would normally be done with placeholder selectors

@function gcd($n,$d) {
    $num: if($n < $d,$d,$n);
    $denom: if($n < $d,$n,$d);
	$rem: $num;
	$last_rem: $num;
	@while $rem != 0 {
		$last_rem: $rem;
		$rem: $denom % $num;
		$denom: $num;
		$num: $rem;
	}
	// is this last part necessary?
	@if $last_rem != 0 {
		@return $last_rem;
	} @else {
		@return 1;
	}
}

$grid_columns:24;

@mixin grid-setup($ns:"") {
    // add hyphen to namespace if given
    $ns: if($ns == "",$ns,"#{$ns}-");
    // set up span values
	@for $d from 1 through $grid_columns {
		@for $n from 1 through $d {
			$gcd: gcd($n,$d); $x: $n/$gcd;
            // regular classes used here just so we can see the output
			.#{$ns}span-#{$n}-#{$d} {
				@if $x < $n {
					@extend .#{$ns}span-#{$x}-#{$d/$gcd};
				} @else {
					width: $n/$d*100%;
				}
			}
		}
	}	
}

@include grid-setup(mobile);

SassMeister-output.css

.mobile-span-1-1, .mobile-span-2-2, .mobile-span-3-3, .mobile-span-4-4, .mobile-span-5-5, .mobile-span-6-6, .mobile-span-7-7, .mobile-span-8-8, .mobile-span-9-9, .mobile-span-10-10, .mobile-span-11-11, .mobile-span-12-12, .mobile-span-13-13, .mobile-span-14-14, .mobile-span-15-15, .mobile-span-16-16, .mobile-span-17-17, .mobile-span-18-18, .mobile-span-19-19, .mobile-span-20-20, .mobile-span-21-21, .mobile-span-22-22, .mobile-span-23-23, .mobile-span-24-24 {
  width: 100%;
}

.mobile-span-1-2, .mobile-span-2-4, .mobile-span-3-6, .mobile-span-4-8, .mobile-span-5-10, .mobile-span-6-12, .mobile-span-7-14, .mobile-span-8-16, .mobile-span-9-18, .mobile-span-10-20, .mobile-span-11-22, .mobile-span-12-24 {
  width: 50%;
}

.mobile-span-1-3, .mobile-span-2-6, .mobile-span-3-9, .mobile-span-4-12, .mobile-span-5-15, .mobile-span-6-18, .mobile-span-7-21, .mobile-span-8-24 {
  width: 33.33333%;
}

.mobile-span-2-3, .mobile-span-4-6, .mobile-span-6-9, .mobile-span-8-12, .mobile-span-10-15, .mobile-span-12-18, .mobile-span-14-21, .mobile-span-16-24 {
  width: 66.66667%;
}

.mobile-span-1-4, .mobile-span-2-8, .mobile-span-3-12, .mobile-span-4-16, .mobile-span-5-20, .mobile-span-6-24 {
  width: 25%;
}

.mobile-span-3-4, .mobile-span-6-8, .mobile-span-9-12, .mobile-span-12-16, .mobile-span-15-20, .mobile-span-18-24 {
  width: 75%;
}

.mobile-span-1-5, .mobile-span-2-10, .mobile-span-3-15, .mobile-span-4-20 {
  width: 20%;
}

.mobile-span-2-5, .mobile-span-4-10, .mobile-span-6-15, .mobile-span-8-20 {
  width: 40%;
}

.mobile-span-3-5, .mobile-span-6-10, .mobile-span-9-15, .mobile-span-12-20 {
  width: 60%;
}

.mobile-span-4-5, .mobile-span-8-10, .mobile-span-12-15, .mobile-span-16-20 {
  width: 80%;
}

.mobile-span-1-6, .mobile-span-2-12, .mobile-span-3-18, .mobile-span-4-24 {
  width: 16.66667%;
}

.mobile-span-5-6, .mobile-span-10-12, .mobile-span-15-18, .mobile-span-20-24 {
  width: 83.33333%;
}

.mobile-span-1-7, .mobile-span-2-14, .mobile-span-3-21 {
  width: 14.28571%;
}

.mobile-span-2-7, .mobile-span-4-14, .mobile-span-6-21 {
  width: 28.57143%;
}

.mobile-span-3-7, .mobile-span-6-14, .mobile-span-9-21 {
  width: 42.85714%;
}

.mobile-span-4-7, .mobile-span-8-14, .mobile-span-12-21 {
  width: 57.14286%;
}

.mobile-span-5-7, .mobile-span-10-14, .mobile-span-15-21 {
  width: 71.42857%;
}

.mobile-span-6-7, .mobile-span-12-14, .mobile-span-18-21 {
  width: 85.71429%;
}

.mobile-span-1-8, .mobile-span-2-16, .mobile-span-3-24 {
  width: 12.5%;
}

.mobile-span-3-8, .mobile-span-6-16, .mobile-span-9-24 {
  width: 37.5%;
}

.mobile-span-5-8, .mobile-span-10-16, .mobile-span-15-24 {
  width: 62.5%;
}

.mobile-span-7-8, .mobile-span-14-16, .mobile-span-21-24 {
  width: 87.5%;
}

.mobile-span-1-9, .mobile-span-2-18 {
  width: 11.11111%;
}

.mobile-span-2-9, .mobile-span-4-18 {
  width: 22.22222%;
}

.mobile-span-4-9, .mobile-span-8-18 {
  width: 44.44444%;
}

.mobile-span-5-9, .mobile-span-10-18 {
  width: 55.55556%;
}

.mobile-span-7-9, .mobile-span-14-18 {
  width: 77.77778%;
}

.mobile-span-8-9, .mobile-span-16-18 {
  width: 88.88889%;
}

.mobile-span-1-10, .mobile-span-2-20 {
  width: 10%;
}

.mobile-span-3-10, .mobile-span-6-20 {
  width: 30%;
}

.mobile-span-7-10, .mobile-span-14-20 {
  width: 70%;
}

.mobile-span-9-10, .mobile-span-18-20 {
  width: 90%;
}

.mobile-span-1-11, .mobile-span-2-22 {
  width: 9.09091%;
}

.mobile-span-2-11, .mobile-span-4-22 {
  width: 18.18182%;
}

.mobile-span-3-11, .mobile-span-6-22 {
  width: 27.27273%;
}

.mobile-span-4-11, .mobile-span-8-22 {
  width: 36.36364%;
}

.mobile-span-5-11, .mobile-span-10-22 {
  width: 45.45455%;
}

.mobile-span-6-11, .mobile-span-12-22 {
  width: 54.54545%;
}

.mobile-span-7-11, .mobile-span-14-22 {
  width: 63.63636%;
}

.mobile-span-8-11, .mobile-span-16-22 {
  width: 72.72727%;
}

.mobile-span-9-11, .mobile-span-18-22 {
  width: 81.81818%;
}

.mobile-span-10-11, .mobile-span-20-22 {
  width: 90.90909%;
}

.mobile-span-1-12, .mobile-span-2-24 {
  width: 8.33333%;
}

.mobile-span-5-12, .mobile-span-10-24 {
  width: 41.66667%;
}

.mobile-span-7-12, .mobile-span-14-24 {
  width: 58.33333%;
}

.mobile-span-11-12, .mobile-span-22-24 {
  width: 91.66667%;
}

.mobile-span-1-13 {
  width: 7.69231%;
}

.mobile-span-2-13 {
  width: 15.38462%;
}

.mobile-span-3-13 {
  width: 23.07692%;
}

.mobile-span-4-13 {
  width: 30.76923%;
}

.mobile-span-5-13 {
  width: 38.46154%;
}

.mobile-span-6-13 {
  width: 46.15385%;
}

.mobile-span-7-13 {
  width: 53.84615%;
}

.mobile-span-8-13 {
  width: 61.53846%;
}

.mobile-span-9-13 {
  width: 69.23077%;
}

.mobile-span-10-13 {
  width: 76.92308%;
}

.mobile-span-11-13 {
  width: 84.61538%;
}

.mobile-span-12-13 {
  width: 92.30769%;
}

.mobile-span-1-14 {
  width: 7.14286%;
}

.mobile-span-3-14 {
  width: 21.42857%;
}

.mobile-span-5-14 {
  width: 35.71429%;
}

.mobile-span-9-14 {
  width: 64.28571%;
}

.mobile-span-11-14 {
  width: 78.57143%;
}

.mobile-span-13-14 {
  width: 92.85714%;
}

.mobile-span-1-15 {
  width: 6.66667%;
}

.mobile-span-2-15 {
  width: 13.33333%;
}

.mobile-span-4-15 {
  width: 26.66667%;
}

.mobile-span-7-15 {
  width: 46.66667%;
}

.mobile-span-8-15 {
  width: 53.33333%;
}

.mobile-span-11-15 {
  width: 73.33333%;
}

.mobile-span-13-15 {
  width: 86.66667%;
}

.mobile-span-14-15 {
  width: 93.33333%;
}

.mobile-span-1-16 {
  width: 6.25%;
}

.mobile-span-3-16 {
  width: 18.75%;
}

.mobile-span-5-16 {
  width: 31.25%;
}

.mobile-span-7-16 {
  width: 43.75%;
}

.mobile-span-9-16 {
  width: 56.25%;
}

.mobile-span-11-16 {
  width: 68.75%;
}

.mobile-span-13-16 {
  width: 81.25%;
}

.mobile-span-15-16 {
  width: 93.75%;
}

.mobile-span-1-17 {
  width: 5.88235%;
}

.mobile-span-2-17 {
  width: 11.76471%;
}

.mobile-span-3-17 {
  width: 17.64706%;
}

.mobile-span-4-17 {
  width: 23.52941%;
}

.mobile-span-5-17 {
  width: 29.41176%;
}

.mobile-span-6-17 {
  width: 35.29412%;
}

.mobile-span-7-17 {
  width: 41.17647%;
}

.mobile-span-8-17 {
  width: 47.05882%;
}

.mobile-span-9-17 {
  width: 52.94118%;
}

.mobile-span-10-17 {
  width: 58.82353%;
}

.mobile-span-11-17 {
  width: 64.70588%;
}

.mobile-span-12-17 {
  width: 70.58824%;
}

.mobile-span-13-17 {
  width: 76.47059%;
}

.mobile-span-14-17 {
  width: 82.35294%;
}

.mobile-span-15-17 {
  width: 88.23529%;
}

.mobile-span-16-17 {
  width: 94.11765%;
}

.mobile-span-1-18 {
  width: 5.55556%;
}

.mobile-span-5-18 {
  width: 27.77778%;
}

.mobile-span-7-18 {
  width: 38.88889%;
}

.mobile-span-11-18 {
  width: 61.11111%;
}

.mobile-span-13-18 {
  width: 72.22222%;
}

.mobile-span-17-18 {
  width: 94.44444%;
}

.mobile-span-1-19 {
  width: 5.26316%;
}

.mobile-span-2-19 {
  width: 10.52632%;
}

.mobile-span-3-19 {
  width: 15.78947%;
}

.mobile-span-4-19 {
  width: 21.05263%;
}

.mobile-span-5-19 {
  width: 26.31579%;
}

.mobile-span-6-19 {
  width: 31.57895%;
}

.mobile-span-7-19 {
  width: 36.84211%;
}

.mobile-span-8-19 {
  width: 42.10526%;
}

.mobile-span-9-19 {
  width: 47.36842%;
}

.mobile-span-10-19 {
  width: 52.63158%;
}

.mobile-span-11-19 {
  width: 57.89474%;
}

.mobile-span-12-19 {
  width: 63.15789%;
}

.mobile-span-13-19 {
  width: 68.42105%;
}

.mobile-span-14-19 {
  width: 73.68421%;
}

.mobile-span-15-19 {
  width: 78.94737%;
}

.mobile-span-16-19 {
  width: 84.21053%;
}

.mobile-span-17-19 {
  width: 89.47368%;
}

.mobile-span-18-19 {
  width: 94.73684%;
}

.mobile-span-1-20 {
  width: 5%;
}

.mobile-span-3-20 {
  width: 15%;
}

.mobile-span-7-20 {
  width: 35%;
}

.mobile-span-9-20 {
  width: 45%;
}

.mobile-span-11-20 {
  width: 55.0%;
}

.mobile-span-13-20 {
  width: 65%;
}

.mobile-span-17-20 {
  width: 85%;
}

.mobile-span-19-20 {
  width: 95%;
}

.mobile-span-1-21 {
  width: 4.7619%;
}

.mobile-span-2-21 {
  width: 9.52381%;
}

.mobile-span-4-21 {
  width: 19.04762%;
}

.mobile-span-5-21 {
  width: 23.80952%;
}

.mobile-span-8-21 {
  width: 38.09524%;
}

.mobile-span-10-21 {
  width: 47.61905%;
}

.mobile-span-11-21 {
  width: 52.38095%;
}

.mobile-span-13-21 {
  width: 61.90476%;
}

.mobile-span-16-21 {
  width: 76.19048%;
}

.mobile-span-17-21 {
  width: 80.95238%;
}

.mobile-span-19-21 {
  width: 90.47619%;
}

.mobile-span-20-21 {
  width: 95.2381%;
}

.mobile-span-1-22 {
  width: 4.54545%;
}

.mobile-span-3-22 {
  width: 13.63636%;
}

.mobile-span-5-22 {
  width: 22.72727%;
}

.mobile-span-7-22 {
  width: 31.81818%;
}

.mobile-span-9-22 {
  width: 40.90909%;
}

.mobile-span-13-22 {
  width: 59.09091%;
}

.mobile-span-15-22 {
  width: 68.18182%;
}

.mobile-span-17-22 {
  width: 77.27273%;
}

.mobile-span-19-22 {
  width: 86.36364%;
}

.mobile-span-21-22 {
  width: 95.45455%;
}

.mobile-span-1-23 {
  width: 4.34783%;
}

.mobile-span-2-23 {
  width: 8.69565%;
}

.mobile-span-3-23 {
  width: 13.04348%;
}

.mobile-span-4-23 {
  width: 17.3913%;
}

.mobile-span-5-23 {
  width: 21.73913%;
}

.mobile-span-6-23 {
  width: 26.08696%;
}

.mobile-span-7-23 {
  width: 30.43478%;
}

.mobile-span-8-23 {
  width: 34.78261%;
}

.mobile-span-9-23 {
  width: 39.13043%;
}

.mobile-span-10-23 {
  width: 43.47826%;
}

.mobile-span-11-23 {
  width: 47.82609%;
}

.mobile-span-12-23 {
  width: 52.17391%;
}

.mobile-span-13-23 {
  width: 56.52174%;
}

.mobile-span-14-23 {
  width: 60.86957%;
}

.mobile-span-15-23 {
  width: 65.21739%;
}

.mobile-span-16-23 {
  width: 69.56522%;
}

.mobile-span-17-23 {
  width: 73.91304%;
}

.mobile-span-18-23 {
  width: 78.26087%;
}

.mobile-span-19-23 {
  width: 82.6087%;
}

.mobile-span-20-23 {
  width: 86.95652%;
}

.mobile-span-21-23 {
  width: 91.30435%;
}

.mobile-span-22-23 {
  width: 95.65217%;
}

.mobile-span-1-24 {
  width: 4.16667%;
}

.mobile-span-5-24 {
  width: 20.83333%;
}

.mobile-span-7-24 {
  width: 29.16667%;
}

.mobile-span-11-24 {
  width: 45.83333%;
}

.mobile-span-13-24 {
  width: 54.16667%;
}

.mobile-span-17-24 {
  width: 70.83333%;
}

.mobile-span-19-24 {
  width: 79.16667%;
}

.mobile-span-23-24 {
  width: 95.83333%;
}