處理自定義媒體查詢在薩斯與Twitter的引導

Question

我有一個基於Twitter的引導的響應媒體查詢我的媒體查詢薩斯混入：

@mixin respond-to($media) { 
    @if $media == handhelds { 
     /* Landscape phones and down */ 
     @media (max-width: 480px) { @content; } 
    } 
    @else if $media == small { 
     /* Landscape phone to portrait tablet */ 
     @media (max-width: 767px) {@content; } 
    } 
    @else if $media == medium { 
     /* Portrait tablet to landscape and desktop */ 
     @media (min-width: 768px) and (max-width: 979px) { @content; } 
    } 
    @else if $media == large { 
     /* Large desktop */ 
     @media (min-width: 1200px) { @content; } 
    } 
    @else { 
     @media only screen and (max-width: #{$media}px) { @content; } 
    } 
} 

，我稱他們爲我的整個SCSS文件，像這樣：

.link { 
    color:blue; 
    @include respond-to(medium) { 
     color: red; 
    } 
} 

但是，有時我想使用相同樣式對多個查詢進行樣式設置。現在我做他們是這樣的：

.link { 
    color:blue; /* this is fine for handheld and small sizes*/ 

    /*now I want to change the styles that are cascading to medium and large*/ 
    @include respond-to(medium) { 
     color: red; 
    } 
    @include respond-to(large) { 
     color: red; 
    } 
} 

但我重複代碼，所以我不知道是否有寫的，所以我可以針對多個查詢更簡潔的方式。像這樣的事情，所以我就不需要再重複我的代碼（我知道這不工作）：

@include respond-to(medium, large) { 
    color: red; 
} 

在處理這種最好的方式有什麼建議？

Answer 1

像這樣的mixin會讓你處於一個不太靈活的位置，而不僅僅是因爲你使用了px（請參閱：http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/）。簡而言之，你已經使得你的mixin過於具體，並且對其他站點來說不太可重用。

我目前使用的4所混入的集合來處理最常見的媒體查詢：最小寬度，最大寬度之間，和外面（我已經採樣最小寬度之間下文）

$output-media-width: true !default; // true = all, otherwise use a list of numeric values (eg. 320px 23em) 

@mixin media-min-width($bp) { 
    @if type-of($output-media-width) != list { 
     @media (min-width: $bp) { 
      @content; 
     } 
    } @else { 
     $output-bp: find-comparable($bp, $output-media-width); 
     @if not comparable($output-bp, $bp) { 
      @debug "Output breakpoint: #{$output-bp}, Chosen minimum width: #{$bp}"; 
     } @else if $output-bp >= $bp { 
      @content; 
     } 
    } 
} 

@mixin media-between($bp1, $bp2) { 
    @if type-of($output-media-width) != list { 
     @media (min-width: $bp1) and (max-width: make-less-than($bp2)) { 
      @content; 
     } 
    } @else { 
     $output-bp1: find-comparable($bp1, $output-media-width); 
     $output-bp2: find-comparable($bp2, $output-media-width); 
     @if not comparable($output-bp1, $bp1) or not comparable($output-bp2, $bp2) { 
      @debug "Output breakpoints: #{$output-bp1} and #{$output-bp2}, Chosen breakpoints: #{$bp1} and #{$bp2}"; 
     } @else if $output-bp2 >= $bp1 and $output-bp2 < $bp2 { 
      @content; 
     } 
    } 
} 

@function find-comparable($val, $list) { 
    @each $item in $list { 
     @if comparable($val, $item) { 
      @return $item; 
     } 
    } 
} 

@function make-less-than($val) { 
    @return if(unit($val) == em, $val - .001, $val - 1); 
} 

這個mixin套件讓我可以生成一個響應式的CSS文件或者一個我想要的任何寬度的非響應式CSS文件集合（專門針對不喜歡媒體查詢的設備），只需在我的文件頂部：

$output-media-width: 800px 60em; 

大小列表讓我使用px在em不適合的罕見情況下（如處理圖像）。

// Device widths 
$device-x-narrow: 23em; // 320px 
$device-narrow: 35em; // 480px 
$device-medium: 60em; // 800px 
$device-wide: 70em; // 1000px 

article.event { 
    @mixin tableify { 
//  footer { display: table-row } 
     footer section { display: table-cell } 
     footer section + section { padding-left: 2em } 
    } 

    @include media-min-width($device-medium) { // 2-col layout still 
     #main > & { // single event view 
      @include tableify; 
     } 
    } 

    // sometimes you need a non-standard breakpoint, too... 
    @include media-min-width(27em) { // narrow devices 
     section & { 
      @include tableify; 
     } 
    } 

    @include media-max-width(27em) { 
     footer section.categories ul { 
      display: block; 
      padding-left: 0; 
      li { display: inline } 
      li + li { margin-left: 1em } 
     } 
    } 
} 

Answer 2

儘管@cimmanon回答我的問題之前，我張貼，我用Twitter的引導，它有它的一些非常有趣的想法，我想我會從現在開始申請使用我的薩斯項目Twitter Bootstrap。以下是我發現偉大的工作：

/* Responsive dimensions */ 
$handheld-max: 479px; 
$small-min: $handheld-max + 1; 
$small-max: 767px; 
$medium-min: $small-max + 1; 
$medium-max: 979px; 
$large-min: $medium-max + 1; 
$large-max: 1199px; 
$xlarge: 1200; 

/*Responsive query mixins */ 
@mixin media-above($min) { 
    @media (min-width: $min) { @content; } 
} 
@mixin media-below($max) { 
    @media (max-width: $max) { @content; } 
} 
@mixin media-between($min, $max) { 
    @media (min-width: $min) and (max-width: $max) { @content; } 
} 

，然後把它在我的代碼如下所示（基於我的問題要求）：

.link { 
    color: blue; 
    @mixin media-above($medium-min){ 
     color: red; 
    } 
} 

Answer 3

使用自舉薩斯變量，我這樣定義混入在SASS語法：

=media-width-below($max) 
    @media (max-width: $max) 
    @content 

=media-width-between($min, $max) 
    @media (min-width: $min), (max-width: $max) 
    @content 

=media-width-above($min) 
    @media (min-width: $min) 
    @content 

=media-xs 
    +media-width-above($screen-xs-min) 
    @content 

=media-sm 
    +media-width-above($screen-sm-min) 
    @content 

=media-md 
    +media-width-above($screen-md-min) 
    @content 

=media-lg 
    +media-width-above($screen-lg-min) 
    @content 

那些混入將是可用的，就像+make-sm-column或.col-md-5類。你可以使用它像這樣：

body 
    +media-xs 
    background-color: yellow 
    +media-sm 
    background-color: blue 
    +media-md 
    background-color: red 
    +media-lg 
    background-color: green 

當你將會讓你的瀏覽器從大改變它XS小，你會在這個順序看顏色：綠，紅，藍，黃。