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

【问题标题】：Handling custom media queries in Sass with Twitter Bootstrap使用 Twitter Bootstrap 在 Sass 中处理自定义媒体查询
【发布时间】：2014-01-23 07:07:22
【问题描述】：

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

@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;
}

对处理此问题的最佳方法有何建议？

【问题讨论】：

嗯，它仍然是级联风格，所以什么既适合中型也适合大型（因为您使用的是最小宽度媒体查询）不？
不，所以我应该更具体（我会编辑问题）。假设我的默认样式（适用于手持设备和移动设备）是 color:blue;但后来我想要中号和大号颜色：红色；。它确实级联，但我想覆盖中型和大型。这有意义吗？

标签： css sass media-queries

【解决方案1】：

这样的 mixin 会让你处于一个不太灵活的位置，而不仅仅是因为你使用的是 px（参见：http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/）。简而言之，您的 mixin 过于具体，对其他网站的复用性不强。

我目前正在使用 4 个 mixin 的集合来处理最常见的媒体查询：min-width、max-width、between 和 outside（我在下面采样了 min-width 和 between）

$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 }
        }
    }
}

【讨论】：

我正在使用那些基于 px 的媒体查询，因为我正在使用 Twitter Bootstrap，所以它们基于此。不确定我是否完全遵循您的代码中发生的事情，但它看起来令人印象深刻。

【解决方案2】：

尽管@cimmanon 在我发布我正在使用 Twitter Bootstrap 之前回答了我的问题，但其中有一些非常有趣的想法，我想我将从现在开始将这些想法应用到使用 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;
    }
}

【讨论】：

【解决方案3】：

使用 bootstrap-sass 变量，我在 SASS 语法中定义了这样的 mixin：

=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

这些 mixin 可以像 +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 来缩小浏览器时，您会看到颜色按以下顺序排列：绿色、红色、蓝色、黄色。

【讨论】：