断点管理器
最后更新于:2022-04-01 10:47:30
一旦用自己钟意的方式命名完断点,就需要有一种方式在实际的媒体查询中使用它。有太多方法可以做这件事,我自己非常乐意使用 `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/)