使用Twitter Bootstrap在Sass中处理自定义媒体查询

Question

我有一个基于Twitter Bootstrap的响应式媒体查询的Sass混入：

@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

像这样的混入会让你处于一个不太灵活的位置，这不仅仅是因为你在使用px (参见：http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/)。简单地说，你把你的混入搞得太具体了，而且对其他站点的可重用性也不是很好。

我目前使用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;

一个大小列表允许我在em不合适的极少数情况下使用px (例如处理图像)。

// 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

尽管在我发布我正在使用Twitter Bootstrap之前，@cimmanon回答了我的问题，但它有一些非常有趣的想法，我想从现在开始我将把这些想法应用到我使用Twitter Bootstrap的Sass项目中。下面是我发现的很好的方法：

/* 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

使用bootstrap-sass变量，我在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来缩小浏览器时，你会看到颜色的顺序是:绿色，红色，蓝色，黄色。