Mixin for inserting list properties at breakpoints in scss.

_app.scss

h1 {
  @include breakpoint-property-array($h1--sizes, font-size);
}

h2 {
  @include breakpoint-property-array($h2--sizes, font-size);
}

_functions.scss

@function find-value($key, $list) {
  @each $item in $list {
    @if ($key == nth($item, 1)) {
      @return nth($item, 2);
    }
  }
  @return false;
}

_lists.scss

$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

@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;
  };
}