Up until last week, Sass breakpoints were a bit of a mystery to me. I finally figured out how they work.
First, they are programmatically generated. Define the breakpoints as a map. I use the list here.
Next, use a mixin and expressions to build the media queries. I use
min-width. I leave it as an exercise for the reader if you wish to reverse this to use
To use, define your breakpoint styles using @import. Here is an example defining H1 font sizes at three different breakpoints: