Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.20)
// Compass (v1.0.3)
// ----

@mixin widths($widths-columns, $widths-breakpoint: null) {

  // Loop through the number of columns for each denominator of our fractions.
  @each $widths-denominator in $widths-columns {

    // Begin creating a numberator for our fraction up until we hit the
    // denominator.
    @for $widths-numerator from 1 through $widths-denominator {

      // Build a selector in the format `[data-width~="3/4"]`.
      [data-size~="#{$widths-breakpoint}#{$widths-numerator}/#{$widths-denominator}"] {
          width: ($widths-numerator / $widths-denominator) * 100% !important;
      }

    }

  }

}





@include widths(12);

@media screen and (min-width: 720px) {

    @include widths(12, 'tablet:');

}

@media screen and (min-width: 1024px) {

    @include widths(12, 'desktop:');

}

SassMeister-output.css

[data-size~="1/12"] {
  width: 8.33333% !important;
}

[data-size~="2/12"] {
  width: 16.66667% !important;
}

[data-size~="3/12"] {
  width: 25% !important;
}

[data-size~="4/12"] {
  width: 33.33333% !important;
}

[data-size~="5/12"] {
  width: 41.66667% !important;
}

[data-size~="6/12"] {
  width: 50% !important;
}

[data-size~="7/12"] {
  width: 58.33333% !important;
}

[data-size~="8/12"] {
  width: 66.66667% !important;
}

[data-size~="9/12"] {
  width: 75% !important;
}

[data-size~="10/12"] {
  width: 83.33333% !important;
}

[data-size~="11/12"] {
  width: 91.66667% !important;
}

[data-size~="12/12"] {
  width: 100% !important;
}

@media screen and (min-width: 720px) {
  [data-size~="tablet:1/12"] {
    width: 8.33333% !important;
  }

  [data-size~="tablet:2/12"] {
    width: 16.66667% !important;
  }

  [data-size~="tablet:3/12"] {
    width: 25% !important;
  }

  [data-size~="tablet:4/12"] {
    width: 33.33333% !important;
  }

  [data-size~="tablet:5/12"] {
    width: 41.66667% !important;
  }

  [data-size~="tablet:6/12"] {
    width: 50% !important;
  }

  [data-size~="tablet:7/12"] {
    width: 58.33333% !important;
  }

  [data-size~="tablet:8/12"] {
    width: 66.66667% !important;
  }

  [data-size~="tablet:9/12"] {
    width: 75% !important;
  }

  [data-size~="tablet:10/12"] {
    width: 83.33333% !important;
  }

  [data-size~="tablet:11/12"] {
    width: 91.66667% !important;
  }

  [data-size~="tablet:12/12"] {
    width: 100% !important;
  }
}
@media screen and (min-width: 1024px) {
  [data-size~="desktop:1/12"] {
    width: 8.33333% !important;
  }

  [data-size~="desktop:2/12"] {
    width: 16.66667% !important;
  }

  [data-size~="desktop:3/12"] {
    width: 25% !important;
  }

  [data-size~="desktop:4/12"] {
    width: 33.33333% !important;
  }

  [data-size~="desktop:5/12"] {
    width: 41.66667% !important;
  }

  [data-size~="desktop:6/12"] {
    width: 50% !important;
  }

  [data-size~="desktop:7/12"] {
    width: 58.33333% !important;
  }

  [data-size~="desktop:8/12"] {
    width: 66.66667% !important;
  }

  [data-size~="desktop:9/12"] {
    width: 75% !important;
  }

  [data-size~="desktop:10/12"] {
    width: 83.33333% !important;
  }

  [data-size~="desktop:11/12"] {
    width: 91.66667% !important;
  }

  [data-size~="desktop:12/12"] {
    width: 100% !important;
  }
}