1

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

これを処理する最善の方法について何か提案はありますか?

4

3 に答える 3

4

そのような mixin は、px を使用しているという理由だけでなく、あまり柔軟ではない立場にあなたを置き去りにします (参照: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries- ftw/ )。簡単に言えば、ミックスインを具体化しすぎて、他のサイトであまり再利用できなくなったということです。

私は現在、最も一般的なメディア クエリを処理するために 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 }
        }
    }
}
于 2012-11-03T23:47:34.453 に答える
1

私が 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;
    }
}
于 2012-11-07T06:41:11.543 に答える