Css 引导SASS结果

我使用bootstrap3.3.5和SASS。但是CSS最终版本的文件很奇怪

我写道：

section.strat-01 {
    @include make-row();

    .strat-01-img {
        @include make-xs-column(12);
        @include make-sm-column-offset(1);
        @include make-sm-column(4);
        @include make-sm-column-pull(6);    
    }

    .strat-01-txt {
        @include make-xs-column(12);
        @include make-sm-column(6);
        @include make-sm-column-push(5);
    }
}

我有双重属性：

section.strat-01 .strat-01-img {
            position: relative;
            float: left;
            width: 100%;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px; 
}

---

怎么了？为什么不合并双属性？

从多个mixin复制的属性从不合并在一起…

我认为您在这里要做的就是将其拆分为多个媒体查询，如注释中所述

输出CSS看起来“愚蠢”的原因是因为SASS只是一个预编译器，无论您在其中输入什么，都会输出，因此在同一个选择器中使用多个mixin只会返回它们的所有值

CSS之所以不过滤它，是因为它只会覆盖或扩展前面定义的规则/选择器，这就是CSS的工作方式（层叠样式表）

无论哪种方式，你都没有太多的工作要做，你想要正确的CSS以正确的分辨率应用，只需要在媒体查询中分割它，例如

$my-sm-res: 768px //for instance
$my-xs-res: 480px //for instance

@media (max-width: $my-sm-res)
    .section.strat-01
        .strat-01-img
            @include make-sm-column-offset(...)
            @include make-sm-column(...)
            @include make-sm-column-pull(...)

@media (max-width: $my-xs-res)
    .section.strat-01
        .strat-01-img
            @include make-xs-column-offset(...)
            @include make-xs-column(...)
            @include make-xs-column-pull(...)

这里的示例是当屏幕的分辨率为480px或更低时，将为您提供xs样式，当屏幕的分辨率为768px或更低时，将为您提供md样式

希望能有帮助，GL

编辑 我在这里使用的SASS格式在技术上是无效的CSS（scs也不是真正的CSS，但是如果你去掉sassy位，你将得到有效的CSS，而不是你仍然需要更改的SASS）

对于在您的情况下工作的示例，您需要做的就是添加缺少的

{}

对，然后添加

分号位于每对
prop:val
的末尾

（适用于有兴趣的人士）

谢谢您的回答。那么，如何避免双重属性呢？您的代码不应该为媒体查询生成CSS吗？您希望得到什么结果？没有双重属性的代码。例如，我有两个“位置”。结果很奇怪不？当您编写的代码显式声明了双重属性时，为什么会出现这种情况？