扩展Compass断点mixin以避免重复

时间:2017-01-21 23:49:43

标签: sass placeholder mixins compass

我正在使用Compass mixin为视网膜创建媒体查询,例如:

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

效果很好。但是如果我把相同的mixin放到另一个元素中,我会在最后得到@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;
  }
}

和另一个元素的输出相同。有什么方法可以用这个mixin以某种方式制作占位符,所以所有元素都在同一个@media指令下吗?

1 个答案:

答案 0 :(得分:0)

我找到了一个很好的解决方案来避免输出上的重复代码。 首先,有一个很好的工具来管理称为地图的断点:

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

第二个而不是在每个目标元素中放置断点,最好将@include指令放到root中,并在其中放置所有带有新指令的元素响应这样(我为此创建了单独的文件):

_retina.scss:

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

结束不重复的代码)))我希望它会帮助某人。顺便说一句,我发现指南针很糟糕(((我不再使用它了。