Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Mixin for inserting list properties at breakpoints in scss.
h1 {
@include breakpoint-property-array($h1--sizes, font-size);
}
h2 {
@include breakpoint-property-array($h2--sizes, font-size);
}
@function find-value($key, $list) {
@each $item in $list {
@if ($key == nth($item, 1)) {
@return nth($item, 2);
}
}
@return false;
}
$breakpoints: (
'palm' (max-width 480px),
'lap' (481px 1024px),
'portable' (max-width 1024px),
'desk' 1025px,
'cinema' 1919px
);
$h1--sizes: (
'palm' 40px,
'lap' 50px,
'portable' 60px,
'desk' 70px,
'cinema'
);
$h2--sizes: (
'palm' 22px,
'portable' 30px
);
@mixin breakpoint-property-array($list, $property) {
@each $item in $list {
$key: nth($item, 1);
$declaration: nth($item, 2);
@include breakpoint(find-value($key, $breakpoints)) {
#{$property} : $declaration;
}
//@debug 'name (breakpoint): ' + $key + ' declaration: ' + $declaration;
};
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.