一旦用自己钟意的方式命名完断点，就需要有一种方式在实际的媒体查询中使用它。有太多方法可以做这件事，我自己非常乐意使用 `map-get()` 函数读取断点地图的方法。这套系统简洁而高效。 ~~~ /// Responsive manager. /// @access public /// @param {String} $breakpoint - Breakpoint /// @requires $breakpoints @mixin respond-to($breakpoint) { $raw-query: map-get($breakpoints, $breakpoint); @if $raw-query { $query: if(type-of($raw-query) == 'string', unquote($raw-query), inspect($raw-query)); @media #{$query} { @content; } } @else { @error 'No value found for `#{$breakpoint}`. ' + 'Please make sure it is defined in `$breakpoints` map.'; } } ~~~ 显然，这样管理断点相当简单，但当需要自定义或使用多个断点会爱到一定的制约。 如果你希望能更好管理断点，我可以建议你使用类似 [Sass-MQ](https://github.com/sass-mq/sass-mq)、[Breakpoint](http://breakpoint-sass.com/) 或[Include-Media](https://github.com/eduardoboucas/include-media)，没有必要自己重新去造轮子。 ## 扩展阅读 * [Managing Responsive Breakpoints in Sass](http://www.sitepoint.com/managing-responsive-breakpoints-sass/) * [Approaches to Media Queries in Sass](http://css-tricks.com/approaches-media-queries-sass/)