引导SASS结果

Question

我使用Bootstrap 3.3.5与SASS。但是CSS final的文件很奇怪

我写的是:

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

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

Answer 1

来自多个mixins的重复属性永远不会合并在一起…

Answer 2

我认为你在这里要做的就是把它分割成多个媒体查询，就像评论中提到的那样。

你的输出CSS看起来"愚蠢"的原因是因为SASS只是一个预编译器，无论你把它放进去，因此在同一个选择器中使用多个mixins只是简单地给你返回所有的值。

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(也不是真正的SCSS，但如果你拿出时髦的位，你会留下有效的 CSS，而不是SASS，你仍然需要改变)

对于在您的情况下工作的示例，您需要做的就是添加缺失的{}对，并在每个prop: val对的末尾添加;分号。

关于SASS和SCSS的更多信息(供感兴趣的人使用)

CSS (MDN)基础知识