public
Created

Mixin for inserting list properties at breakpoints in scss.

  • Download Gist
_app.scss
SCSS
1 2 3 4 5 6 7
h1 {
@include breakpoint-property-array($h1--sizes, font-size);
}
 
h2 {
@include breakpoint-property-array($h2--sizes, font-size);
}
_functions.scss
SCSS
1 2 3 4 5 6 7 8
@function find-value($key, $list) {
@each $item in $list {
@if ($key == nth($item, 1)) {
@return nth($item, 2);
}
}
@return false;
}
_lists.scss
Sass
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
$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
);
_mixins.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12
@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;
};
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.