étendre Compass mixin pour éviter breakpoint doublons

Question

J'utilise Compass mixin pour créer des requêtes des médias pour la rétine comme dans l'exemple:

header { 
    height: $header-image-height; 
    text-align: center; 
    position: relative; 
    @include breakpoint($standard-resolution) { 
    background: 
      linear-gradient(
          rgba(0, 0, 0, 0.1), 
          rgba(0, 0, 0, 0.1) 
      ), 
      url(../../img/dist/xxx.jpg) center center no-repeat; 
    } 
    @include breakpoint($retina-resolution) { 

    background: 
      linear-gradient(
          rgba(0, 0, 0, 0.1), 
          rgba(0, 0, 0, 0.1) 
      ), 
      url(../../img/dist/xxx_2x.jpg) center center no-repeat; 
    background-size: 1176px auto; 
    } 
    color: $header-color; 
    @extend %montserrat-bold; 
} 

Il fonctionne bien. Mais si je mets le même mixin dans un autre élément, je vais obtenir la sortie de dupliquée @media à la fin - un pour chaque élément:

@media screen and (max-resolution: 1.9999dppx), screen and (-webkit-max-device-pixel-ratio: 1.9999), screen and (max--moz-device-pixel-ratio: 1.9999), screen and (max-resolution: 191.9904dpi) { 
    header { 
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../../img/dist/xxx.jpg) center center no-repeat; 
    } 
} 

Et la même sortie pour un autre éléments. Est-il possible que je puisse en quelque sorte créer un espace réservé à partir de ce mixage, donc tous les éléments seraient sous la même directive @media?

Answer 1

J'ai trouvé une bonne solution pour éviter le code en double sur la sortie. Tout d'abord, il est un bon outil pour gérer les cartes appelées points d'arrêt:

$breakpoints: (
'retina': 
//here put all your breakpoints 
) 

deuxième au lieu de mettre breakpoint l'intérieur de chaque élément cible, il est préférable de mettre la directive @include à la racine et à l'intérieur mettre tous vos éléments avec la nouvelle directive de répondre à ce que (j'ai créé fichier séparé pour cela):

_retina.scss:

@include respond-to(retina) { 
    element1 {} 
    .element2 {} 
} 

Fin code ne dupliqué))) Je l'espère wil J'aide quelqu'un. Au fait j'ai découvert que Compass suce (((Je ne l'utiliserai plus.)