Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
@mixin responsive-calc($columns: 2, $under: 480px) {
$pre-computed-calc: #{($under * ($under / 1px))} - #{(100% * ($under / 1px))};
display: inline-block;
min-width: ($under / 2);
width: (100% / $columns);
max-width: 100%;
min-width: -webkit-calc(100% / #{$columns});
min-width: calc(100% / #{$columns});
width: -webkit-calc(#{$pre-computed-calc});
width: calc(#{$pre-computed-calc});
}
.foo {
@include responsive-calc($columns: 3, $under: 600px);
}
.foo {
display: inline-block;
min-width: 300px;
width: 33.33333333%;
max-width: 100%;
min-width: -webkit-calc(100% / 3);
min-width: calc(100% / 3);
width: -webkit-calc(360000px - 60000%);
width: calc(360000px - 60000%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment