Styles pour plusieurs points d'arrêt dans SASS

Question

J'ai défini deux mixins dans SASS qui me permettent de placer facilement des requêtes média. Le problème que je rencontre est que je me répète fréquemment à travers de nombreuses requêtes. C'est-à-dire, certains de mes changements de style sont les mêmes pour les points de rupture de tablette et de mobile et d'autres sont différents. Exemple:

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

Où mes mixins sont définis comme ceci:

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

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

J'aimerais faire quelque chose comme ceci:

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

Cela ne compile pas, donc ce qui est la meilleure façon de garder mes feuilles de style SASS au sec?

Answer 1

Selon le commentaire de @Stefan F, la chose la plus simple à faire dans ce cas était de créer un troisième mix appelé (quelque chose comme): +both() qui encapsulait le dimensionnement des mobiles et des tablettes. (Je réponds à moi-même que parce qu'il ne l'a pas et il a été un certain temps.)

Exemple:

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

Utilisation:

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

Answer 2

Vous pouvez définir des médias pour mobile et tablette en tant que chaînes, puis concaténer ces chaînes.

Scss peut facilement être converti en sass.

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

sortie 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.