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

	SassMQ	Breakpoint	Breakup
MQ type	*-width	any	any
No Query fallback	yep	yep	yep
API complexity	simple	very simple	medium
Code complexity	very simple	complexe	simple
Extra	Debug mode	Singularity.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前端開發，分享相關資源，歡迎點贊，歡迎拍磚。
---------------------------------------------------------------------------------------------------------