SASS优化响应式断点管理

前端开发whqet,csdn,王海庆,whqet,前端开发专家

原文：《Managing Responsive Breakpoints with Sass》

作者：Hugo Giraudel，来自法国，著名SASS大牛，在SassWay等多个网站撰文推广sass，是SassyJSON、SassyMatrix等多个开源项目的开发者，大家可以到他的官方网站、github上了解详情。

翻译：前端开发whqet，以意译为主，不当之处请大家批评指正。

---------------------------------------------------------------------------------------------------------------------------------

当你需要搞定响应式布局时，一堆堆的媒体查询、大量的属性、属性值往往可以把你搞颠，SASS（或者诸如此类的预处理器）被认为是处理响应式断点的最佳利器。

说到响应式断点处理，很多种方式涌上心头，经常有人问哪种方式最优，正如前端开发领域的大多数问题一样，这个问题同样没有标准答案，我们需要具体问题具体分析。更确切的说，难度不在于提出一个系统，而是提出一个既足够灵活（适用大部分场合）又不非常复杂的系统。

在今天的文章里，我将给大家介绍若干种响应式布局断点的解决方案，每一种都经过实践验证，一些方案可能优于其他方案，我会把决定的权利交给大家。

1.使用变量(With variables)

Bootstrap和Foundation采用这种方式，首先定义变量，然后在媒体查询中使用变量。换句话说，你可以在配置文件或者其他地方定义变量以备使用。我们来看看Bootstrap怎么干的。

// Defining values$screen-sm-min: 768px;$screen-xs-max: ($screen-sm-min - 1);$screen-md-min: 992px;$screen-sm-max: ($screen-md-min - 1);$screen-lg-min: 1200px;$screen-md-max: ($screen-lg-min - 1); // Usage@media (max-width: $screen-xs-max) { ... }@media (min-width: $screen-sm-min) { ... }@media (max-width: $screen-sm-max) { ... }@media (min-width: $screen-md-min) { ... }@media (max-width: $screen-md-max) { ... }@media (min-width: $screen-lg-min) { ... }

Foudation更进一步，使用跨范围的媒体查询，避免使用过多的max-width和min-width。

// Defining values$small-range:   (0em, 40em);       /* 0, 640px */$medium-range:  (40.063em, 64em);  /* 641px, 1024px */$large-range:   (64.063em, 90em);  /* 1025px, 1440px */$xlarge-range:  (90.063em, 120em); /* 1441px, 1920px */$xxlarge-range: (120.063em);       /* 1921px */ // Defining media queries$screen:       "only screen" !default;$landscape:    "#{$screen} and (orientation: landscape)" !default;$portrait:     "#{$screen} and (orientation: portrait)" !default;$small-up:     $screen !default;$small-only:   "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;$medium-up:    "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;$medium-only:  "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;$large-up:     "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;$large-only:   "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;$xlarge-up:    "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;$xlarge-only:  "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;$xxlarge-up:   "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default; // Usage@media #{$small-up}     { ... }@media #{$small-only}   { ... }@media #{$medium-up}    { ... }@media #{$medium-only}  { ... }@media #{$large-up}     { ... }@media #{$large-only}   { ... }@media #{$xlarge-up}    { ... }@media #{$xlarge-only}  { ... }@media #{$xxlarge-up}   { ... }@media #{$xxlarge-only} { ... }

两种方法各有一个不爽的地方，在Bootstrap里每次都要使用max-width，在Foundation里我们需要使用插值变量这种又丑又烦的方式。显示我们需要想办法解决这些问题。

2.使用独立Mixin(With a standalone mixin)

《media queries in Sass 3.2》是CSS-Tricks里最火的文章之一，在这篇文章里Chris Coyier在借鉴a former idea by Mason Wendell和a former idea by Jeff Croft两文的基础上，如何使用sass实现响应式布局的断点管理。

命名断点是非常重要的，因为可以为抽象的数字赋予意义（你知道767px是什么意思吗，我不知道，直到我去使用小屏幕的时候才知道）。为什么Bootstrap和Foundation要使用变量呢，不也是为了给抽象的数字起个名字吗？

所以我们定义个mixin，接收断点名作唯一的参数，返回媒体查询的内容。准备好了吗？走起。

@mixin respond-to($breakpoint) {  @if $breakpoint == "small" {    @media (min-width: 767px) {      @content;    }  }   @else if $breakpoint == "medium" {    @media (min-width: 992px) {      @content;    }  }   @else if $breakpoint == "large" {    @media (min-width: 1200px) {      @content;    }  }}

然后，我们这样使用mixin。

@include respond-to(small) { ... }@include respond-to(medium) { ... }@include respond-to(large) { ... }

这个方法是极好的（甄嬛体，老外也看？），原因有二：抽象数据有意义，大量断点集中管理。如果你想把“992px”改成“970px”，你不需要爬过每一个css文件，而只需更新mixin，然后全部更新。

但是也还有两个问题：

a.断点不容易从mixin里拿出来，放到配置文件里去。

b.冗余太多。

3. 可配置的mixin(With a configurable mixin  )

<为了解决上面的两个问题，我们需要从断点mixin中抽出一个列表，只剩下mixin核心，然后这个列表就可以随便移动，或者扔到配置文件中。

然后，使用sass 3.3+中的maps，我们可以方便的使用关联的属性和属性值。

$breakpoints: (  'small'  : 767px,  'medium' : 992px,  'large'  : 1200px);

然后原来的mixin进行相应的修改

@mixin respond-to($breakpoint) {  // Retrieves the value from the key  $value: map-get($breakpoints, $breakpoint);   // If the key exists in the map  @if $value != null {    // Prints a media query based on the value    @media (min-width: $value) {      @content;    }  }   // If the key doesn't exist in the map  @else {    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "        + "Please make sure it is defined in `$breakpoints` map.";  }}

我们在修改mixin的同时也进行了一些提高，不要小看这些提高，我们加上了错误处理，如果在maps中没有找到断点值，将会弹出一个错误提示，这将便于我们开发过程中的调试。

我们让mixin变得更加精简，能很好的处理错误，同时我们去掉了一个功能——判断属性是否是你想要的（min-width,max-width,min-height等），这在移动优先的网页中没问题，因为我们仅仅需要min-width。但是，如果需要查询其他属性，我们需要把这个功能加回来。为了达到这个目的，我想到了一个非常优雅的解决方案，同时并不增加复杂性。

$breakpoints: (  'small'  : ( min-width:  767px ),  'medium' : ( min-width:  992px ),  'large'  : ( min-width: 1200px ));  @mixin respond-to($name) {  // If the key exists in the map  @if map-has-key($breakpoints, $name) {    // Prints a media query based on the value    @media #{inspect(map-get($breakpoints, $name))} {      @content;    }  }   // If the key doesn't exist in the map  @else {    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "        + "Please make sure it is defined in `$breakpoints` map.";  }}

在这里，我们主要做了三个事情

a. 检查查询的断点在map中存在不存在

b.如果存在，打印对应的媒体查询。

c.如果不在，进行错误提示。

简单吧，如果我们回顾前面的两个缺陷，已经不再有WET(Write Everything Twice))问题，也不再有不灵活的媒体查询。但是还有一个问题，不支持复杂的媒体查询。复杂指的是涉及多个组件的查询（e.g. screen and (min-width: 767px)）。我们上面这些方案除了第一种变量之外都不能很好的解决这个问题。

4. 使用外部工具(With an external tool)

最后一个同样重要的是，如果不想创建自己的mixin，你可以使用外部的工具处理响应式布局的断点，有很多sass的扩展在这个方面做得很好。

SassMQ by Kaelig
Breakpoint by Mason Wendell and Sam Richard
Breakup by Ben Scott

 SassMQBreakpointBreakupMQ type*-widthanyanyNo Query fallbackyepyepyepAPI complexitysimplevery simplemediumCode complexityvery simplecomplexesimpleExtraDebug modeSingularity.gs—基本上是这样，如果发现有没有涉及的，记得一定告诉我。

SassMQ

// Configuration$mq-responsive: true;$mq-static-breakpoint: desktop;$mq-breakpoints: (  mobile:  320px,  tablet:  740px,  desktop: 980px,  wide:    1300px); // Exampleselector {  @include mq($from: mobile) {    property: value;  }}

BreakPoints

$high-tide: 500px;$ex-presidents: 600px 800px;$surfboard-width: max-width 1000px;$surfboard-height: (min-height 1000px) (orientation portrait); selector {  @include breakpoint($high-tide) {    property: value;  }}

Breakup

$breakup-breakpoints: (  'thin' '(max-width: 35.999em)',  'wide' '(min-width: 36em)',  'full' '(min-width: 61em)'); selector {  @include breakup-block('thin') {    property: value;  }}

总结

我们在这篇文章里看到的这么些个方案，都有长有短，没有一个完美的方案。最后我觉得还是由你来决定怎么把握可用性和复杂性的平衡。

一句话，在合适的场合使用合适的工具。

------------------------------------------------------------------------------------------------------------------------------

That's it. 敬请留言，说说你的意见和建议。

----------------------------------------------------------

前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------