SASSの複数のブレークポイント用のスタイル

Question

SASSで2つのミックスインを定義して、メディアクエリを簡単に配置できるようにしました。私が遭遇している問題は、私が頻繁に多くの質問を繰り返していることです。つまり、私のスタイルの変更のいくつかは、タブレットとモバイルのブレークポイントで同じで、他のものは異なっています。例：

私のミックスインは、次のように定義されてい

.foo 
    float: left 
    width: 50% 
    +tablet() 
    float: none 
    display: block 
    width: 100% 
    +mobile() 
    float: none 
    display: block 
    width: 100% 

：

=tablet 
    @media (min-width: #{$mobile-width} + 1) and (max-width: #{$tablet-width}) 
    @content 

=mobile 
    @media (max-width: #{$mobile-width}) 
    @content 

私はこのような何かをしてみたい：コンパイルされません

... 
+tablet(), +mobile 
    float: none 
    display: block 
    width: 100% 

を、そう何ですSASSスタイルシートのDRYを維持する最善の方法は？

Answer 1

@Stefan Fのコメントによれば、モバイルとタブレットのサイズをカプセル化した+both()というような第3のミックスインを作成するのが最も簡単な方法です。 （彼はしなかったという理由だけで、私はこれを自分で答えることだし、それはいくつかの時間となっている。）

例：

=both 
    @media (max-width: #{$tablet-width}) 
    @content 

使用法：あなたが唯一MAX-で別のミックスインを定義することができ

.foo 
    float: left 
    width: 50% 
    +both() 
    float: none 
    display: block 
    width: 100% 

Answer 2

モバイルとタブレットのメディアを文字列として定義し、これらの文字列を連結することができます。

Scssは簡単に草に変換できます。

$mobile-width: 320px; 
$tablet-width: 760px; 

// Media queries as strings 
$tablet: "(min-width: #{$mobile-width + 1}) and (max-width: #{$tablet-width})"; 
$mobile: "(max-width: #{$mobile-width})"; 

// Converts a list to a string with delimiters between elements 
@function join-list($list, $separator: ", ") { 
    $result-string: ""; 

    @each $item in $list { 
    // Index of the current item of `$list` list 
    $index: index($list, $item); 
    $result-string: $result-string + $item; 

    // If this is not the last item, adds separator 
    @if ($index != length($list)) { 
     $result-string: $result-string + $separator; 
    } 
    } 

    @return $result-string; 
} 

@mixin get-media($medias...) { 
    @media #{join-list($medias, " and ")} { 
    @content; 
    } 
} 

.foo { 
    float: left; 
    width: 50%; 

    @include get-media($mobile, $tablet) { 
    // or @include get-media($mobile) { 
    // or @include get-media($tablet) { 
    float: none; 
    display: block; 
    width: 100%; 
    } 
} 

CSSの出力：

.foo { 
    float: left; 
    width: 50%; 
} 
@media (max-width: 320px) and (min-width: 321px) and (max-width: 760px) { 
    .foo { 
    float: none; 
    display: block; 
    width: 100%; 
    } 
} 

SassMeister demo。