Skip to content

Instantly share code, notes, and snippets.

@roryashfordbentley
Created October 1, 2014 10:29
Show Gist options
  • Save roryashfordbentley/d682baa51aa9dfa9026c to your computer and use it in GitHub Desktop.
Save roryashfordbentley/d682baa51aa9dfa9026c to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v2.0.0)
// ----
@import "sass-list-maps";
@function equivalent_fractions($numerator,$denominator){
$fractions: ();
@for $i from -$numerator through -1{
@if($numerator % abs($i) == 0 and $denominator % abs($i) == 0){
$fractions: map-merge($fractions, abs($i) #{$numerator/abs($i)}-#{$denominator/abs($i)});
}
}
// return map of all fractions
@return $fractions;
}
/**
* Grid Columns
*
* Set the grid column widths based on the number of
* columns divided by the total number of columns.
*/
@mixin grid_columns($prefix: null, $suffix: null, $columns: null){
@for $i from 1 through $columns{
$css_classes: equivalent_fractions($i,$columns);
$column_class: null;
@each $css_class in $css_classes{
$column_class: $column_class,
#{ $prefix }#{ value($css_class) }#{ $suffix };
}
#{$column_class}{
color: red;
}
}
}
@include grid_columns('.col--',null,12);
/**
* Grid Columns
*
* Set the grid column widths based on the number of
* columns divided by the total number of columns.
*/
.col--1-12 {
color: red; }
.col--1-6, .col--2-12 {
color: red; }
.col--1-4, .col--3-12 {
color: red; }
.col--1-3, .col--2-6, .col--4-12 {
color: red; }
.col--5-12 {
color: red; }
.col--1-2, .col--2-4, .col--3-6, .col--6-12 {
color: red; }
.col--7-12 {
color: red; }
.col--2-3, .col--4-6, .col--8-12 {
color: red; }
.col--3-4, .col--9-12 {
color: red; }
.col--5-6, .col--10-12 {
color: red; }
.col--11-12 {
color: red; }
.col--1-1, .col--2-2, .col--3-3, .col--4-4, .col--6-6, .col--12-12 {
color: red; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment