продлить компас точки останова подмешать, чтобы избежать дубликатов

Question

Я использую Compass подмешать для создания медиа-запросов для сетчатки, как в примере:

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

Он хорошо работает. Но если я поставлю то же подмешать в другой элемент, я буду получать дублированный выход @media в конце - по одному для каждого элемента:

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

И тот же результат для других элементов. Есть ли какой-либо способ, который я мог бы каким-то образом заполнить эту смесь, так что все элементы будут под одной и той же директивой @media?

Answer 1

Я нашел хорошее решение, чтобы избежать дублирования кода на выходе. Прежде всего, это хороший инструмент для управления точками останова называемые карты:

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

Во-вторых, вместо ввода точки останова внутри каждого целевого элемента, то лучше поставить @include директиву к корню и внутри него поместить все элементы с новой директивой реагировать на это нравится (я создал отдельный файл для этого):

_retina.scss:

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

End не дублируется код))) Я надеюсь, что это точн Я помогу кому-нибудь. Кстати, я обнаружил, что Compass сосет (((я больше его не использую.