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";
$base-font-size: 16;
$viewport-width: (
small: 400,
medium: 700,
large: 1000
);
$box: (
width: 200,
background-color: brown,
font-size: 14,
respond-at: (
medium: (
font-size: 19,
width: 500
),
large: (
width: 750,
font-weight: bold
)
)
);
$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, $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;
}
}
}
@mixin style-component($component, $options: (), $viewport-size: null) {
@if $viewport-size != null {
$component-at-size: map-get($component, respond-at);
@if map-has-key($component-at-size, $viewport-size) {
// There are styles for this size.
$component-styles: map-get($component-at-size, $viewport-size);
// styles have been extended.
@each $style in $component-styles {
#{tuple-key($style)} : tuple-value($style);
}
}
}
@else {
//out: map-inspect($component-styles);
$component-styles: map-remove($component, respond-at);
// excess data has been removed.
@each $style in $component-styles {
#{tuple-key($style)} : tuple-value($style);
}
}
}
.cats {
@include style-component($box,(),medium);
}
.cats {
font-size: 19;
width: 500;
}
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.