Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// sass-maps-plus (ve4d32a1dc2)
// ----
@import "sass-maps-plus";
$viewport: (
width: (
small: 400,
medium: 700,
large: 1000
)
);
$box: (
width: (
small: 200,
medium: 500,
large: 750
)
);
$kittens: (
width: (
small: 180,
medium: 400,
large: 740
)
);
@mixin respond-to($viewport-size) {
$breakpoint: map-get-z($viewport, width, $viewport-size);
@media screen and (min-width: $breakpoint + px) {
@content;
}
}
@mixin set-fluid-width-at($component, $parent, $viewport-size: small) {
$component-width: map-get-z($component, width, $viewport-size);
$parent-width: map-get-z($parent, width, $viewport-size);
$result: $component-width / $parent-width * 100%;
@if $viewport-size == small {
width: $result;
@content;
} @else {
@include respond-to($viewport-size) {
width: $result;
@content;
}
}
}
.box {
@include set-fluid-width-at($box, $viewport);
@include set-fluid-width-at($box, $viewport, medium) {
border: solid;
}
@include set-fluid-width-at($box, $viewport, large) {
border: dotted;
}
}
.kittens {
@include set-fluid-width-at($kittens, $box);
@include set-fluid-width-at($kittens, $box, medium) {
border: solid;
}
@include set-fluid-width-at($kittens, $box, large) {
border: dotted;
}
}
.box {
width: 50%;
}
@media screen and (min-width: 700px) {
.box {
width: 71.42857143%;
border: solid;
}
}
@media screen and (min-width: 1000px) {
.box {
width: 75%;
border: dotted;
}
}
.kittens {
width: 90%;
}
@media screen and (min-width: 700px) {
.kittens {
width: 80%;
border: solid;
}
}
@media screen and (min-width: 1000px) {
.kittens {
width: 98.66666667%;
border: dotted;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.